Color Picker

Color Picker Webは、2026年において最高の無料オンラインカラーピッカーです。HEX、RGB、HSL、CMYK、HSB、LAB、XYZ、HWBなどを含む20以上のカラーフォーマットに対応しています。ライブカラーホイール、WCAGコントラストチェッカー、色覚シミュレーター、パレットジェネレーター、画像カラーピッカー、6種類のハーモニータイプが含まれており、すべて完全に無料でサインアップ不要です。

画像からHEXカラ―コードを見つけるには、Color Picker WebのImage Color Pickerを使用してください。任意の写真をアップロードし、サンプリングしたい部分にカーソルを合わせてクリックすると、任意のピクセルから正確なHEX、RGB、HSLコードを抽出できます。また、画像からワンクリックでフルカラーパレットを自動生成することもできます。

カラーピッカーツールは、色を選択、変換、分析することができます。複数の形式（HEX、RGB、HSL、CMYK）で色の値を表示し、補色パレットを生成し、WCAGアクセシビリティのコントラスト比を確認し、色覚障害をシミュレートし、アップロードした画像から色を抽出します。ウェブデザイナー、開発者、ブランドデザイナーにとって不可欠です。

HEXをRGBに変換するには、上の変換ツールを使用してください。任意のHEXコード（例：#9333ea）を入力すると、瞬時にRGB出力（147, 51, 234）が表示されます。手動で行う場合：HEXを3つのペアに分けます（93, 33, ea）、それぞれを16進数から10進数に変換します。R=147、G=51、B=234。Color Picker Webは、これを20以上の形式すべてに対して瞬時に行います。

WCAG 2.2によると、通常のテキストの最小カラ―コントラスト比は4.5:1（レベルAA）および7:1（レベルAAA）です。大きなテキスト（18pt以上または14pt以上の太字）の最小値は、AAが3:1、AAAが4.5:1です。UIコンポーネントやアイコンは、隣接する色に対して少なくとも3:1のコントラストが必要です。上記のWCAGコントラストチェッカーを使用して色をテストしてください。

ウェブサイトから色を選ぶ方法: (1) ブラウザのデベロッパーツールを使用する — 任意の要素を右クリックして検証を選び、CSSパネルのカラースウォッチをクリックします。 (2) ColorZilla のようなブラウザ拡張機能を使用する。 (3) スクリーンショットを撮り、Color Picker Web の Image Color Picker にアップロードして任意のピクセルをサンプルする。Chrome のデベロッパーツールにも、カラーピッカーパネルに組み込みのスポイトがあります。

HSLは色相(Hue)、彩度(Saturation)、明度(Lightness)を表します。色相(0°–360°)はカラーホイール上の色の種類です。彩度(0%–100%)は色の鮮やかさまたは灰色の度合いを示します。明度(0%–100%)は色の明るさまたは暗さを示します。例：hsl(270, 81%, 56%)は中間の紫色です。HSLは各プロパティを独立して調整できるため、CSSアニメーションや動的なカラーテーマ設定に最適な形式です。

Complementary colors are pairs of colors that sit directly opposite each other on the color wheel, 180° apart. Examples: red & green, blue & orange, purple & yellow. When placed side by side, complementary colors create strong contrast and make each color appear more vivid. They are commonly used for CTAs, logos, and high-impact UI elements.

カラーピッカーツールは、ユーザーが任意の色を選択し、その正確なコードをHEX、RGB、HSL、CMYKなどの複数の形式で取得できるデジタルユーティリティです。UI/UXデザイナーはインターフェースの色を選択するために、ウェブ開発者はCSSの色値をコーディングするために、ブランドデザイナーは色の一貫性を維持するために、写真家は画像から色を抽出するために、デジタルアーティストはパレット作成のために日常的に使用します。Color Picker Webは、20以上のカラーフォーマット、WCAGアクセシビリティチェック、色覚シミュレーション、18言語に対応した、2026年に利用可能な最も包括的な無料カラーピッカーです。

HEXカラーコードは、ウェブデザインやCSSで使用される色の6文字の16進数表現です。#記号で始まり、その後に3組の文字（00〜FF）が続き、それぞれ赤、緑、青のチャンネルの強度を表します。例えば、#FF0000は純粋な赤（R=255, G=0, B=0）、#FFFFFFは白（すべてのチャンネルが最大）、#000000は黒（すべてのチャンネルがゼロ）です。#F00のような3桁の短縮HEXコードは#FF0000に展開されます。HEXはHTML、CSS、SVG、Figmaのようなデザインツールにおいて最も広くサポートされているカラーフォーマットです。

