カラーコード変換

HEX・RGB・HSL のカラーコードを相互に変換します。#3498db のようなHEX値を入れると、対応する rgb() と hsl() の表記、そして実際の色見本が同時に表示されます。デザインツールとCSSの間で色の指定形式が違うときの受け渡しに使えます。

使い方

1. 上の欄にHEXカラーコードを入力します（例: #3498db）。3桁の短縮形も使えます。
2. RGB と HSL の値、色見本がその場で更新されます。
3. 必要な形式の値をコピーして、CSS やデザインツールに貼り付けます。
4. 別の色に変えれば、そのまま続けて変換できます。

こんなときに

• デザインカンプで指定されたHEX値を、CSSの rgba() で透明度付きにしたいとき。
• 同じ色相のまま明度だけを変えた色違いを作りたいとき。HSL に直すと調整が一度で済みます。
• ブランドカラーの指定がRGBで渡されて、HEXに直す必要があるとき。
• スクリーンショットから拾った色をコードに落とし込みたいとき。

HEX・RGB・HSL の関係

HEXとRGBは同じ情報を別の書き方にしただけで、#3498db は 16進の 34・98・db をそれぞれ10進に直した rgb(52, 152, 219) と完全に等価です。往復しても値は変わりません。一方HSLは色相・彩度・明度という人間が感覚的に扱いやすい軸に組み替えたもので、変換のたびに小数の丸めが入るため、HSLを経由して戻すと元のHEXから1程度ずれることがあります。色を「少しだけ暗く」「同系色で並べる」といった調整をするならHSLが便利ですが、最終的な指定値はHEXかRGBで固定しておくのが安全です。

関連ツール

よくある質問

カラーコード変換はどのカラー形式に対応していますか?

HEX は 3 桁・6 桁・8 桁の各形式、そして RGB と RGBA、HSL と HSLA に対応しています。共通の内部表現を経て変換するため、形式を行き来しても値がずれません。

アクセシビリティ基準を満たすにはどのくらいのコントラスト比が必要ですか?

WCAG 2.1 の AA 等級は本文テキストに 4.5 対 1、大きいテキストに 3 対 1 を求めます。大きいテキストとは太字 18.66 ピクセルまたは通常 24 ピクセル以上を指します。AAA 等級ではそれぞれ 7 対 1 と 4.5 対 1 に上がります。

出力をそのまま CSS に貼り付けられますか?

はい。生成される値は正しい CSS の色指定なので、スタイルシートやデザイントークンのファイル、コンポーネントのインラインスタイルに手を加えずそのまま貼り付けられます。