HEX、RGB、HSL、HSV、CMYKを変換 — ライブプレビュー、シェード、ティント、アクセシビリティコントラスト
カラーコードはデジタルデザインの普遍的な言語です。ウェブサイトを構築する場合、デジタルアートを作成する場合、モバイルアプリをデザインする場合、またはブランドカラーを選択する場合、カラーコードを理解することは不可欠です。画面上のすべての色は、赤、緑、青の光をどれだけ放出するかを示す値の組み合わせとして数学的に定義されています — そして、すべてのプロのデザインツールはこの言語を複数の方言で話します：HEX、RGB、HSL、HSV、CMYKなど。
カラーコードとカラースペースの理解
カラーコードとは？
カラーコードは、特定の色を数値または値のセットとして表現する標準化された方法です。デジタルディスプレイは、赤、緑、青の光をさまざまな強度で混ぜて、目に見える色を作り出します — これを加法混色と呼びます。HEXコードは、これらのRGB値を16進数（ヘキサデシマル）表記で表します：#FF0000は最大の赤（FF）、緑なし（00）、青なし（00）を意味します。RGB表記は、同じ値を0から255の10進整数として表現します。HSLとHSVは、色相（色の種類）を彩度（色の豊かさ）および明度または値（明るさ）から分離し、人間が考える際により直感的です。CMYKは印刷に使用され、シアン、マゼンタ、イエロー、ブラックインクを使用した減法混色で機能します。各形式は数学的に等価であり、異なる表記法で異なる使用ケースに最適化された同じ色のセットを説明します。
カラー変換はどのように計算されるのか？
カラー形式間の変換は、正確な数学的公式を含みます。HEXからRGBへの変換は簡単です：各ペアの16進数（00-FF）は、16進数算術を使用して10進整数（0-255）に変換されます。RGBからHSLへの変換は、RGB値を0-1に正規化し、最大および最小のチャネル値を見つけ、デルタを計算し、どのチャネルが優勢かによって色相を導き、明度に対するデルタから彩度を導き、最大値と最小値の平均として明度を導きます。RGBからCMYKへの変換は、まずキー（黒）成分を最大RGB比の1から引いて特定し、次に残りのインクからC、M、Yを導きます。CMYKからRGBへの変換はこれを反転させます：各チャネルは255倍の（1からインクの割合を引いたもの）倍の（1から黒の割合を引いたもの）として計算されます。すべての変換は、表示可能な色の全範囲にわたって数学的精度を保持します。
デザインにおいてカラーコードが重要な理由は？
カラーコードの一貫した使用は、プロフェッショナルなデザイン作業の基本です。正確なカラーコードがなければ、色はデザインツール、ブラウザ、印刷環境間でシフトし、ブランドの一貫性が壊れます。ウェブデザイナーは、ブラウザやデバイス間でピクセルパーフェクトな色の一致を確保するためにHEXおよびRGBコードを使用します。印刷デザイナーは、画面とプリンターがまったく異なる色混合方法を使用するため、印刷所に正確なインク比を伝えるためにCMYK値に依存します。アクセシビリティガイドライン（WCAG）は、低視力や色盲の人々が読みやすいように、テキストと背景色の間の最小コントラスト比を要求します — コントラスト比をチェックすることは多くの組織にとって法的要件です。デザインシステムは、製品間での一貫性を維持するために正確に定義されたカラートークン（通常はHEXまたはHSL値）を使用し、HSLは色相を変更せずに色を10%明るくするなどのプログラムによる調整を可能にするため、しばしば好まれます。
カラースペースの制限と考慮事項
HEX、RGB、HSL、CMYKは、実際のデザインニーズの大部分をカバーしていますが、理解すべき重要な制限があります。RGBカラーモデルはデバイス依存であり、同じRGB値でも異なるモニターのキャリブレーション、カラープロファイル（sRGB対Display P3）、および周囲の照明の違いにより、異なる見え方をすることがあります。このツールに表示されるCMYK値は、標準的なsRGBからCMYKへの変換の近似値です。プロの印刷作業では、正確なパンソンマッチングのためにAdobe IllustratorやInDesignなどのツールを使用してカラープロファイル管理が必要です。140のCSS名付きカラーはCSS Color仕様によって定義されており、正確ですが、「最も近い名付きカラー」機能はRGB空間でのユークリッド距離を使用しており、これは知覚的な近似です。OKLCHやOKLABのような現代のカラースペース（ここには含まれていません）は、より知覚的に均一なグラデーションを提供しますが、CSS Color Level 4のブラウザサポートが必要です。
カラーコードチャートの使用方法
あなたの色を入力
HEX コードを直接入力します（例：#FF5733）HEX フィールドに、10進数の RGB 値（それぞれ 0～255）、HSL または CMYK 値を入力するか、色スウォッチをクリックしてビジュアルカラーピッカーを開きます。「ランダムカラー」をクリックして即座にインスピレーションを得ることもできます。すべての入力方法は、入力中に結果をリアルタイムで更新します。
すべての変換形式を表示
結果パネルには、HEX、RGB、HSL、HSV、CMYK、および整数形式での色が同時に表示されます。各形式にはコピー用のボタンがあり、必要なものを正確に取得できます。「すべてコピー」ボタンを使用してすべての形式を一度にコピーするか、ドキュメント用に CSV にエクスポートします。
シェード、色合いを生成し、アクセシビリティを確認
結果をスクロールダウンすると、9つのシェード（暗いバリアント）と9つの色合い（明るいバリアント）のストリップが表示されます — 任意のスウォッチをクリックしてそのバリアントをコンバータに読み込みます。WCAG コントラストセクションは、白と黒に対するコントラスト比を示し、AA/AAA 合格インジケーターであなたの色がアクセシビリティ基準を満たしていることを確認します。
名付けられた色のリファレンスを閲覧
「名付けられた色チャート」タブに切り替えて、ファミリー別に整理された全 140 の CSS 名付けられた色を探索します（赤、緑、青、紫など）。各行には、色スウォッチ、CSS 名称、HEX コード、および RGB 値が表示されます。任意の行の「色を使用」をクリックして、即座にコンバータに読み込みます。
よくある質問
HEX と RGB カラーコードの違いは何ですか？
HEX と RGB は異なる表記システムを使用して、まったく同じ色を正確に説明します。RGB は赤、緑、青のチャネルを 0 から 255 の 3 つの 10 進整数に分けます。たとえば、rgb(59, 130, 246) は中程度の青です。HEX はこれらの 3 つの値を 16 進数（基数 16）で表します：59 は 3B、130 は 82、246 は F6 になり、#3B82F6 になります。HEX はよりコンパクトで、HTML および CSS の標準形式です。RGB は数学的に読みやすく、CSS やグラフィックデザインソフトウェアでも使用されます。どちらも同等であり、一方の形式で表現できる色は、もう一方の形式でも表現できます。
なぜ HSL は HEX や RGB よりもデザイン調整に適しているのですか？
HSL（色相、彩度、明度）は、純粋な色のアイデンティティ（色相、0～360度）をその鮮やかさ（彩度）や明るさや暗さ（明度）から分離します。これにより、デザイン作業にとってはるかに直感的になります。たとえば、色を 20% 明るくするには、単に L 値を 20 増やすだけです — HEX や RGB では、同じ操作を行うにはすべての 3 つのチャネルを別々に計算する必要があります。HSL はまた、人間が色を自然に説明する方法でもあります：「明るい中程度の青」は、高彩度と中程度の明度を持つ青色の色相に直接マッピングされます。CSS は hsl() 表記をネイティブにサポートしており、Figma のようなデザインツールは内部で HSL に似たモデルを使用しています。この理由から、多くのデザインシステムは HSL で色トークンを定義しています。
CMYK とは何ですか、いつ使用すべきですか？
CMYK はシアン、マゼンタ、イエロー、キー（黒）を表し、カラー印刷に使用される 4 つのインクの色です。RGB とは異なり、RGB は光を加算する（加法混合）一方、CMYK は特定の波長を吸収するインクを重ねることで光を減算します（減法混合）。これが、画面上で鮮やかに見える色が印刷時に鈍く見える理由です — RGB ガマット（表示可能な色の範囲）は、CMYK 印刷が再現できるものよりも広いです。名刺、パンフレット、ポスター、パッケージなどのプロフェッショナルな印刷用ファイルを準備する際には CMYK 値を使用します。ほとんどのプロの印刷所やデザインソフトウェア（Adobe Illustrator、InDesign）は、印刷プロジェクトのために CMYK で作業します。ウェブやスクリーンデザインでは、HEX または RGB に留めておきます。
WCAG コントラスト比とは何で、なぜ重要ですか？
WCAG（ウェブコンテンツアクセシビリティガイドライン）コントラスト比は、低視力や色盲の人にとって前景色と背景色がどれだけ異なって見えるかを測定します。これは相対的な輝度を使用して計算されます — 知覚された明るさの測定値です。1:1 の比率はコントラストなし（同じ色）を意味し、21:1 は最大コントラスト（白地に黒）です。WCAG AA 基準は、通常のテキストに対して 4.5:1、大きなテキストに対して 3:1 を必要とします。WCAG AAA は 7:1 を必要とします。これらの基準を満たすことで、視覚障害のあるユーザーにとってウェブサイトが読みやすくなり、ADA（障害者法）および WCAG 2.1/2.2 基準に対する法的遵守がしばしば求められます。このツールは、入力した任意の色に対して白と黒の両方に対するコントラスト比を自動的に計算します。
シェードと色合いはどのように生成されますか？
シェードは、色を黒と混ぜることで作成されます — 数学的には、各 RGB チャネルを 1 未満の係数で乗算します。たとえば、赤の 50% シェード（255, 0, 0）は (128, 0, 0) になります。色合いは白と混ぜることで作成されます — 元のチャネル値を 255 に向かってブレンドします。赤の 50% 色合いは (255, 128, 128) になります。このツールは、9 つの均等に間隔を空けたシェード（ほぼ黒から元の色まで）と 9 つの均等に間隔を空けた色合い（元の色からほぼ白まで）を生成し、合計 19 のバリアントを提供します。これらのストリップは、デザインシステムのパレットを構築するのに非常に役立ちます — たとえば、Tailwind CSS は、22 の色ファミリーごとに 50（最も明るい）から 950（最も暗い）までの 10 シェードスケールを使用しています。
140 の CSS 名付けられた色とは何ですか？
140 の CSS 名付けられた色は、CSS カラー仕様（CSS Colors Level 4）で定義された色キーワードのセットです。これには、「赤」、「青」、「緑」などのクラシックなウェブカラーや、「コーンフラワーブルー」、「ラベンダーブラッシュ」、「パパイヤホイップ」などの説明的な名前が含まれます。各名前は、すべてのブラウザとオペレーティングシステムで一貫した特定の HEX/RGB 値にマッピングされます。これらは、Unix 環境で使用される X11 カラーシステムに由来し、その後 CSS 用に標準化されました。一般的な色には便利ですが、名付けられた色は 24 ビット RGB で表現可能な 1,670 万色のほんの一部しかカバーしていません。正確なデザイン作業には、名付けられた色に頼るのではなく、常に HEX または RGB 値を使用してください。名前が誤解を招く可能性があるためです（たとえば、「グレー」と「グレイ」はわずかに異なります）。