Loading…

概要 オンラインカラーピッカー & コンバーター

画像をドロップ、色を貼り付け、またはホイールを使用してピクセル単位で正確な色を取得します。このツールは豊富なクライアントサイド分析を実行します：HEXを正規化し、RGB/HSL/HSV/CMYKを計算し、XYZ/LAB/LCHに変換し、輝度とWCAGコントラストを計算し、調和のとれたパレットを生成します。その後、任意の形式をCSS対応のトークンとしてコピーしたり、ハーモニーを使用して一貫したデザインシステムを構築したりできます。

このカラーピッカーでできること

  • 画像から色をサンプリング*するか、精密なカラーホイールまたは HEX/RGB 入力から開始
  • 豊富な変換: HEX、HEX8、RGB/A、HSL/A、HSV、CMYK、XYZ、LAB、LCH
  • 相対輝度を使用した #000000 と #FFFFFF に対する組み込み WCAG コントラストチェッカー
  • 該当する場合のウェブセーフおよび短縮 HEX の提案
  • 配色調和: 補色、トライアド、テトラード、アナログ、モノクローム（色相回転で計算）
  • 輝度と知覚明度のプレビューでコントラスト問題を事前に確認
  • 最も近い RGB 距離に基づく Pantone 風の近似マッチング（キャッシュ済みデータセット使用）
  • 解析はクライアント側で実行。オプションの Pantone 検索が有効な場合のみ最小限のデータを使用

🔧 カラーピッカーの使い方 for color-picker

1

1. ベースカラーを選択またはピック

HEX 値を貼り付けるか、RGB/HSL を入力するか、ピッカーを使用して画像またはホイールから色を取得します。ツールは内部で安全な HEX 値に正規化します。

2

2. 色相と明度を微調整

色相、彩度、明度を調整して、スウォッチが適切に見えるようにします。大きなプレビューで明るい面と暗い面上の色を確認できます。

3

3. 必要な形式を読み取り、コピー

HEX、HEX8、RGB、RGBA、HSL、HSLA、HSV、CMYK、XYZ、LAB、LCH をワンクリックでコピー。CSS 変数、デザイントークン、または引き継ぎメモに使用します。

4

4. WCAG コントラストをチェック

sRGB 輝度に基づく #000000 と #FFFFFF に対するコントラスト比を確認します。結果を使用して、本文テキスト、大見出し、または UI 要素に色が適しているかどうかを素早く判断します。

5

5. 調和を生成し、パレットを構築

色相回転で生成された補色、トライアド、テトラード、アナログ、モノクロームの色を探索します。お気に入りをパレット/履歴に追加し、トークンとしてエクスポートします。

技術詳細

入力処理と正規化

ツールは 16 進カラーコードを受け入れ、内部参照として正規化された 6 桁の HEX に変換します。

側面動作備考
HEX正規化3桁および6桁HEX、先頭の#は任意短縮HEX（例：#0f8）は#00ff88に展開；非16進文字は除去されます。
HEX8サポート#RRGGBBAAによるRGBAアルファチャンネルは0–255に変換され、4番目のバイトとして追加されます。
ウェブセーフ提案チャネルごとに最も近い51段階にスナップ値は51の倍数（0、51、102、153、204、255）の最も近い値に丸められます。
短縮HEX提案圧縮可能な場合のみHEX数字の各ペアが繰り返される場合に表示（例：#112233 → #123）。

色空間と変換

すべての計算はD65参照白色を用いたsRGBに基づいています。

空間計算用途
RGB正規化HEXから（チャネルごとに0–255）変換のための基本表現。
HSL / HSVsRGBからの標準円柱変換直感的な編集と調和計算に使用。
CMYKデバイス非依存近似1−max(R,G,B)で計算、0–100%成分；ICCプロファイルに依存しません。
XYZ線形化sRGB → D65行列を使用したXYZLAB/LCHおよび詳細分析のための中間空間。
LABXYZからのCIE L*a*b*知覚的に均一なメトリック空間。
LCHLABからのCIE L*C*h°色相/彩度/明度調整および知覚的パレット設計に有用。

輝度とWCAGコントラスト

コントラストは標準WCAG相対輝度式を使用して計算されます。

側面詳細備考
相対輝度線形化sRGB（Y成分）から計算係数0.2126R + 0.7152G + 0.0722Bを使用
コントラスト比(L1 + 0.05) / (L2 + 0.05)ツールは#000000および#FFFFFFとのコントラストを報告します
WCAG閾値通常および大文字テキストのAA/AAA典型的な閾値: 4.5:1 (AA通常), 3:1 (AA大文字), 7:1 (AAA通常), 4.5:1 (AAA大文字)

調和色と派生色

調和色はHSLで単純な色相回転として生成され、彩度と明度が保持されます

調和ルール例
補色+180°色相カラーホイール上の反対点
トライアド±120°色相均等に配置された3色
テトラード+90°, +180°, +270°色相ホイール上で長方形を形成する4色
アナロガス−30° / +30°色相基本色の周辺色
モノクロームLでの明るさ調整同一色相の明暗バージョン

