色コードの変換

使い方

1. 上の欄に色コードを入れるか、右の四角をクリックして色を選びます。
2. HEX・RGB・HSL の3つの書き方に変換され、「コピー」でそのまま使えます。
3. 下には、その色を背景にして白い文字・黒い文字をのせたときのコントラスト比が出ます。ボタンや帯の文字色を決めるときの目安になります。

入力できる書き方

HEX	#3D8FD6、3d8fd6、短い形の #fff
RGB	rgb(61, 143, 214)、61,143,214、61 143 214
HSL	hsl(208, 65%, 54%)

コントラスト比の見かた

コントラスト比は、文字と背景の明るさの差を表す数字で、1:1（差がない）〜21:1（黒と白）の間になります。Webのアクセシビリティの国際的な指針（WCAG 2）では、次のように決められています。

4.5:1 以上	ふつうの大きさの文字で「AA」に合格。まずはこれを目安にします。
3:1 以上	大きい文字（太字なら約19px以上、通常なら約24px以上）なら「AA」に合格。
7:1 以上	「AAA」に合格。より読みやすい基準です。

淡い色のボタンに白い文字をのせると、思ったより読みにくくなることがよくあります。色を決めるときに、この数字も見ておくと安心です。

こんなときに便利です

• デザインツールのHEXの色を、CSSのRGBやHSLで書きたいとき
• ブランドカラーの色コードを、書き方をそろえて資料にまとめたいとき
• ボタンの文字色を白にするか黒にするか迷ったとき

よくある質問

HSLは何に使うのですか？

色合い（H）・あざやかさ（S）・明るさ（L）で色を表す書き方です。明るさの数字だけを変えれば、同じ色合いの濃い色・薄い色を簡単に作れるので、配色を考えるときに便利です。

透明度（アルファ値）にも対応していますか？

rgba() や hsla() の形で入れても読み取れますが、透明度は無視して色だけを変換します。

変換結果がほかのツールと1ずれることがあります。

HSLは整数に丸めて表示しているため、HSLからHEXに戻すと1ずれることがあります。正確な色を伝えたいときは、HEXかRGBを使ってください。