カラーコードを、ブラウザの中だけで変換する

このツールについて

カラーコード変換ツールは、HEX・RGB・HSLの3つの表記を相互に変換し、あわせてシェード・ティント（明暗のバリエーション）、補色・類似色のパレット、WCAGに基づくコントラスト比の判定を行うツールです。

デザインやコーディングの際に、指定されたカラーコードを別の表記に変換したいときや、配色のバリエーションを素早く確認したいときに使えます。

使い方

1. 「色を選択」のカラーピッカー、またはHEX・RGB・HSLのいずれかの入力欄に色を入力する（他の表記は自動で同期します）。
2. 上部のプレビューで実際の色とHEXコードを確認する。
3. 「シェード・ティント」「補色・類似色」で自動生成されたパレットを確認し、「コピー」で各色のHEXコードをコピーする。
4. 「コントラスト比」で、選んだ色と白・黒を組み合わせたときのWCAG基準（AA・AAA）の合否を確認する。

よくある質問

Q. HEX・RGB・HSLはどんな形式で入力すればいいですか？

A. HEXは「#3498db」、RGBは「52, 152, 219」、HSLは「204, 70%, 53%」のようにカンマ区切りで入力します。形式が正しくない場合はフィールドの下にエラーメッセージが表示されます。

Q. コントラスト比の「AA」「AAA」とは何ですか？

A. WCAG 2.1が定めるアクセシビリティ基準で、通常のテキストではAAは4.5:1以上、AAAは7:1以上のコントラスト比が目安とされています。

Q. シェード・ティントはどうやって作られていますか？

A. 選んだ色のHSL表現の明度（L）を5段階ずつ下げる（シェード）・上げる（ティント）ことで生成しています。

Q. 入力した色はサーバーに送信されますか？

A. いいえ。すべての変換・パレット生成・コントラスト判定はブラウザ内のJavaScriptだけで計算されます。

仕組み（技術メモ）

HEX・RGB・HSLの相互変換や補色・シェード計算は、色相・彩度・明度を扱う標準的な数式を自前で実装したものです。コントラスト比はWCAG 2.1が定める相対輝度の計算式（sRGBのガンマ補正込み）に基づいて算出しています。外部の色処理ライブラリは使用しておらず、計算はすべて端末内で完結します。