やまどり

カラーコード変換

HEX・RGB・HSL を相互変換します。

R
G
B
H
S
L
HEX#3b82f6
RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)

カラーコード形式の違い

  • HEX（16進数） —#RRGGBB 形式。CSSで最もよく使われる。
  • RGB —rgb(R, G, B) 形式。赤・緑・青を0〜255で指定。
  • HSL —hsl(H, S%, L%) 形式。色相・彩度・明度で指定。人間が直感的に扱いやすい。

使い方

カラーピッカーで色を選ぶか、HEX・RGB・HSL いずれかの値を直接入力すると、他の形式に自動変換されます。 変換後の値はコピーボタンで即座にクリップボードへコピーできます。

カラーコード変換の使い方

  1. STEP 1HEX、RGB、HSLのいずれかで色を入力します。
  2. STEP 2変換後の各形式とプレビューを見比べます。
  3. STEP 3実装先に合うコードをコピーしてCSSやデザインツールへ貼り付けます。

具体的な利用例

デザイン資料の「#2563EB」をRGB指定が必要な画像ソフトへ移す場合や、明度を調整しやすいHSLへ変換したい場合に使えます。カラーピッカーから近い色を探すこともできます。

結果を見るときの注意点

同じ数値でも、画面の色設定やディスプレイによって見え方は変わります。また、文字と背景の組み合わせは変換結果だけでなく、実際の画面でコントラストも確認してください。

入力データの扱い

処理はこのブラウザ内で完結し、入力したテキストやファイルは変換・解析のために外部サーバーへ送信されません。共有端末を使う場合は、作業後に入力欄とクリップボードの内容も消去してください。