HEX・RGB・HSLのカラーコードを変換して配色を確認する方法

このガイドが役立つ場面

HEXからRGB、RGBからHSLへのカラーコード変換、Web配色、補色、文字色のコントラスト比を確認したい利用者が、一連の手順を確認できます。

• CSS用のHEXとRGB値を相互変換する
• ボタン文字と背景色のコントラストを確認する
• 基準色から補色や類似色のパレットを作る

確認できる色の情報

• HEX、RGB、HSL、HSVの相互変換
• 前景色と背景色のコントラスト比
• 補色・類似色などの配色候補
• 一時パレットとCSS変数用の値

カラーコードを決める手順

1. カラーピッカーまたは数値で基準色を選びます。
2. 必要な形式のカラーコードをコピーします。
3. 文字色と背景色を指定してコントラストを確認します。
4. 配色候補を実際のUIへ当てて最終確認します。

アクセシビリティの注意

コントラスト比が基準を満たしても、文字サイズ、太さ、ディスプレイ、色覚特性によって読みやすさは変わります。実際の画面でも確認してください。

色だけで状態を伝えず、ラベル、アイコン、下線など別の手掛かりも併用してください。

具体例：青いボタンの文字色を決める

基準の青色を選び、白文字と黒文字それぞれのコントラスト比を比較します。

通常、ホバー、無効状態の色をパレットへ追加し、状態間の違いも確認します。

1. 背景の青色を入力します。
2. 前景色を白にしてコントラストを確認します。
3. 黒文字とも比較します。
4. 採用色をパレットへ追加してコードをコピーします。

小さい文字ほど高いコントラストが必要です。実際のフォントサイズで確認してください。

よくある質問

HEXとRGBで色は変わりますか？

同じ色を別形式で表しているだけなら見た目は変わりません。丸めによって末尾に小さな差が出る場合があります。

コントラスト比だけで読みやすさを判断できますか？

重要な指標ですが、文字サイズ、太さ、表示環境も含めて確認してください。