# カラーピッカー

> HSV、HSL、RYBのカラーホイールで色を選び、配色ハーモニーとHEX、RGB、HSL、OKLCH、CMYKの変換に対応。最も近いTailwindトークンも表示。無料、インストール不要。

URL: https://acrafto.com/ja/online-color-picker/  
Updated: 2026-09-23

Tools are interactive browser apps; there is no public API, no endpoints to call and no server-side processing. To use a tool, open its HTML page in a browser.

ホイール上で色を選び、彩度・輝度キャンバスで微調整すれば、`#RRGGBB`から`oklch()`まで、あなたのプロジェクトが使うすべての形式で読み取れます。このピッカーは、他のツールが省略しがちな部分もカバーします。画家用のRYBホイールを含む3種類のホイール形状、あなたの代わりにパレットを組み立てるハーモニーのオーバーレイ、アルファチャンネル、そしてパレット全体をCSS変数、SCSS、JSONとしてワンクリックで書き出す機能です。すべての計算はブラウザ内でローカルに行われます。

## RYB vs RGB：1つではなく3つのホイール

**ホイールモード**セレクターは、ホイールそのものの幾何学的な形を変更します。

- **HSV**と**HSL**はデジタルホイールで、RGB画面が光を混ぜる方式に沿って色相が配置されています。正方形のキャンバスの挙動が異なり、HSVでは最も明るい角が純粋な色相そのものになりますが、HSLでは純粋な色相を輝度50%の位置に置き、その上に白があります。
- **RYB（画家用）**は、赤・黄・青を原色とし、その間にオレンジ、緑、紫を置く、画家が学ぶ配置で色相を並べます（[RYBカラーモデル](https://en.wikipedia.org/wiki/RYB_color_model)、英語）。実用上の価値はハーモニーに現れます。RYBホイールでは、赤の補色は**緑**、青の補色は**オレンジ**という古典的な絵の具の組み合わせになりますが、デジタルホイールでは赤とシアンが対になります。通常のピッカーで「補色」パレットを見て違和感を覚えたことがあるなら、これが理由です。

## パレットを自動で組み立てる配色調和のルール

**配色調和**の下でルールを選ぶと、ホイールに組み合わせの色がマークされ、そのままパレットとして表示されます。

- **補色：** 正反対の1色。最も強いコントラストで、支配的なブランドカラーに対する単一のアクセントに向いています。
- **分裂補色：** 補色の両隣の2色。ほぼ同等のコントラストながら、はるかにバランスを取りやすくなります。
- **トライアド：** 均等に配置された3色。生き生きとしながらも安定感があり、1色を主役にして残り2色を控えめに使います。
- **テトラード（正方形）：** 4色。イラストやデータビジュアライゼーションには豊かな配色になりますが、UI制作でバランスを取るのは難しくなります。
- **類似色：** 隣り合う色。緊張感が少なく、背景やグラデーションに向いています。
- **単色：** 1つの色相を輝度違いで展開。ホバー、アクティブ、無効状態などインターフェースの状態表現に最も安全な選択肢です。

パレットパネルでは、プレーンな**HEX**、**RGB**、**HSL**、**OKLCH**、そのまま貼り付けられる**CSSカスタムプロパティ**（`--color-1: …`）、**SCSS変数**、コードに渡すための**JSON**という好きな形式でセット全体をワンクリックでコピーできます。パレットが色の区別が付きにくい人にもコントラストを保てているか確かめたいときは、スクリーンショットを撮って[グレースケールに変換](https://acrafto.com/ja/gazo-grayscale-henkan-online/)すると素早く確認できます。

## HEX、RGB、HSL、OKLCH、CMYKの変換：何を貼り付けても、すべて読み取れる

入力フィールドは、ほぼどんな色の表記でも受け付けます。`#f80`、`#ff8800`、アルファ付き8桁HEX、`rgb()` / `rgba()`、`hsl()`、`hwb()`、`lch()`、`oklch()`、`oklab()`、`cmyk()`、`0xFF8800`、あるいは`rebeccapurple`のようなCSSカラー名。何を入力しても、**HEX、RGB、HSL、HSV、LCH、OKLCH、CMYK**という7つの同期した出力が返ってきて、それぞれにコピーボタンが付いています。

プレビューの下にある\*\*不透明度（アルファ）\*\*スライダーをドラッグすると、出力は透過形式（`#RRGGBBAA`、`rgba()`、`hsla()`）に切り替わり、透明度を判断しやすいようプレビューはチェッカーボード柄の上に表示されます。

## 最も近いTailwind CSSトークンを見つける

プレビューの下にある2つの補助チップは、色に名前を付けてくれます。**最も近いCSS名前付きカラー**（プロトタイピングや色について話すときに便利）と、**最も近いTailwindトークン**（例：`orange-500`）です。これにより、独自の値を発明する代わりにデザインシステムの中にとどまれます。チップをクリックするとコピーできます。

デザインの受け渡しのたびに出てくる疑問にも答えます。デザイナーからHEXコードが送られてきたけれど、一番近いTailwindのクラスはどれ。一致度はTailwind CSS 4標準のデフォルトパレット（[Tailwindのカラー一覧](https://tailwindcss.com/docs/colors)、英語）に対して計算されるため、返ってくるトークンはそのままクラス名に貼り付けられます。

## どの形式を使うべきか？

| フォーマット | フルネーム | いつ使用するか？ |
| :--- | :--- | :--- |
| **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 | **印刷志向。** 印刷デザイナーとやり取りするための概算値です。最終的な値は常に印刷機のカラープロファイルに依存します。 |

OKLCHが従来のモデルよりも知覚的に均一である理由は、Oklab色空間を設計したBjörn Ottossonが[原論文](https://bottosson.github.io/posts/oklab/)（英語）で説明しています。構文とブラウザ対応は[MDN](https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Values/color_value/oklch)にまとまっています。印刷モデルの仕組みは[Wikipediaの「CMYK」の項目](https://ja.wikipedia.org/wiki/CMYK)で解説されています。

## 地味だけど時間を節約してくれる機能

- **履歴は自動で保存されます。** 直近24色は、ページを更新しても残ります。ブラウザのローカルストレージにのみ保存され、どこにもアップロードされません。
- **スポイト。** EyeDropper APIに対応したブラウザ（ChromeとEdge）では、ブラウザウィンドウの外も含め、画面上のどこからでも色を拾えます。写真やロゴファイルから色を調べたいときは、[画像スポイトツール](https://acrafto.com/ja/image-color-picker/)が便利です。
- **キーボード操作。** ホイールと彩度キャンバスは矢印キーに反応し、ピクセル単位の精密な調整ができます。
- **プリセット**は、とりあえずの出発点が欲しいときのために、よく使う基本色を用意しています。

---

## よくある質問 (FAQ)

### OKLCHをHEXに変換するには？

OKLCHフィールドに`oklch()`の値を貼り付けると、HEXを含む他のすべての出力が即座に更新されます。逆方向も同様に動作します。HEXコードを入力すれば、対応する`oklch()`を読み取れます。1点だけ注意があります。OKLCHはsRGBの色域外の色も表現できるため、そうした色はsRGBで表示可能な範囲までチャンネルごとにクリップされます。そのため、非常に彩度の高い`oklch()`とそのHEX形式は、広色域ディスプレイでは同じ見た目にならないことがあります。

### 本番環境のCSSで`oklch()`を使っても安全ですか？

はい。Chrome、Edge、Firefox、Safariの現行バージョンはすべて`oklch()`に対応しており、デザイントークンの表記として主流になりつつあります（Tailwind CSS 4はパレット全体をこの形式で定義しています）。非常に古いブラウザ向けには、前の行にHEXのフォールバックを用意してください。このツールは両方の値を提供します。

### RYBホイールに切り替えるとハーモニーが変わるのはなぜですか？

「正反対」が何を意味するかは、色相が円周上にどう配置されているかによって変わるからです。RYBホイールは絵の具の原色を均等に配置しているため、補色のペアは画家が想定する組み合わせ（赤と緑、青とオレンジ、黄と紫）になります。HSV/HSLホイールはRGBの光の混色にもとづいて色相を配置しているため、赤とシアンが対になります。どちらも間違いではなく、RYBは伝統的な美術教育に、HSV/HSLは画面の仕組みに沿っています。

### 印刷用にCMYKの値を信頼してよいですか？

目安として扱ってください。実際の印刷変換は、印刷機の[ICCプロファイル](https://ja.wikipedia.org/wiki/ICC%E3%83%97%E3%83%AD%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB)、用紙、インクに左右されます。同じRGBの色でも、コート紙と非コート紙では変換結果が異なります。ここでの値は標準的な計算式で近い値を出しますが、最終的な色校正は印刷会社の領分です。

### Firefox や Safari でスポイトボタンが見当たらないのはなぜですか？

意図的に非表示になっています。ボタンが依存する[EyeDropper API](https://developer.mozilla.org/ja/docs/Web/API/EyeDropper_API)は、現時点ではChromium系ブラウザ（Chrome、Edge、Opera）にしか実装されていません。他のブラウザでもピッカーの他の機能はすべて通常どおり動作し、画面からの色の取得だけが利用できません。画像から色を調べたい場合は、どのブラウザでも使える[画像スポイトツール](https://acrafto.com/ja/image-color-picker/)をお使いください。

### 色の履歴はプライベートに保たれますか？

はい。履歴はお使いのデバイスのブラウザのlocalStorageに保存されます。選んだ色、貼り付けた色、コピーした色はどこにも送信されません。ツール全体がクライアントサイドのJavaScriptで動作しており、開発者ツールのネットワークタブで確認できます。

## Other languages

- Čeština (cs): [Barevné kolo](https://acrafto.com/cs/barevne-kolo/) ([Markdown](https://acrafto.com/cs/barevne-kolo/index.md))
- Slovenčina (sk): [Online výber farieb](https://acrafto.com/sk/online-vyber-farieb/) ([Markdown](https://acrafto.com/sk/online-vyber-farieb/index.md))
- English (en): [Color Picker](https://acrafto.com/en/color-picker-online/) ([Markdown](https://acrafto.com/en/color-picker-online/index.md))
- Deutsch (de): [Farbwähler](https://acrafto.com/de/farbwahl-online-farbrad-konverter/) ([Markdown](https://acrafto.com/de/farbwahl-online-farbrad-konverter/index.md))
- Français (fr): [Sélecteur de couleur](https://acrafto.com/fr/selecteur-couleur-en-ligne/) ([Markdown](https://acrafto.com/fr/selecteur-couleur-en-ligne/index.md))
- Español (es): [Selector de colores online](https://acrafto.com/es/selector-de-colores-online/) ([Markdown](https://acrafto.com/es/selector-de-colores-online/index.md))
- Italiano (it): [Selettore colori](https://acrafto.com/it/selettore-colori-online/) ([Markdown](https://acrafto.com/it/selettore-colori-online/index.md))
- Português (pt): [Color Picker Online](https://acrafto.com/pt/color-picker-online-roda-cores-conversor-hex-rgb-lch/) ([Markdown](https://acrafto.com/pt/color-picker-online-roda-cores-conversor-hex-rgb-lch/index.md))
- Nederlands (nl): [Kleurkiezer](https://acrafto.com/nl/online-kleurkiezer/) ([Markdown](https://acrafto.com/nl/online-kleurkiezer/index.md))
- Polski (pl): [Color Picker Online](https://acrafto.com/pl/color-picker-online-konwerter-kolorow/) ([Markdown](https://acrafto.com/pl/color-picker-online-konwerter-kolorow/index.md))
- Română (ro): [Selector de culori](https://acrafto.com/ro/selector-culori-online/) ([Markdown](https://acrafto.com/ro/selector-culori-online/index.md))
- Magyar (hu): [Online színválasztó](https://acrafto.com/hu/szinvalaszto-online/) ([Markdown](https://acrafto.com/hu/szinvalaszto-online/index.md))
- Ελληνικά (el): [Color picker online](https://acrafto.com/el/online-color-picker-chromatikos-trochos/) ([Markdown](https://acrafto.com/el/online-color-picker-chromatikos-trochos/index.md))
- Български (bg): [Цветово колело](https://acrafto.com/bg/onlain-izbirach-na-cvetove/) ([Markdown](https://acrafto.com/bg/onlain-izbirach-na-cvetove/index.md))
- Hrvatski (hr): [Kotač boja](https://acrafto.com/hr/online-birac-boja-pretvornik/) ([Markdown](https://acrafto.com/hr/online-birac-boja-pretvornik/index.md))
- Slovenščina (sl): [Izbirnik barv](https://acrafto.com/sl/izbirnik-barv-splet/) ([Markdown](https://acrafto.com/sl/izbirnik-barv-splet/index.md))
- Eesti (et): [Värvivalija](https://acrafto.com/et/varvivalija-online/) ([Markdown](https://acrafto.com/et/varvivalija-online/index.md))
- Latviešu (lv): [Krāsu ritenis](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/) ([Markdown](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/index.md))
- Lietuvių (lt): [Spalvų parinkiklis](https://acrafto.com/lt/spalvu-parinkiklis-internetu/) ([Markdown](https://acrafto.com/lt/spalvu-parinkiklis-internetu/index.md))
- Svenska (sv): [Färgväljare](https://acrafto.com/sv/fargv%C3%A4ljare-online/) ([Markdown](https://acrafto.com/sv/fargv%C3%A4ljare-online/index.md))
- Dansk (da): [Farvevælger og farvehjul](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/) ([Markdown](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/index.md))
- Suomi (fi): [Värinvalitsin online](https://acrafto.com/fi/varinvalitsin-online/) ([Markdown](https://acrafto.com/fi/varinvalitsin-online/index.md))
- Norsk (no): [Fargehjul og fargevelger](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/) ([Markdown](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/index.md))
- Українська (uk): [Вибір кольору онлайн](https://acrafto.com/uk/kolir-picker-onlayn/) ([Markdown](https://acrafto.com/uk/kolir-picker-onlayn/index.md))
- Русский (ru): [Цветовой круг](https://acrafto.com/ru/onlain-vybor-tsveta/) ([Markdown](https://acrafto.com/ru/onlain-vybor-tsveta/index.md))
- Српски (sr): [Točak boja](https://acrafto.com/sr/online-izbirac-boja/) ([Markdown](https://acrafto.com/sr/online-izbirac-boja/index.md))
- Македонски (mk): [Избирач на бои](https://acrafto.com/mk/izbirac-boi-online/) ([Markdown](https://acrafto.com/mk/izbirac-boi-online/index.md))
- Bosanski (bs): [Krug boja](https://acrafto.com/bs/birac-boja-online-pretvornik/) ([Markdown](https://acrafto.com/bs/birac-boja-online-pretvornik/index.md))
- Shqip (sq): [Zgjedhës ngjyrash](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/) ([Markdown](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/index.md))
- Türkçe (tr): [Renk seçici](https://acrafto.com/tr/online-renk-secici/) ([Markdown](https://acrafto.com/tr/online-renk-secici/index.md))
- 한국어 (ko): [컬러 피커](https://acrafto.com/ko/online-color-picker/) ([Markdown](https://acrafto.com/ko/online-color-picker/index.md))
- العربية (ar): [منتقي الألوان](https://acrafto.com/ar/muntaky-al-alwan-online/) ([Markdown](https://acrafto.com/ar/muntaky-al-alwan-online/index.md))
- हिन्दी (hi): [कलर पिकर ऑनलाइन](https://acrafto.com/hi/color-picker-online/) ([Markdown](https://acrafto.com/hi/color-picker-online/index.md))
- Bahasa Indonesia (id): [Pemilih warna](https://acrafto.com/id/pemilih-warna-online/) ([Markdown](https://acrafto.com/id/pemilih-warna-online/index.md))
- Tiếng Việt (vi): [Bánh xe màu](https://acrafto.com/vi/chon-mau-online/) ([Markdown](https://acrafto.com/vi/chon-mau-online/index.md))
- ไทย (th): [วงล้อสี](https://acrafto.com/th/online-color-picker/) ([Markdown](https://acrafto.com/th/online-color-picker/index.md))
- עברית (he): [גלגל צבעים](https://acrafto.com/he/online-color-picker-hex-rgb-lch/) ([Markdown](https://acrafto.com/he/online-color-picker-hex-rgb-lch/index.md))