1
任意のフォーマットで入力
HEX、RGB、HSL、HSV、CMYKのいずれか
2
5つのフォーマットを確認
すべてがリアルタイムで更新
3
コピーして使用
CSS、デザイン、印刷用にコピー
5つのフォーマット — HEX、RGB、HSL、HSV、CMYK — どこを編集してもすべてがリアルタイム更新
HEX、RGB、HSL、HSV、CMYKのいずれか
すべてがリアルタイムで更新
CSS、デザイン、印刷用にコピー
| フォーマット | 例 | 使用場面 |
|---|---|---|
| HEX | #3B82F6 | CSS、HTML、Webデザイン — 最も一般的なWebカラーフォーマット |
| RGB | rgb(59, 130, 246) | 画面、ディスプレイ、デジタルデザイン — 加色法（光） |
| HSL | hsl(217, 91%, 60%) | CSS、デザインシステム — 色相ベースの直感的な色操作 |
| HSV | hsv(217, 76%, 96%) | カラーピッカー、画像編集（GIMP、Photoshop） — アーティスト向けモデル |
| CMYK | cmyk(76, 47, 0, 4) | 印刷、出版 — 減色法（紙の上のインク） |
RGBは加色法です：黒（光なし）から始めて、赤・緑・青の光を加えて色を作ります。最大強度ではR+G+B=白になります。画面、スマートフォン、プロジェクターはすべてRGBを使用します。CMYKは減色法です：白い紙から始めて、シアン、マゼンタ、イエロー、ブラックのインクを重ねて光を減算します。理論上はC+M+Yで黒になるはずですが、実際には濁った茶色になるため、別途K（キー/ブラック）インクが必要です。RGBの方が色域が広いため、多くの鮮やかな画面色（ネオングリーン、エレクトリックブルー）はCMYKインクでは物理的に再現できません。画面と印刷の両方でデザインする場合は、必ずCMYKプレビューを確認して、印刷時の予期せぬ色の変化を避けましょう。
HSL（色相、彩度、輝度）はCSSネイティブのカラーモデルです。純粋で鮮やかな色はL=50%に位置します。L=0%は黒、L=100%は白です。そのためHSLは、ティント（白を加える：Lを増加）、シェード（黒を加える：Lを減少）、トーン（Sを減少）の生成に最適です。HSV（色相、彩度、明度）はアーティスト向けモデルで、PhotoshopやGIMPのカラーピッカーで使用されています。純色はV=100%に位置します。V=0%は黒です。HSVの彩度は絵の具の混色に近い動作をします — 白を加えるとHSVでは彩度が下がりますが、HSLでは輝度のみが変化します。どちらが「正しい」というわけではなく、目的に応じた異なるツールです。
HEXフィールドにHEXコード（例：#3B82F6）を入力してください。RGBが即座に更新されます：rgb(59, 130, 246)。HEXの各2桁が1チャンネルに対応します：3B=59（R）、82=130（G）、F6=246（B）。
RGB値を入力すると、HSLが自動的に更新されます。HSLはより直感的です：色相（0〜360°）= カラーホイール上の位置、彩度（0〜100%）= 強度、輝度（0〜100%）= 明るさ。純色はL=50%です。
RGB = 加色法の光（画面用）。CMYK = 減色法のインク（印刷用）。RGBの方が色域が広いため、鮮やかな画面色は印刷で正確に再現できません。このコンバーターは理論上のCMYK相当値を表示しますが、実際の印刷結果はプリンター/用紙/インクプロファイルによって異なります。
どちらも色相と彩度を使用しますが、明るさの扱いが異なります：HSLの輝度は黒→純色→白（純色は50%）の範囲です。HSVの明度は黒→純色（純色は100%）の範囲です。HSVはカラーピッカー（GIMP/Photoshop）で使用され、HSLはCSSでのティントやシェードの生成に適しています。
カラープレビュースウォッチをクリックすると、ブラウザ標準のカラーピッカーが開きます。視覚的に任意の色を選択すると、5つのフォーマットがすべて即座に更新されます。「ランダムカラー」をクリックして色の組み合わせを探索することもできます。