オンラインカラーピッカー：カラーホイールで色変換 (HEX/RGB/LCH)
ホイール上で色を選び、彩度・輝度キャンバスで微調整し、あなたのプロジェクトが使うすべての形式で読み取る——#RRGGBBからoklch()まで。このピッカーは、他のツールが省略しがちな部分もカバーします。画家用のRYBホイールを含む3種類のホイール形状、あなたの代わりにパレットを組み立てるハーモニーのオーバーレイ、アルファチャンネル、そしてパレット全体をCSS変数、SCSS、JSONとしてワンクリックで書き出す機能です。すべての計算はブラウザ内でローカルに行われます。
1つではなく3つのホイール
ホイールモードセレクターは、ホイールそのものの幾何学的な形を変更します。
- HSVとHSLはデジタルホイールで、RGB画面が光を混ぜる方式に沿って色相が配置されています。正方形のキャンバスの挙動が異なり、HSVでは最も明るい角が純粋な色相そのものになりますが、HSLでは純粋な色相を輝度50%の位置に置き、その上に白があります。
- RYB（画家用）は、画家が学ぶ配置——赤・黄・青を原色とし、その間にオレンジ、緑、紫を置く——で色相を並べます。実用上の価値はハーモニーに現れます。RYBホイールでは、赤の補色は緑、青の補色はオレンジという古典的な絵の具の組み合わせになりますが、デジタルホイールでは赤とシアンが対になります。通常のピッカーで「補色」パレットを見て違和感を覚えたことがあるなら、これが理由です。
パレットを自動で組み立てるハーモニー
配色調和の下でルールを選ぶと、ホイールに組み合わせの色がマークされ、そのままパレットとして表示されます。
- 補色 — 正反対の1色。最も強いコントラストで、支配的なブランドカラーに対する単一のアクセントに向いています。
- 分裂補色 — 補色の両隣の2色。ほぼ同等のコントラストながら、はるかにバランスを取りやすくなります。
- トライアド — 均等に配置された3色。生き生きとしながらも安定感があり、1色を主役にして残り2色を控えめに使います。
- テトラード（正方形） — 4色。イラストやデータビジュアライゼーションには豊かな配色になりますが、UI制作でバランスを取るのは難しくなります。
- 類似色 — 隣り合う色。緊張感が少なく、背景やグラデーションに向いています。
- 単色 — 1つの色相を輝度違いで展開。ホバー、アクティブ、無効状態などインターフェースの状態表現に最も安全な選択肢です。
パレットパネルでは、選んだ形式——プレーンなHEX、RGB、HSL、OKLCH、そのまま貼り付けられるCSSカスタムプロパティ（--color-1: …）、SCSS変数、コードに渡すためのJSON——でセット全体をワンクリックでコピーできます。
何を貼り付けても、すべて読み取れる
入力フィールドは、ほぼどんな色の表記でも受け付けます。#f80、#ff8800、アルファ付き8桁HEX、rgb() / rgba()、hsl()、hwb()、lch()、oklch()、oklab()、cmyk()、0xFF8800、あるいはrebeccapurpleのようなCSSカラー名。何を入力しても、HEX、RGB、HSL、HSV、LCH、OKLCH、CMYKという7つの同期した出力が返ってきて、それぞれにコピーボタンが付いています。
プレビューの下にある2つの補助チップは、色に名前を付けてくれます。最も近いCSS名前付きカラー（プロトタイピングや色について話すときに便利）と、最も近いTailwindトークン（例：orange-500）——これにより、独自の値を発明する代わりにデザインシステムの中にとどまれます。
プレビューの下にある**不透明度（アルファ）**スライダーをドラッグすると、出力は透過形式（#RRGGBBAA、rgba()、hsla()）に切り替わり、透明度を判断しやすいようプレビューはチェッカーボード柄の上に表示されます。
どの形式を使うべきか？
| フォーマット | フルネーム | いつ使用するか？ |
|---|---|---|
| HEX | Hexadecimal | ウェブの標準。 コンパクトで、あらゆる環境でサポートされ、コピーも簡単。8桁でアルファも扱えます。 |
| RGB | Red, Green, Blue | 画面の考え方そのもの。 光の3チャンネル、0〜255。ほとんどのAPIやCanvasコードが期待する形式です。 |
| HSL | Hue, Saturation, Lightness | 人が手で調整するための形式。「もう少し明るく」「彩度を下げて」が数値を1つ変えるだけで済みます。 |
| HSV | Hue, Saturation, Value | グラフィックソフトウェア向け。 PhotoshopやGIMPのピッカーの背後にあるモデルです。 |
| LCH | Lightness, Chroma, Hue | 知覚的に均一。 数値上の同じ変化幅が、見た目でも同じ変化に感じられます——HSLが目指しつつも実現できていないことです。 |
| OKLCH | OK Lightness, Chroma, Hue | 現代のCSSの選択肢。 LCHの青系での色相ずれを解消しており、現行のすべてのブラウザで対応、デザイントークンのシステムに最適です。 |
| CMYK | Cyan, Magenta, Yellow, Key | 印刷志向。 印刷デザイナーとやり取りするための概算値——最終的な値は常に印刷機のカラープロファイルに依存します。 |
地味だけど時間を節約してくれる機能
- 履歴は自動で保存されます。 直近24色は、ページを更新しても残ります——ブラウザのローカルストレージにのみ保存され、どこにもアップロードされません。
- スポイト。 EyeDropper APIに対応したブラウザ（ChromeとEdge）では、ブラウザウィンドウの外も含め、画面上のどこからでも色を拾えます。
- キーボード操作。 ホイールと彩度キャンバスは矢印キーに反応し、ピクセル単位の精密な調整ができます。
- プリセットは、とりあえずの出発点が欲しいときのために、よく使う基本色を用意しています。
よくある質問 (FAQ)
本番環境のCSSでoklch()を使っても安全ですか？
はい。Chrome、Edge、Firefox、Safariの現行バージョンはすべてoklch()に対応しており、デザイントークンの表記として主流になりつつあります（Tailwind CSS 4はパレット全体をこの形式で定義しています）。非常に古いブラウザ向けには、前の行にHEXのフォールバックを用意してください——このツールは両方の値を提供します。