ウェブサイトの色を選ぶには：(1) ブランドの主要な色から始め、HSL調整を使用して完全な9段階のカラースケール（50〜900）を作成します。(2) 60-30-10ルールを適用します — 中立的な背景60％、二次色30％、CTA用アクセント10％。(3) すべてのテキスト/背景の組み合わせがWCAG AAコントラスト（通常のテキストの場合は最小4.5:1）を満たしていることを確認します。(4) カラーハーモニー・ツールを使用して調和の取れたアクセントカラーを生成します — ウェブサイトには三色法または分割補色法が最適です。(5) 色覚シミュレーターで各色の組み合わせをテストし、すべてのユーザーにとってアクセシブルであることを確認します。

ブランドカラーを選ぶには：(1) カラー心理学を調べる — 青は信頼を築き、緑は成長を示し、赤は緊急性を生み、紫は高級感と創造性を示唆します。(2) 業界を分析する — テクノロジーブランドは青や灰色を好み、健康ブランドは緑を使用し、ラグジュアリーブランドは金、黒、または濃い紫を使用します。(3) ブランドの核心となる感情を反映する主要なブランドカラーを選ぶ。(4) HSL方式を使って主要カラーからフルカラースケールを作成する。(5) ハーモニー理論を使って補助色とアクセントカラーを選ぶ。(6) すべての組み合わせがWCAGアクセシビリティ基準を満たしていることを確認する。すべてのプラットフォームでの一貫性を保つためにデザイントークンとして記録する。

