カラーコード変換

カラーコード変換について

カラーコード変換ツールは、色をWebで一般的な3つの形式、HEX (#FF8800)、RGB (rgb(255, 136, 0))、HSL (hsl(32, 100%, 50%)) に変換します。どれかの形式でコードを入力するか色を選ぶだけで、CSSやデザインツール、コードにそのまま使える形式をコピーできます。

コントラストのチェックもできます。文字色と背景色を入力すると、WCAGのコントラスト比と、通常テキストと大きいテキストがAAレベル・AAAレベルに合格するかどうかがわかり、誰にとっても読みやすい文字色を選べます。

処理はすべてブラウザ内で行われ、入力した内容がどこかに送られることはありません。

使い方

1. #777、rgb(0 128 255)、hsl(120, 50%, 50%) のようなカラーコードを入力するか、カラーピッカーを使います。
2. プレビューの横に、その色がHEX、RGB、HSLで表示されます。
3. 使いたい形式の横にある「コピー」を押します。
4. コントラストを確認するには、文字色（空欄なら上の色を使用）と背景色を入力します。
5. コントラスト比と、通常テキスト・大きいテキストそれぞれのAA・AAAの結果を確認します。

主な機能

• HEX・RGB・HSLに対応: 短い形式と長い形式のHEX、カンマ区切りまたはスペース区切りのrgb()とhsl()、数字3つだけの入力を読み取れます。
• カラーピッカー: 見た目で色を選ぶと、すぐにそのコードが表示されます。
• コントラスト比: 2色のWCAG 2コントラスト比を、1:1から21:1の範囲で求めます。
• AAとAAAの判定: 両方のレベルについて、通常テキストと大きいテキストの合格・不合格を表示します。
• わかりやすいエラー: 赤の値が255を超えているなど、コードのどの部分が間違っているかを示します。

使用例

制限事項と注意点

• #FF000080やrgba()のような、透明度（アルファ）付きの色には対応していません。
• 色名（red、blue）、CMYK、LABなどの色空間は変換できません。
• HSLの値は整数に丸められるため、元に戻すとチャンネルの値が数段階ずれることがあります。
• コントラストチェックはWCAG 2.xに基づいています。フォントの太さや大きさ、色覚特性までは判定しません。

よくある質問