カラーピッカー（画面ピック or 画像抽出）
ブラウザ外を含む画面のどこからでもクリック1つで色を取得 ＋ 画像アップロードからの色・パレット抽出。HEX/RGB/HSL/HSB/CMYK/Lab の6形式同時表示、補色・配色サジェスト、WCAGコントラスト判定、日本伝統色サジェスト、色覚多様性シミュレーションまで一画面で完結します。
ピック方法
ボタンを押すとスポイトカーソルになります。ブラウザ外のアプリ画面・ロゴ画像・別のWebサイト等、画面上のどこでもクリックで色を取得できます。
ピック結果
まだ色がピックされていません。
左の「画面ピック」または「画像抽出」モードから色を取得すると、6形式のカラーコード・WCAG・補色・伝統色・色覚多様性がここに表示されます。
ファンアウト分析と一次データ活用で、AIに引用される記事を継続制作。全プランに AIO / AIモード引用率ダッシュボードを標準装備し、毎月の改善提案まで伴走します。
「LLMO Branding」は株式会社はちのす制作の登録商標です（登録第7027594号）。
カラーピッカーとは
カラーピッカーとは、画像や画面から色を抽出してHEXやRGBなどのカラーコードを取得するツールです。
HEX / RGB / HSL / HSB / CMYK / Lab — 6つのカラー形式
色は同じでも、用途によって異なる形式で表現するのが Web 制作・印刷・デザイン現場の慣習です。本ツールは6形式を同時表示します。
| 形式 | 記法例 | 主な用途 |
|---|---|---|
| HEX | #FF6600 | Web/CSS／最も普及 |
| RGB | rgb(255, 102, 0) | プログラム的な色操作 |
| HSL | hsl(24, 100%, 50%) | 色相・彩度・明度の調整 |
| HSB(HSV) | hsb(24, 100%, 100%) | Photoshop・Figmaの内部表現 |
| CMYK | cmyk(0%, 60%, 100%, 0%) | 印刷物・パッケージデザイン |
| Lab | lab(63, 41, 73) | 色の差分計算・伝統色マッチング |
色相環とは — 配色を考える基本の地図
色相環（しきそうかん／color wheel）とは、虹のように連続する色相を円形に並べたものです。本ツールの「補色・配色サジェスト」セクションには、12分割の色相環ダイヤグラムが表示され、ピックした色（基）・補色（補）・スプリット補色（S1/S2）・トライアド（T1/T2）がどの角度に位置するかを一目で確認できます。
▲ 赤（0°）をベースとした場合の配色マッピング例。本ツールでは実際にピックした色を中心に同じ図を自動描画します。
色相環で何が分かるか
- 近い角度の色同士は調和しやすい（類似色配色）
- 真反対（180°）の色同士は強く引き立て合う（補色配色）
- 120°ずつ離れた3色はバランスが取れる（トライアド）
- 90°離れた4色はにぎやかで対比のあるパレット（テトラード）
覚えておきたい代表的な補色ペア
| ベース色 | 補色 | 使われる場面 |
|---|---|---|
| 赤（0°） | 緑（180°） | クリスマス／信号機／停止・進行 |
| オレンジ（30°） | 青（210°） | スポーツチーム／映画ポスター |
| 黄（60°） | 紫（240°） | 注意喚起／高級感のあるラグジュアリー配色 |
| 黄緑（90°） | 赤紫（270°） | 春夏のフレッシュ／コスメ・スイーツ |
補色と配色サジェストの使いどころ
補色（ほしょく）とは、色相環で真反対（180°）に位置する色のことを指します。補色同士を組み合わせるとお互いの色が強調されて視認性が高まる一方、面積バランスを誤ると目がチカチカする「ハレーション」が起きやすくなります。
本ツールが提示する4種類の配色
| 配色名 | 色相環での位置 | 効果と用途 |
|---|---|---|
| 補色 | 真反対（180°） | 強い対比。CTAボタン・警告・アクセント1色に向く |
| スプリット補色 | 補色の両隣（±30°） | 補色より柔らかい対比。ロゴ・キービジュアル向き |
| トライアド | 120° / 240°（3等分） | 3色バランスが取れた配色。グラフ・カテゴリ分けに |
| ベース | 0°（ピックした色） | 主役の色。面積比 60〜70% が基本 |
WCAG コントラスト比とアクセシビリティ
Webアクセシビリティの国際基準であるWCAG 2.1では、テキストの可読性を確保するために、文字色と背景色のコントラスト比に基準があります。
| 基準 | コントラスト比 | 対象 |
|---|---|---|
| AAA | 7以上 | 最高水準（公的機関・読書を伴うサイト） |
| AA（標準） | 4.5以上 | 通常の本文（推奨基準） |
| AA（大きな文字） | 3以上 | 18pt以上（≈24px）または 14pt太字（≈18.66px） |
| 基準未満 | 3未満 | 可読性に問題あり、再検討 |
色覚多様性（カラーユニバーサルデザイン）
日本人男性の約5%、女性の約0.2%が色覚特性をもつとされています。本ツールではピックした色が3種類の色覚特性と1色覚（モノクロ）でどう見えるかをシミュレーション表示します。
- 1型2色覚（P型）：L錐体欠損で赤側の感度が低く、赤と緑の判別が困難
- 2型2色覚（D型）：M錐体欠損で緑側の感度が低く、最も人口比が高い特性
- 3型2色覚（T型）：S錐体欠損で青と黄の判別が困難。人口比は最も少ない
- 1色覚（モノクロ）：色を判別できず、明度のみで認識
本ツールのシミュレーションは Viénot 1999 / Brettel 1997 の LMS 投影法に基づく簡易表示です。あくまで配色チェック用途であり、医療判定には使えません。
日本伝統色サジェスト
本ツールは127色の日本伝統色（桜色・藍色・茜色・鶸色など）を内蔵し、ピックした色に最も近い3色をCIEDE2000（Lab色空間ベースの知覚的色差）で提示します。
利用シーン
- 和風サイト・和食店のLPデザインで、抽出した色に近い伝統色名を採用
- パッケージデザイン・商品命名のヒント（「茜色のロゴ」「鶸色のパッケージ」等）
- 季節感のあるブランディング（桜色・若草色・紅葉色等で四季を表現）
- クライアント向け説明資料での色の言語化（「#E16B8C」より「紅梅色」の方が伝わる）
よくある質問
Q.カラーピッカーとは何ですか？
画像や画面から色を抽出して、HEX・RGBなどのカラーコードを取得するツールです。Webデザイン・LP制作・ブランディングで、参考にした色を正確に再現したり、競合サイトの配色をリサーチしたりする際に使われます。
Q.HEXとRGBの違いは何ですか？
どちらも同じ色を別形式で表現したものです。HEXは「#FF6600」のように16進数6桁で表記し、Web/CSSで最も一般的です。RGBは「rgb(255, 102, 0)」のように赤・緑・青の3チャンネルを0〜255で表記します。プログラム的に色を操作する場合はRGB、コピー&ペーストならHEXが便利です。
Q.画面のどこからでも色を取れるのですか？
Chromium 系ブラウザ（Chrome 95+ / Edge / Opera など）では、本ツールの「画面ピック」モードで EyeDropper API が起動し、ブラウザ外を含む画面全体のどこからでもクリック1つで色を取得できます。Firefox / Safari / iOS は EyeDropper API 未対応のため、画像アップロードモードに自動で切り替わります。
Q.WCAGコントラスト比とは何ですか？
Webアクセシビリティの国際基準で、背景色と文字色のコントラスト比を数値化したものです。本ツールでは、ピックした色と組み合わせる色のコントラスト比を計算し、WCAG 2.1 の AA（4.5以上）/ AAA（7以上）/ 大きな文字向けAA（3以上）の判定を表示します。
Q.色覚多様性シミュレーションとは？
日本人男性の約5%、女性の約0.2%が色覚特性を持つとされ、特定の色の判別が困難な場合があります。本ツールでは Viénot 1999 / Brettel 1997 の LMS 投影法に基づき、ピックした色が 1型2色覚（P型）・2型2色覚（D型）・3型2色覚（T型）・1色覚（モノクロ）でどう見えるかを簡易シミュレーション表示します。あくまで配色チェック用の参考表示であり、医療診断には使えません。
Q.日本伝統色サジェストとは？
ピックした色に最も近い日本伝統色（桜色・藍色・茜色など127色を内蔵）を、CIEDE2000（Lab色空間ベースの知覚的色差）で計算して提示します。和風サイト・パッケージデザイン・命名のヒントに活用できます。
Q.補色（ほしょく）とは何ですか？
色相環で真反対（180°）に位置する色のことです。赤の補色は緑、青の補色は黄、紫の補色は黄緑となります。補色同士は強く引き立て合うため、CTAボタンや警告色など、ユーザーの視線を集めたい1要素のアクセントに向きます。本ツールでは補色に加えて、補色の両隣（スプリット補色）・色相環の3等分（トライアド）も同時に提示します。
Q.画像から複数の色をまとめて抽出できますか？
はい、画像アップロードモードで「パレット自動生成」を実行すると、画像全体から主要な5・10・16色をk-means法で自動抽出します。ロゴ画像からブランドパレットを作る、写真の配色をデザインに転用する用途で活用できます。
Q.入力した画像は外部に送信されますか？
いいえ、本ツールはすべての計算をブラウザ内（クライアントサイド）で完結させており、画像も画面ピック結果も外部サーバーには一切送信されません。未公開のロゴ画像・社内資料・クライアント案件の機密画像でも安心して利用できます。
ファンアウト分析と一次データ活用で、AIに引用される記事を継続制作。全プランに AIO / AIモード引用率ダッシュボードを標準装備し、毎月の改善提案まで伴走します。
「LLMO Branding」は株式会社はちのす制作の登録商標です（登録第7027594号）。