カラーコード変換とは？
デザインツールではHEX、CSSではRGBやHSL、印刷ではCMYKと、場面によって使うカラーコードは異なります。このツールではどの欄に入力しても他の形式がすぐに切り替わり、透明度（アルファ）を含むCSSコードもコピーできます。
さらに文字色と背景色のコントラスト比を計算し、Webコンテンツ・アクセシビリティ・ガイドライン（WCAG 2.1）およびそれと一致するJIS X 8341-3の基準を満たすかをAA・AAAのバッジで表示します。
使い方
- 左上の大きな色の四角をタップして色を選ぶか、HEX・RGB・HSL・HSV・CMYKのいずれかの欄にコードを入力します。
- 透明度のスライダーを動かすと、アルファ値を含む8桁のHEXとrgba・hslaのコードが作られます。
- コントラスト比で白背景・黒背景・任意の色とのコントラスト比と合否を確認します。
- 明るく・暗くのパレットの色をタップするとHEXコードがコピーされ、一番下ではCSSコードをまとめてコピーできます。
カラーコードの形式
| 形式 | 例 | 説明 |
|---|---|---|
| HEX | #4f46e5 | 赤・緑・青を16進数2桁ずつで表記。8桁なら最後の2桁が透明度 |
| RGB | rgb(79, 70, 229) | 各チャンネル0〜255 |
| HSL | hsl(243, 75%, 59%) | 色相（0〜360°）・彩度・輝度。色の調整が直感的 |
| HSV (HSB) | hsv(243, 69%, 90%) | PhotoshopやFigmaのカラーピッカーの方式 |
| CMYK | cmyk(66%, 69%, 0%, 10%) | 印刷用インクの割合 |
コントラスト比の基準（WCAG 2.1 / JIS X 8341-3）
| レベル | 通常の文字 | 大きな文字 |
|---|---|---|
| AA（最低基準） | 4.5:1以上 | 3:1以上 |
| AAA（より高い基準） | 7:1以上 | 4.5:1以上 |
大きな文字とは18pt（約24px）以上、または太字で14pt（約18.66px）以上の文字です。公的機関のWebサイトなどでは、本文が少なくとも4.5:1を満たす必要があります。コントラスト比は1:1（同じ色）から21:1（白と黒）までです。
よくある質問
画面の色と印刷の色が違います。
モニターは光の三原色（RGB）、印刷はインク（CMYK）で色を作るため、表現できる範囲が異なります。このツールのCMYKは簡易的な変換式の値なので、Japan Color 2011などのプロファイルを適用した値とは異なります。重要な印刷物は色校正で確認してください。
8桁のHEXコードとは何ですか？
#RRGGBBAA形式で、最後の2桁が透明度です。80は約50%、CCは80%、FFは100%（不透明）です。最新のブラウザはすべて対応しています。
透明な色のコントラスト比はどう計算しますか？
透明度があると実際に見える色が背景によって変わるため、このツールでは透明度を除いた不透明な色でコントラスト比を計算します。
色の名前で入力できますか？
HEX欄に red、navy、skyblue、tomato などCSS標準の148色の名前を入力すると、その色に変わります。