パントーン風マッチング（近似）

パントーンデータセットが利用可能な場合、ツールはRGB空間で最も近いマッチを計算します

側面動作備考
データセット読み込みgetPantoneColors / getPantoneColorsCachedによるキャッシュ＋非同期読み込みUIはキャッシュが有効な場合は即時に、または短い非同期読み込み後にマッチを表示できます
マッチ指標RGB（0–255）におけるユークリッド距離の二乗高速で単純な近似。知覚的ΔE*指標ではありません。
出力Pantone風のIDと名称ガイダンスとしてのみ表示。公式のPantoneマッピングではありません。

パフォーマンスとプライバシー

変換、輝度、コントラスト、調和はすべてクライアント側で計算されます。Pantone検索は設定に応じてローカルまたはリモートのデータセットを参照しますが、色データは明示的に共有またはエクスポートしない限り単純なHEX文字列のままです。

主な使用例

UI/UXとフロントエンド

  • ボタン、リンク、テキストのアクセシブルな前景/背景ペアを作成。
  • 選択した色から直接CSS変数とデザイントークンをエクスポート。
  • テーマスイッチャー実装前にライト/ダークモードのコントラストを確認。
/* CSSカラートークン */
:root {
  --brand: #4caf50;
  --brand-rgb: 76, 175, 80;
  --on-brand: #0b0b0b;
}
.button-primary {
  background-color: var(--brand);
  color: var(--on-brand);
}

ブランディングとビジュアルアイデンティティ

  • 単一のメインカラーからプライマリ/セカンダリ/アクセントパレットを導出。
  • ロゴや製品ライン向けに補色やトライアドのオプションを探索。
  • ブランドガイドライン作成前にPantone風の近似名称を取得。

データビジュアライゼーションとダッシュボード

  • 明るい背景と暗い背景の両方で識別可能なシリーズカラーを定義。
  • LAB/LCHを使用して知覚的に均等なステップのパレットを設計。
  • 凡例やラベルでチャートの色がコントラスト要件を満たすか素早く確認。

❓ Frequently Asked Questions

HEX、RGB、HSL、HSVの違いは何ですか？

HEXはRGB値を16進数で簡潔に記述する方法です。RGBはsRGBにおける赤/緑/青の成分を表します。HSLとHSVはより直感的な円柱モデルで、Hは色相環上の色相、Sは彩度、L/Vは明るさまたは輝度を制御します。

CMYK値が近似値に見えるのはなぜですか？

実際のCMYK出力はプリンタープロファイル、インク、用紙、キャリブレーションに依存します。このツールは初期デザイン決定に有用なデバイス非依存の近似値を表示しますが、最終的な印刷作業は印刷プロバイダーのICCプロファイルで確認してください。

LABとLCHは何に役立ちますか？

LABとLCHは生のRGBより知覚的に均一です。LまたはCの等しい数値ステップは視覚的に一貫して見える傾向があり、色調、陰影、バランスの取れたパレットの生成や色間の視覚的距離の測定に最適です。

コントラストはどのように計算されますか？

WCAG式を使用してsRGBから相対輝度を計算し、コントラスト比（L1 + 0.05）/（L2 + 0.05）を導出します。結果は4.5:1（AA通常テキスト）や7:1（AAA通常テキスト）などの一般的な閾値と比較されます。

Pantone名は正確ですか？

いいえ。Pantone風のラベルはRGB空間における近似最近傍マッチであり、ガイダンス目的でのみ提供されます。生産クリティカルな作業では、常に公式Pantoneライブラリとツールで検証してください。

画像や色は保存されますか？

色計算（形式変換、コントラスト、調和）はクライアント側で実行されます。設定により画像アップロードとPantoneデータセットはサーバーを介する場合がありますが、このツールは一時的な処理用に設計されており、長期保存は行いません。機密性の高い資産にはローカル/オフラインツールを推奨します。

Pro Tips

Best Practice

明るい面と暗い面の両方で色を必ずプレビューしてください。知覚される彩度とコントラストは状況によって大きく変化することがあります。

Best Practice

色調と陰影を生成する際はLABまたはLCHを使用して、明るさの変化が人間の目により均一に感じられるようにしましょう。

Best Practice

デフォルトのボタン色だけでなく、すべてのインタラクティブ状態（ホバー、アクティブ、無効）のAA/AAAコントラストを確認してください。

Best Practice

フォーマットタブからCSS変数やデザイントークンをエクスポートして、コンポーネント間で色の一貫性を保ちましょう。

Best Practice

画像からサンプリングする際は、単一ピクセルではなく小さな領域を平均化して、圧縮やアンチエイリアスによるノイズを減らしましょう。

Additional Resources

WCAG 2.2 – コントラスト（最低限）
Documentation
CSSカラーモジュールレベル4
Documentation
MDN – <color> 値
Documentation
CIE 測色学 (XYZ/LAB)
Documentation

Other Tools