色変換とは何ですか？
ブラウザが描画するすべての色は、最終的には sRGB のトリプル — 赤、緑、青の各チャンネルに対する 0 〜 255 の 3 つの数値と、オプションのアルファ — として表現されます。CSS Color Level 4 仕様は、同じトリプルへ往復できる複数のテキスト形式と、知覚的に均一な OKLCH 空間を定義しています。このツールはそれらのいずれかを読み込み、すべての形式に変換し、もう 1 つの色に対する WCAG 2.1 コントラスト比を報告するので、安心してアクセシブルな UI を出荷できます。
色変換はどのように機能しますか？
変換は、よく定義された線形および非線形の一連の変換です。すべてのステップはブラウザ内で実行され、入力が当社のサーバーに到達することはありません:
- 入力が解析されます。ツールは 3、4、6、8 桁の HEX、関数形式の
rgb()/rgba()/hsl()/hsla()/hsv()/hwb()(レガシーのカンマ構文でも、最新のスラッシュ・アルファ構文でも)、または 150 の CSS 名前付きカラー(rebeccapurpleを含む)のいずれかを自動検出します。 - 解析された色は、正規の sRGB に正規化されます — それぞれ 0 〜 1 の範囲にある 4 つの浮動小数点数
{r, g, b, a}です。これがすべての出力形式の派生元となる単一の信頼できる情報源です。 - HEX は各チャンネルを 0 〜 255 のバイト値に丸めて 16 進数の桁を連結することで得られます。RGB / RGBA は同じバイトを出力します。HSL と HSV は標準的な W3C の円柱座標アルゴリズムを適用します。HWB は色相を HSV から、白さを
min(r, g, b)から、黒さを1 - max(r, g, b)から導出します。 - CMYK は素朴な近似です —
k = 1 - max(r, g, b)を計算し、続いて残りのチャンネルからc, m, yを求めます。画面プレビューには適していますが印刷には適しません: 本物の CMYK 出力には ICC プロファイルが必要で、このツールは意図的にそれを埋め込んでいません。 - OKLCH は css-color-4 のフォワードパスに従います: sRGB を線形化し、LMS 行列で乗算し、立方根を取り、LMS から OKLab への行列で乗算し、最後に直交座標の OKLab から極座標の OKLCH に変換します。OKLCH は知覚的に均一なので、人の目にバランスよく見えるパレットを設計するための適切な色空間です。
このカラーコンバーターを使う理由は何ですか？
- プライバシー: すべての変換は素のままの JavaScript を用いてブラウザ内で実行されます。貼り付けた色がデバイスから出ることはなく、これは未発表のブランド作業、社内デザインシステム、NDA 下のクライアントモックにとって重要です。
- デザイナーから開発者への引き渡し: Figma から HEX を貼り付けて、Tailwind 設定用の
rgb()文字列、CSS カスタムプロパティ用のhsl()文字列、あるいはモダンなパレット用のoklch()文字列を読み出せます — すべての形式が 1 か所にあり、タブ間でのコピー＆ペーストは不要です。 - WCAG の正確性: コントラストチェッカーは、WCAG 2.1 の相対輝度の正確な計算式と、通常テキストおよび大きいテキストに対して公開されている AA (4.5 / 3.0) および AAA (7.0 / 4.5) の閾値を使用します。報告される比率は手計算と 0.01 以内で一致します。
- ダークモードとパレットの派生: HSL と OKLCH は明度を単一のチャンネルとして公開しているため、ブランドカラーを明度軸上で上下にシフトして、対応するダークモードトークンを派生させたり、1 つのシードから 10 段階のパレットランプを生成したりするのが容易です。
色変換の一般的な用途は何ですか？
色変換は、ウェブ開発、デザイン、アクセシビリティ作業の至るところに登場します:
- デザインシステム: ブランドの HEX を、CSS カスタムプロパティのスケールに対応する HSL と OKLCH トークンに変換し、続いてすべてのトークンの組み合わせがページ背景に対して WCAG AA を満たすことを検証します。
- アクセシビリティ監査: 実際の製品画面から前景色と背景色のペアを貼り付け、コントラスト比と、通常ウェイトおよび大きいウェイトのテキストに対する AA/AAA の判定を一目で読み取ります。
- ツールをまたぐ往復: スクリーンショットピッカーから色を取り出し(HEX)、ここに貼り付け、
hsl()またはoklch()の文字列を Tailwind、Figma トークン、または CSS-in-JS テーマにそのままコピーします。
色変換の例はどのようなものですか？
有名な rebeccapurple を取り上げてみましょう。名前付きカラーのルックアップにより #663399 に解決されます。RGB 変換では rgb(102, 51, 153) となります。HSL 変換では hsl(270, 50%, 40%) — 紫の色相で、彩度は半分、明度は 4 割です。コントラストツールで純白に対してこの色をチェックすると、約 7.39 の比率が返り、通常テキストの AAA (7.0) と大きいテキストの AAA (4.5) をクリアします — 強くアクセシブルな前景色の選択です。#663399 を RGB → HSL → RGB → HEX と往復させると、バイト単位で元の文字列がそのまま戻ります。
このコンバーターは、コード、デザインファイル、スクリーンショットのいずれで出会った色に対してもクイックリファレンスとして、コントラストチェッカーは出荷前のサニティチェックとして使ってください。すべてはローカルで実行され、何もログには残らず、変換計算は W3C と WCAG の公開仕様に従うため、数値は監査ツールやブラウザの開発者ツールが報告するものと一致します。