カラーピッカー
カラーパレットやカラースペースからカラーコードを取得
特徴
6種のカラーコード対応
HEX・RGB・HSV・HSL・Lab・CMYKを相互変換
カラーマップで直感選択
彩度・明度マップと色相バーで視覚的に色を指定
操作が全形式へ即時反映
どの形式で調整しても他形式の値が連動して更新
変換結果を一覧コピー
全形式の値を表で同時に確認しワンクリック取得
使い方
1
カラーマップで色を選択
カラーマップ(彩度・明度)をドラッグし、色相バーで色味を調整して基準の色を指定
2
タブで入力形式を切替
HEX・RGB・HSV・HSL・Lab・CMYKのタブを選び、数値入力やスライダーで微調整
3
プレビューで色を確認
選んだ色がプレビュー領域に大きく表示され、HEXコードも確認可能
4
コピーボタンで値を取得
一覧表で必要な形式のコピーボタンを押し、値をクリップボードへ取得
ユースケース
Webデザインの配色決め
サイトやバナーの色を視覚的に選び、CSSで使うHEX・RGB値を取得
印刷物のCMYK色指定
チラシや名刺の制作で画面用のRGB値をCMYK値へ変換し入稿準備
コーポレートカラーの管理
ブランドカラーのHEX値を基準に、媒体別のRGB・CMYK表記を統一
配色バリエーション検討
基準色の彩度や明度だけを変えて、濃淡違いの同系色を素早く作成
基礎知識
カラーコード(HEX)とは
カラーコードとは、色を「#FF0000」のような 16 進数 6 桁で表す書き方で、2 桁ずつが赤・緑・青の強さ(00〜FF)に対応します。
色の表し方の違い
- RGB:RGB とは、赤・緑・青の光の三原色を混ぜて色を作る方式で、パソコンやスマホなど画面上の色指定に使われます。
- CMYK:CMYK とは、シアン・マゼンタ・イエロー・黒のインクの掛け合わせで色を作る方式で、印刷物の色指定に使われます。
- HSL・HSV:HSL・HSV とは、色相・彩度・明るさの 3 つの要素で色を表す方式で、「同じ色味で少し暗く」のような直感的な調整に向いています。
安全性とプライバシー
ブラウザ完結
入力データはお使いのブラウザ内だけで処理され、外部に送信されません。
ブラウザ内のみで処理
カラーコードの変換はすべてお使いのブラウザ内で行われ、入力データはサーバーに送信されません。
通信はHTTPSで暗号化
ページの読み込みもTLSにより暗号化され、第三者から内容を読み取られません。
第三者への送信なし
広告ネットワークやトラッカーなど外部サービスへ入力内容を送信しません。
結果の自動保存なし
選択した色や入力候補をサーバーに保管することはありません。
更新情報
- update #34
カラーピッカーのLabタブで他の値が動く不具合を修正




















