色を入力
ビジュアルカラーピッカー
#プレフィックスの有無にかかわらず、6桁のHEXコードを入力してください
変換する色を入力
HEXコードを入力するか、RGBまたはHSL値を入力し、カラーピッカーを使用するか、「ランダムカラー」をクリックして開始します。すべての形式がライブで更新されます。
カラーコードチャートの使用方法
あなたの色を入力
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 値を使用してください。名前が誤解を招く可能性があるためです（たとえば、「グレー」と「グレイ」はわずかに異なります）。