カラーコード変換（HEX・RGB・HSL）

機能

カラーコード変換ツールは、一般的な CSS 表記の色を受け取り、HEX、RGB、HSL、HSV、CMYK のすべての表記で同時に表示します。プレビュー用の色見本、完全に一致する場合は CSS カラー名、さらに白・黒とのコントラスト比も表示されるので、読みやすさを確認できます。

使い方

1. 色 欄に色を入力または貼り付けるか、横のカラーピッカーを使います。
2. 入力に合わせてすべての表記が更新されます。必要なものの横にある コピー をクリックします。
3. スタイルガイドで HEX を大文字で書く場合は HEX を大文字に をオンにします。
4. 文字色として使う前にコントラストの行を確認します。緑のバッジは WCAG AA を満たしていることを示します。

例

#1e90ff は CSS カラー dodgerblue です。変換結果は次のとおりです：

• RGB: rgb(30, 144, 255)
• HSL: hsl(210, 100%, 55.9%)
• HSV: hsv(210, 88.2%, 100%)
• CMYK: cmyk(88%, 44%, 0%, 0%)

白背景とのコントラストは 3.24:1 で、大きな見出しには十分ですが本文には足りません。

カラーモデルの概要

• HEX と RGB は、画面が発する赤・緑・青の光の量を表します。ブラウザやデザインツールが内部で使っている形式です。
• HSL は色相（色相環上の角度）、彩度、明度で色を表すため、同じ色の明るいバリエーションや暗いバリエーションを簡単に作れます。
• HSV（HSB とも呼ばれます）は、多くのデザインソフトのカラーピッカーで使われています。
• CMYK は印刷用のシアン・マゼンタ・イエロー・ブラックのインクを表します。

#1e90ff80 や rgb(30 144 255 / 50%) のような透明度を持つ色は、HEX、RGB、HSL でアルファチャンネル付きで表示されます。