この記事に関連するツール
ブラウザ上ですぐに試せます。記事の内容を確認しながら使うと、作業の流れをつかみやすくなります。
色指定は、ツールや文脈で形式が変わる
デザインツールではHEX、CSSではRGBやHSL、アクセシビリティ確認ではコントラスト比。色を扱う作業では、同じ色でも複数の表記を行き来することがあります。
DevToolKitsの カラー変換・コントラストチェックツール を使うと、HEX、RGB、HSLの変換と、前景色・背景色のコントラスト確認をブラウザ上で行えます。
実例：ボタンの文字色を確認する
たとえば、ブランドカラーとして #2563eb をボタン背景に使い、文字色を白にしたいとします。
.primary-button {
background: #2563eb;
color: #ffffff;
}カラー変換・コントラストチェックツールに前景色 #ffffff、背景色 #2563eb を入れると、実装前にコントラスト比を確認できます。十分に読める場合はそのまま使い、低い場合は背景を濃くする、文字色を変える、ボタンサイズや太さを見直すといった判断ができます。
同じ青でも #60a5fa のように明るくすると、白文字では読みづらくなることがあります。見た目の印象だけで決めず、数値で確認してからCSSに落とし込むのが安全です。
UI実装で確認したいこと
ボタン、リンク、ラベル、アラートなどは、色の印象だけでなく読みやすさも大切です。背景色と文字色のコントラストが低いと、明るい画面やモバイル環境で読みにくくなります。
実装前に色の組み合わせを確認しておくと、レビュー後の手戻りを減らせます。ブランドカラーをファビコンやアイコンにも反映する場合は、Favicon生成ツール とあわせて使うと素材確認がしやすくなります。
HSLで調整すると扱いやすい
色の明るさや彩度を少しだけ変えたい場合、HSLは直感的に扱いやすい形式です。HEXで受け取った色をHSLに変換し、明度を少し上げ下げしてからCSSに戻すと、hover状態や薄い背景色を作りやすくなります。
.primary-button:hover {
background: hsl(221 83% 45%);
}
.primary-button-subtle {
background: hsl(221 83% 96%);
color: hsl(221 83% 32%);
}hover用に少し暗くする、淡い背景用に明度を上げる、文字色だけ濃くする、といった調整はHSLにしておくと意図を説明しやすくなります。レビューでは「ブランドカラーから派生した色か」「コントラストが落ちていないか」をセットで確認します。
デザインアセット全体の確認にも使う
サイトの見た目を整えるときは、色だけでなく、差分確認やファビコン生成も同じ流れで扱うと手戻りを減らせます。たとえば、ブランドカラーを変えたときは、ボタンのコントラスト、CSS差分、faviconの見え方をまとめて確認します。
1. カラー変換でHEX/RGB/HSLとコントラストを確認
2. CSS差分をDiffで確認
3. ロゴ画像からfavicon一式を生成
4. 明るい背景と暗い背景で小さいサイズを確認色の調整だけで終わらせず、実際にブラウザタブやスマートフォンのホーム画面でどう見えるかまで確認すると、デザインと実装のズレが少なくなります。
まとめ
色は見た目の印象だけでなく、読みやすさと操作性にも関わります。HEX、RGB、HSLの変換とコントラスト確認をセットで行うことで、デザインと実装の間のズレを減らせます。
よくある質問
コントラスト比はどれくらい必要ですか？
WCAG（アクセシビリティ指針）では、通常サイズの文字で背景とのコントラスト比 4.5:1 以上、大きな文字（18pt相当以上、または太字14pt以上）で 3:1 以上が推奨されています。ボタンやリンクなど操作要素も読みやすさが重要なので、実装前にカラー変換・コントラストチェックツールで数値を確認しておくと安全です。
HEX・RGB・HSLはどう使い分けますか？
HEX（#2563eb）はデザインツールやコードで簡潔に書けて定番です。RGBは透明度（rgba）を扱いたいときに便利です。HSLは色相・彩度・明度を直感的に調整でき、hover用に少し暗くする・淡い背景を作るといった「同系統の色のバリエーション」を作るのに向いています。用途に応じて変換して使い分けます。
同じ色なのに表記で見え方が変わりますか？
色そのものは同じですが、HSLにすると「明度を5%下げる」のような調整が直感的になります。見た目の印象だけで決めず、コントラスト比という数値で読みやすさを担保するのがポイントです。