カラーピッカー/変換ツール
色を選択し、異なるフォーマット間で変換
代替マッチ：
テキストの外観をプレビュー
The quick brown fox jumps over the lazy dog
color: #6366f1; background-color: #6366f1; border-color: #6366f1;
カラーモデルについて
色はデジタルデザインの基礎であり、用途によって異なるカラーモデルが必要です。このツールはこれらのモデルの橋渡しをし、デザイナーや開発者に正確な変換と便利な機能を提供します。
異なるカラーモデルを理解することは、Web開発、UIデザイン、デジタルアート制作に不可欠です。
対応フォーマットと機能
#RRGGBB
0-255, 0-255, 0-255
0°-360°, 0-100%, 0-100%
0°-360°, 0-100%, 0-100%
0-100%, ×4
16-235, 16-240, 16-240
L*: 0-100, a*/b*: -128 to +127
カラーフォーマットの詳細
HEX（16進数）
HEXカラーは#で始まる6桁の16進表記を使用します。各ペアは赤、緑、青の値（00-FF）を表します。短縮表記（#RGB）は#RRGGBBに展開されます。アルファ透明度用の8桁形式（#RRGGBBAA）もサポートしています。
用途: CSS、HTML、Webデザイン、ほとんどのプログラミング言語
RGB（赤、緑、青）
RGBモデルは赤、緑、青の光を組み合わせて色を作る加法混色モデルです。このモデルは画面が光を発する方法に直接対応しており、デジタルディスプレイのネイティブ色空間となっています。
用途: 画面表示、LED照明、CSS、デジタル画像処理
HSL（色相、彩度、明度）
HSLは人間の知覚に基づいて色を表現します。色相は色相環上の角度、彩度は色の強度、明度は色の明るさです。これにより色の操作がより直感的になります。
用途: CSS、配色スキーム生成、直感的なカラーピッキング
HSV/HSB（色相、彩度、明度）
HSV（HSBとも呼ばれる）はHSLに似ていますが、明度の代わりに値を使用します。値は明るさを表し、100%が最も明るいです。このモデルはアーティストの色に対する考え方に合っているため、多くのグラフィックスアプリケーションで好まれています。
用途: Photoshop、GIMP、グラフィックスソフトウェアのカラーピッカー
CMYK（シアン、マゼンタ、イエロー、キー/ブラック）
CMYKは印刷に使用される減法混色モデルです。光を加えるRGBとは異なり、CMYKは白い紙から光を減じます。「K」はキー（黒）の略で、印刷品質を向上させインク使用量を削減します。
用途: 印刷デザイン、商業印刷、パッケージング
YCbCr（輝度、色差）
YCbCrは輝度（Y）と色差（Cb、Cr）成分を分離します。人間の目は色よりも明るさに敏感なため、この分離により効率的な動画圧縮が可能になります。JPEG、MPEG、放送規格で一般的に使用されています。
用途: JPEG圧縮、動画エンコード（H.264、HEVC）、テレビ放送
Lab（CIE L*a*b*）
Labは人間の視覚を近似するように設計された知覚的に均一な色空間です。L*は明度、a*は緑-赤軸、b*は青-黄軸を表します。1単位の知覚距離は色に関係なくほぼ同じに見えます。
用途: 色彩科学、色差計算（Delta E）、プロフェッショナルなカラーマネジメント
Pantone（パントン）
Pantone Matching System（PMS）は、印刷、ファッション、製品デザインで広く使用される独自のカラー標準化システムです。各色には固有のコードがあり、異なる素材やメーカー間での一貫した色再現を保証します。
用途: ブランドアイデンティティ、商業印刷、パッケージデザイン、テキスタイル業界
注意：これらはデジタル近似値です。実際のPantone色は印刷時に異なる場合があります。
色彩理論の基礎
色は異なる目的に最適化された異なる「空間」に存在します。加法モデル（RGB）は光を加えることで機能し、減法モデル（CMYK）は光を吸収することで機能します。知覚モデル（Lab）は人間の視覚に合わせています。
加法混色モデル
RGBは赤、緑、青の光を組み合わせます。3つすべてを最大強度で加えると白になります。これは画面、プロジェクター、デジタルディスプレイの仕組みです。
減法混色モデル
CMYKは白から光の波長を吸収（減算）します。すべての色を組み合わせると（理論上）黒になります。これはインクや塗料の仕組みです。
知覚色モデル
Labや類似の空間は人間の知覚を中心に設計されており、色の比較や補正に理想的です。
変換に関する注意
- RGB ↔ HEX: ロスレス変換、フォーマット変更のみ
- RGB ↔ HSL/HSV: 色域内ではロスレス、精度が失われる場合あり
- RGB ↔ CMYK: 印刷色域外の色が失われる場合あり
- RGB ↔ Lab: D65光源を使用、sRGB色空間を想定
- RGB ↔ YCbCr: デフォルトでBT.601規格を使用
WCAGコントラスト基準
Webコンテンツアクセシビリティガイドライン（WCAG）は、視覚障害のある人を含むすべてのユーザーがコンテンツを読めるように、テキストと背景の間の最小コントラスト要件を定義しています。
一般的な使用ケース
よくある質問
HEX、RGB、HSL の違いは何ですか？
HEX は 6 桁の十六進表記（例：#FF5733）で、RGB の各チャンネルをわかりやすく一行で表します。RGB は各チャンネルを 0～255 の十進整数で表し，コード内で操作しやすい形式です。HSL（色相・彩度・明度）は色相角、鮮やかさ、明るさを分離して表現するため、基本色の色屏や色調を変える際に RGB 値を推測する必要がなく直感的です。いずれも相互変換可能です。
RGBA・HSLA のアルファチャンネル（A）は何を意味するのですか？
アルファチャンネルは色の不透明度を制御します。RGBA・HSLA の A 値は 0（完全透明）から 1（完全不透明）の範囲で、CSS ではパーセント表記も使えます。例えば rgba(255, 0, 0, 0.5) は 50% 透明の赤色で、下のコンテンツが透けて見えます。アルファはオーバーレイ、シャドウ、ホバー効果などに広く使われます。標準 HEX にはアルファがないため、不透明度を使う場合は 8 桁 HEX（例：#FF573380）を使用します。
HSL と HSV（HSB）の違いは何ですか？
HSL と HSV（または HSB：色相・彩度・輝度）はどちらも色相角を使用しますが、第三軽の定義が小異なります。HSL では、明度 50%・彩度最大の場合が純粋な色、0%が黒、100%が白です。HSV では、輝度 100%・彩度最大の場合が純粋な色、輝度 0%は彩度に関わらず黑となります。HSV は Photoshop など画像編集ソフトで多く使用され、HSL は CSS やウェブデザインで主流です。
CMYK と RGB の違いは何ですか？
RGB は加法混色を利用し、全チャンネル最大で白色になります。CMYK は減法混色で、全インク最大の場合はニアブラックになります。RGB はモニター・カメラ・ディスプレイの基本モデルで、CMYK は印刷業界の標準です。印刺用デザインの場合は早めに CMYK に変換してください。鮮やかな青やエレクトリックグリーンなどは印刷で値が落ちることがあります。
同じ色がデバイスによって違って見えるのはなぜですか？
ディスプレイ技術、カラープロファイル、ハードウェア調整の違いにより、色の見え方はデバイスごとに異なります。各ディスプレイには色域（表示可能な色の範囲）があり、入門レベルのモニターは sRGB の 60～72% 程度しかもたない一方、プロ用モニターは 99%sRGB や P3、AdobeRGB など広い色域をカバーします。同じ #FF5733 がデバイスによってオレンジ系や赤オレンジ系に大きく大別することもあります。色彩精度が重要な作業には、ハードウェア校正済みのモニターを使用し、ターゲット色空間を必ず指定してください。
関連ツール
画像Base64コンバーター
画像をBase64エンコードに変換、PNG、JPG、GIF、SVG、WebP形式対応、Data URIとCSSバックグラウンド生成
CSS圧縮・整形ツール
CSSコードを圧縮または整形、空白とコメントを削除してファイルサイズを最適化、または可読性向上のためにコードをフォーマット
カラーパレットジェネレーター
カラーミキシング、グラデーション作成、配色スキーム生成、CSS/SCSS/JSON形式へのエクスポートが可能なプロフェッショナルなカラーパレット生成ツール
HTMLエンコーダー/デコーダー
特殊文字をHTML実体に変換、名前付き・10進数・16進数形式をサポート、XSS攻撃を防止
Base64エンコーダ/デコーダ
テキストやファイルの変換をサポートし、Base64文字列を素早くエンコード/デコード
URLエンコーダ/デコーダ
コンプライアンスと使いやすさを確保するためのURLエンコード/デコード