🖍️ カラーコード変換（HEX⇄RGB⇄HSL⇄CMYK）
カラーコードを入力
HEX（6桁） として読み取りました
入力例:
プレビュー
変換結果
#4a90d9
#4a90d9ff
#RRGGBBAA。Internet Explorer では読めません
rgb(74, 144, 217)
rgba(74, 144, 217, 1)
hsl(211, 65.3%, 57.1%)
hsla(211, 65.3%, 57.1%, 1)
hsv(211, 65.9%, 85.1%)
PhotoshopやFigmaのカラーピッカーで使われる表記
cmyk(66%, 34%, 0%, 15%)
印刷用の目安。実際の色は用紙とプロファイルで変わります
この色に一致するCSSの色名はありません。いちばん近いのはcornflowerblue（#6495ed）です。
白・黒に対するコントラスト比
| 組み合わせ | コントラスト比 | WCAG判定 |
|---|---|---|
| 白（#ffffff）と組み合わせる | 3.34 : 1 | 大きな文字のみAA |
| 黒（#000000）と組み合わせる | 6.28 : 1 | AA（本文に使える） |
WCAG 2.2 では、本文サイズの文字に 4.5:1 以上（AA）、より厳しいAAAでは 7:1 以上を求めています。 18pt以上（または14pt以上の太字）の大きな文字は 3:1 以上で足ります。
CSSの色名から選ぶ
クリックすると、その色を読み込みます。
カラーコードの表記の違い
HEX（16進数）：#RRGGBB の形で、赤・緑・青の強さを0〜255（16進数で00〜FF）で表します。3桁の #f00 は各桁を2回繰り返した #ff0000 の省略形です。末尾に2桁足した8桁（#RRGGBBAA）で透明度も表せます。
RGB：HEXと同じ情報を10進数で書いたものです。中身は変わらないので、HEXとRGBの間では色が一切変化しません。
HSL：色相（Hue・0〜360度）、彩度（Saturation）、明度（Lightness）で表します。明るさだけ変えたい、同じ色相で濃淡を作りたいといった調整がしやすく、CSSの設計で好まれます。L=50% が最も鮮やかで、100%で白、0%で黒になります。
HSV（HSB）：色相・彩度・明度（Value / Brightness）で表します。HSLと名前は似ていますが計算式が違い、HSVは V=100% が最も鮮やかです。PhotoshopやFigmaのカラーピッカーはこちらを使っています。
CMYK：シアン・マゼンタ・イエロー・キー（黒）のインクの量で表す、印刷用の表記です。光を混ぜるRGBと、インクを重ねるCMYKでは表現できる色の範囲が違うため、画面で見える鮮やかな色は印刷でそのまま出ないことがあります。
CSSの色名：red や tomato のように、ブラウザが解釈できる148個の決まった名前です。手早く書ける反面、色を微調整できないため、実際のデザインではHEXやHSLを使うことが多くなります。
※ 入力内容はすべてブラウザ内で処理しており、弊社サーバーへ送信・保存することは一切ありません。
※ CMYKへの変換は計算式どおりの単純変換です。実際の印刷ではカラープロファイルによって結果が変わるため、目安としてお使いください。
※ HSL・HSV・CMYKは小数を含むため、変換を往復するとHEXが1だけずれることがあります。
HEX・RGB・HSL・HSV（HSB）・CMYK・CSSの色名を、まとめて相互変換します。どの表記で貼り付けても自動で判別するので、形式を選ぶ必要はありません。