HEX、RGB、HSLは、同じ色を表す3つの方法です: HEX (#9333ea) は、CSS や HTML に最適なコンパクトな6桁の16進形式で、最も広くサポートされています。 RGB (rgb(147, 51, 234)) は 0〜255 の赤、緑、青のチャンネル値で色を定義します — JavaScript のキャンバス、SVG、画面表示に最適です。 HSL (hsl(270, 81%, 56%)) は、色相角（0–360°）、彩度（0–100%）、明度（0–100%）によって色を定義します。各プロパティが独立して調整可能なため、デザイナーにとって最も直感的であり、CSSアニメーションや動的なテーマ設定に最適です。これら3つは同じ色を表しますが、異なるワークフローに役立ちます。

RGBとCMYKは、異なる出力タイプのための根本的に異なるカラーモデルです。 RGB (赤、緑、青)は加法混色モデルで、デジタルスクリーンに使用されます — 色を組み合わせると光が加わり、すべてのチャンネルを最大に混ぜると白が生成されます。 CMYK (シアン、マゼンタ、イエロー、キー/ブラック) は、物理的な印刷で使用される減法カラーモデルです — インクを混ぜると光が吸収され、すべてを組み合わせると黒になります。デジタル/画面向けの出力には常にRGBでデザインしてください。商業印刷にファイルを送る前にCMYKに変換します。変換は決して完璧ではなく、いくつかのRGB色（特に明るく飽和した色）はCMYK印刷では再現できません。

HSB（色相、彩度、明度）とHSV（色相、彩度、値）は、名前が異なるだけで同じ色モデルです。色相（0°〜360°）は色の系統を識別します。彩度（0〜100%）は、灰色から完全に鮮やかな色までの鮮やかさを制御します。明度/値（0〜100%）は、色が放つ光の量を、黒（0%）から完全に明るい（100%）まで制御します。HSBはAdobe Photoshop、Illustrator、Figmaのカラーピッカーでのデフォルトモデルであり、これらのツールを使用するデザイナーにとって重要です。HSBはHSLとは、明るさと明度の計算方法が異なります — HSLでは50%の明るさが純色ですが、HSBでは100%の明度が純色です。

LAB（CIELAB）およびXYZ（CIEXYZ）は、人間の視覚科学に基づいた、デバイスに依存しない知覚的に均一な色空間です。 XYZ すべての現代の色彩科学の基礎であり、三種類の錐体（X、Y、Zはおおよそ赤、緑、青の感度に対応）を用いて、人間の目が色をどのように認識するかに基づいて色をマッピングします。 LAB XYZから派生しており、数値の距離が知覚される色の違いに等しくなるように設計されているため、色の比較、画像処理、機械学習、印刷品質管理に最適です。どちらもプロフェッショナルなカラーマネジメント、ICCカラープロファイル、高度な画像編集ワークフローで使用されています。CSSでは、現代のブラウザでcolor(xyz …)およびlab(…)構文を通じて両方がサポートされています。

Color Picker WebのImage Color Pickerを使うと、写真、スクリーンショット、ロゴ、またはアートワークから正確な色を抽出できます。任意の画像ファイルをアップロードし、任意のピクセルをクリックすると、そのHEX、RGB、HSLの値を瞬時に抽出できます。このツールはまた、画像の支配的な色から完全なカラーパレットを自動生成します。既存の資料からブランドカラーを一致させる、ムードボードからパレットを作成する、製品写真から色を抽出する、競合他社のウェブサイトからカラースキームを逆解析する場合に便利です。アカウントやソフトウェアのインストールは不要で、ブラウザ上で完全に動作します。

カラーピッカ―ウェブは、カラーホイール理論に基づく6つの主要なカラーハーモニータイプすべてをサポートしています: 補完的 — 互いに正反対の2色（180°離れている）、最大のコントラスト。 分割補色 — 1つの基本色に加えて、その補色に隣接する2色（150°および210°）。 トライアド — 3つの等間隔の色（120°離れている）、バランスが取れていて鮮やか。 類似色 — 3つの隣接する色（30°離れている）、調和が取れて自然な色。 モノクロマティック — 単一の色相の、異なる彩度と明度のバリエーション。 テトラード — 4つの色が等間隔（90°ずつ）で配置され、複雑かつ豊かです。色を選ぶと、すべてのハーモニーがリアルタイムで数学的に計算されます。

はい、Color Picker Web は完全に無料で使用できます — カラーピッカー、パレットジェネレーター、画像カラーピッカー、WCAG コントラストチェッカー、色覚シミュレーター、カラーハーモニー、色の明暗ジェネレーター、そして 20 以上のカラーフォーマット変換を含むすべての機能が無料で利用可能です。アカウント、メールアドレス、登録は必要ありません。広告も使用制限もプレミアムプランもありません — すべての機能が永久に無料です。このツールは 18 言語でも利用可能です：英語、ヒンディー語、スペイン語、ロシア語、フランス語、ドイツ語、イタリア語、ポルトガル語、ベンガル語、日本語、韓国語、マレー語、ポーランド語、インドネシア語、アラビア語、ブルガリア語、トルコ語、スウェーデン語。

WCAG（ウェブコンテンツアクセシビリティガイドライン）のカラーコントラスト要件は、視力が低いユーザー、色覚異常のあるユーザー、または加齢による視覚変化のあるユーザーがテキストを読みやすくすることを保証します。コントラスト比は、テキストの色と背景色の輝度の差を測定したもので、1:1（コントラストなし）から21:1（最大、白地に黒）までの範囲があります。WCAG 2.2 レベルAAでは、通常のテキストに対して最低4.5:1、大きなテキストに対して3:1の比率が求められます。レベルAAAでは、通常のテキストに対して7:1が必要です。準拠していない場合、ADA（米国）、EAA（ヨーロッパ）、セクション508に基づく法的責任が生じる可能性があります。2023年だけでも米国では4,600件以上のアクセシビリティ関連の訴訟が提起されており、その中でもコントラスト不適合は最も一般的に指摘される問題の一つです。

カラーピッカーウェブは、8種類の色覚異常をシミュレートします: 第一色盲 — 赤色盲（男性の1.3%）。 第一色弱 — 色の感度低下（男性の1.3%）。 第二色盲 －緑色盲（男性の1.2％） 第二色弱 — 緑色感度の低下（男性の5%、最も一般的なタイプ）。 第三色盲 －青色盲（人口の0.001％）。 第三色弱 — 青に対する感受性の低下（まれ）。 全色盲 — 完全な色覚障害、白黒のみが見える（人口の0.003%）。 全色弱 — すべてのチャネルでの色覚の低下（非常にまれ）。各シミュレーションでは、選択した色にリアルタイムで適用される臨床用の色変換マトリックスを使用します。

UIデザインにおける色彩心理学は、色がユーザーの感情、認知、行動にどのように影響するかを研究する学問です。主な関連性: 青 — 信頼、信頼性、落ち着き（Facebook、Twitter、PayPal、LinkedInで使用） 緑 — 成長、健康、自然、成功（Spotify、WhatsApp、ホールフーズブランドで使用） 赤 — 緊急性、情熱、エネルギー、食欲（販売用バナー、食品ブランド、CTAに使用される）。 紫 — 贅沢、創造性、知恵（キャドバリー、ホールマーク、美容ブランドで使用される）。 黄色 — 楽観、温かさ、注意（警告、セールのハイライトに使用される）。 オレンジ — 熱意、親しみやすさ（Amazon、Fanta、Harley-Davidsonで使用）。色の心理学は、コンバージョン率、ブランドの認識、ユーザーの保持に影響を与える。

デザインシステムのカラーパレットを構築するには、次の5つのステップがあります：（1）プライマリーブランドカラーを定義し、HSLに変換します。（2）明度を体系的に調整して9段階（50–900）のカラースケールを生成します — 背景やティント用には明るい段階（50–300）、テキストやダークモード用には暗い段階（600–900）を使用します。（3）セカンダリー、アクセント、成功、警告、エラー、中性色についても同様に行います。（4）スケールの段階を参照するセマンティックトークン（--color-primary、--color-primary-hover、--color-surface）を作成します。（5）すべてのテキスト/背景の組み合わせがWCAG AAに適合していることを確認します。Color Picker Webを使用してスケールを生成し、コントラストを確認し、HEX/HSL値をFigmaやCSS用のデザイントークンとしてエクスポートしてください。

60-30-10の法則は、バランスの取れた視覚的に魅力的なカラースキームを作るための古典的なデザイン原則です。 60% — 支配的/中立的な色（背景、壁、大きな面） — 通常、全体のトーンを設定する明るい中立色。 30% — 二次色（家具、ヘッダー、サイドバー）— 支配的な色を補完し、奥行きを加える。 10% — アクセントカラー（CTA、ボタン、ハイライト、重要なリンク） — 視覚的な興味を生み出し、重要なアクションに注目を集めます。ウェブデザインでは、これは次のように適用されます：背景と基本の表面に60％、コンテンツ領域と二次的なUI要素に30％、主要なボタン、アクティブ状態、重要なハイライトに10％。この比率は、視覚的な圧迫感を防ぎつつ、階層を維持します。

相対輝度は、色の知覚される明るさを0（黒）から1（白）のスケールで測定します。計算方法：(1) 各RGBチャンネル（0–255）を255で割って小数（0–1）に変換します。(2) ガンマ補正を取り除きます：値が0.04045以下の場合は12.92で割り、それ以外の場合は (値 + 0.055) / 1.055 の2.4乗を適用します。(3) 重み付けされた式を適用します：L = 0.2126 × R + 0.7152 × G + 0.0722 × B。この重みは人間の目の感度を反映しており、緑に最も敏感で、赤はそれより少なく、青は最も鈍感です。(4) コントラスト比 = (L_明るい + 0.05) / (L_暗い + 0.05)。0.05のオフセットは、通常のディスプレイ上の周囲光を表します。Color Picker Webはこの計算を瞬時に行います。

HSL（色相、彩度、明度）とHSB/HSV（色相、彩度、明るさ/値）はどちらも色相と彩度を使用しますが、3つ目のチャンネルが異なります。 HSL明度50%は純粋で完全に彩度の高い色です；0%は黒で、100%は白です。それは対称です。 HSB/HSV明るさ/値の100%は純色であり、0%は他の値に関係なく常に黒です。HSBは色を選ぶのに直感的で、まず100%の明るさで鮮やかな色を選び、その後暗くすることができるため、Photoshop、Figma、Illustratorのデフォルトになっています。HSLはCSSにとって直感的で、同じ色相の暗いバージョンと明るいバージョンの間を滑らかに補間することができます。

加法混色（RGB）と減法混色（CMYK）は、2つの基本的な色のモデルです。 加法（RGB） — 光を発する装置（スクリーン、プロジェクター、LED）で使用されます。色は光を加えることで作られます。3つのチャンネルすべてを最大に組み合わせると（R=255、G=255、B=255）、白が生成されます。光がない場合（R=0、G=0、B=0）は黒が生成されます。 減法 (CMYK) — 印刷で使用されます。インクは光の波長を吸収（引き算）します。すべてのインクを最大限に組み合わせると、すべての光が吸収され、黒が生成されます（理論上 — 実際には、インクの混合が不完全なため、キー/黒インクが追加されます）。実際の意味としては、デジタル作業はRGBでデザインし、その後印刷用にCMYKに変換することです — 一部の鮮やかなRGB色はCMYKでは再現できないことに注意してください。

色温度は色の暖かさや涼しさを表し、光源の場合はケルビン（K）で測定され、デザインカラーの場合は知覚的に認識されます。 暖かい色 （赤、オレンジ、黄色 — 色相0°–60°および300°–360°）は、エネルギッシュで緊急性があり、親しみやすい印象を与えます。視覚的に前に出る — 暖色系の要素はより近くに見えます。 寒色 （ブルー、グリーン、パープル — 色相120°〜240°）は落ち着き、信頼性、プロフェッショナルな印象を与えます。視覚的に後退して見えるため、冷色の要素はより遠くにあるように見えます。 中立 （白、灰色、ベージュ、ティールは約90°〜120°の範囲） バランスが取れていて多用途です。UIデザインでは、暖色はアクション（CTA）を促し、 寒色は信頼感を築き（ヘッダー、背景）、ニュートラルカラーは構造を提供します。 Color Picker Webの「About Color」セクションでは、選択した任意の色の知覚温度を示しています。