カラーコード変換ツール
#RRGGBB と rgb()、hsl()、CMYKを相互に変換します。
明度のバリエーションと、文字色として使ったときのコントラスト比も同時に確認できます。
カラーコードを変換する
色を指定する
HEX・RGB・HSLは直接入力できます。#abc のような3桁指定や、
102,126,234 のような数値だけの入力にも対応しています。
明度バリエーション
色相と彩度を保ったまま明度だけを変えた10段階です。クリックするとその色に切り替わります。 ホバー・押下時の色や、背景に敷く薄い色を決めるときに使ってください。
コントラスト比
見出しの文字
本文の文字サイズだとこのくらいの見え方になります。
見出しの文字
本文の文字サイズだとこのくらいの見え方になります。
背景として使う
文字色は自動で読みやすいほうを選んでいます。
判定は WCAG 2.1 の基準です。本文なら 4.5:1 以上（AA）、 18pt以上の大きな文字なら 3:1 以上が目安になります。
カラーコードの形式と使い分け
| 形式 | 書き方 | 主な用途 |
|---|---|---|
| HEX | #667eea | CSSで最も一般的。デザインツールとのやり取りもこれが基本 |
| RGB | rgb(102, 126, 234) | 透明度を扱いたいとき。rgb(102 126 234 / 50%) のように書ける |
| HSL | hsl(229, 76%, 66%) | 色味を保ったまま明るさだけ変えたいとき。テーマカラーの設計向き |
| HSV | hsv(229, 56%, 92%) | PhotoshopやIllustratorのカラーピッカーと同じ考え方 |
| CMYK | cmyk(56%, 46%, 0%, 8%) | 印刷物向け。画面の色をそのまま再現できるわけではない点に注意 |
HSLを使うと配色の調整が楽になる
HEXは「#667eea を少し暗くしたい」と思っても、どの桁をいくつ動かせばよいか直感的に分かりません。HSLなら色相（H）・彩度（S）・明度（L）が分かれているため、Lの数値だけを下げれば色味を保ったまま暗くできます。
ボタンの通常時・ホバー時・押下時のように、同じ色の濃淡を並べて使う場面では、HSLで明度だけを10%ずつ動かすときれいにまとまります。このページの「明度バリエーション」はまさにその計算をしたものです。
コントラスト比はなぜ大事か
コントラスト比は、文字色と背景色の明るさの差を 1:1 から 21:1 の範囲で表した数値です。ウェブアクセシビリティの国際的なガイドラインであるWCAGでは、本文サイズの文字に4.5:1以上を求めています。
薄いグレーの文字は洗練されて見えますが、比率が3:1を下回ると、屋外のスマートフォンや、加齢で視力が落ちた読者にはかなり読みづらくなります。ブランドカラーをそのまま文字色に使う前に、このページで数値を確認しておくと安全です。
なお比率が足りない場合、色相を変えずに明度を下げる（暗くする）のが最も手早い解決策です。上の明度バリエーションから、基準を満たす段階を選んでください。
よくある質問
CMYKの数値をそのまま印刷会社に渡してよいですか？
参考値としてお使いください。画面のRGBと印刷のCMYKは再現できる色の範囲が異なり、正確な変換には印刷機やカラープロファイルの情報が必要です。厳密な色合わせが必要な場合は、印刷会社の指定するプロファイルで変換してください。
3桁のHEX（#abc）は使えますか？
使えます。入力欄に #abc と入れると #aabbcc として解釈します。
透明度（アルファ値）には対応していますか？
このツールは不透明な色を対象にしています。透明度を含む色を扱う場合は、重なる背景色との合成後の色で比率を確認してください。
コントラスト比の「AA」「AAA」とは何ですか？
WCAGの適合レベルです。AAは多くの企業サイトや公共サイトが目標とする水準で、本文4.5:1・大きな文字3:1。AAAはより厳しく、本文7:1・大きな文字4.5:1を求めます。まずはAAを満たすことを目標にしてください。