コンテンツへスキップ

オンラインカラーピッカー

ボックスから好きな色を選ぶか、コードを貼り付けて、HEX・RGB・HSL・OKLCHの値をコピーできます。シェード、トーン、配色、画面の色を取るスポイト付き。

カラー変換

この色のコードを10種類の形式ですぐにコピーできます。

色の選び方と変換方法

カラーピッカーでは、3つの方法で正確な色を見つけられます。彩度・明度のボックスをクリックする、下のバーで色相をスライドする、またはすでに知っているHex・RGB・HSL・OKLCHのコードを入力する方法です。

ホイールを回して配色を探る色相環と違い、このツールは具体的な色が決まっていて、その正確なコードが必要なときや、CSS・印刷などのために別の形式へ変換したいときに使います。

カラーピッカーの使い方

  1. 1. 色相を選ぶ

    カラーバーのつまみをドラッグして色相を選びます。赤、黄、緑、青…と、色相環の0°から360°までを一周します。

  2. 2. 彩度と明るさを調整

    大きなボックスで、点を右に動かすと鮮やかに、上に動かすと明るくなります。いちばん下は常に黒です。

  3. 3. コードをコピー

    形式（HEX・RGB・HSL・OKLCH）を選び、ワンクリックでコピーします。コードがある場合は上の欄に貼り付けると、その色に移動します。

どの色の形式を使うべきか

#2C71DEをよく使う形式で表すとこうなります。それぞれの用途も紹介します。

HEX#2C71DECSS、HTML、Figmaなどのデザインツールの標準。6桁の16進数です。
RGBrgb(44, 113, 222)赤・緑・青を0〜255で表します。コードで使うときや透明度が必要なときに便利です。
HSLhsl(217, 73%, 52%)色相・彩度・明度。色の明るいバリエーションや暗いバリエーションを作るのにいちばん便利です。
HSV / HSBhsv(217 80 87)色相・彩度・明るさ（HSBとも）。ピッカーのボックスや多くのデザインソフトで使われるモデルです。
OKLCHoklch(0.5663 0.1805 259.49)CSSのモダンな形式。明度が均一に知覚されるため、スケールやカラーシステムに最適です。
CMYKC80 M49 Y0 K13印刷用のシアン・マゼンタ・イエロー・ブラック。おおよその変換なので、印刷会社に確認してください。

画面上の色を取得する

スポイトを使えば、開いているWebサイト、スクリーンショット、ドキュメントなど、あらゆるものの正確な色を取得できます。スポイトのアイコンを押して好きな場所をクリックすると、すぐにコードが表示されます。

Chrome、Edge、その他Chromiumベースのデスクトップブラウザで動作します。色が写真の中にある場合は、画像カラーピッカーにアップロードしてパレット全体を抽出しましょう。

画像カラーピッカーを開く

1,600万色以上

大げさに聞こえるかもしれませんが、現代のモニターは16,777,216色を表示できます。

これはRGBシステムが3つのカラーチャンネルを使うためです。

  • 赤（Red）
  • 緑（Green）
  • 青（Blue）

各チャンネルは0から255の値を取ります。

3つの値を組み合わせると、ちょうど次の数になります。

256 × 256 × 256 = 16,777,216色。

似た色も多いですが、この広い範囲があることで、プロジェクトの種類を問わず、必要な正確なトーンを非常に高い精度で見つけられます。

だからこそ、優れたカラーピッカーは欠かせないツールになります。

よくある質問

彩度・明度のボックスと色相バーを使って色を視覚的に選び、デザインやコードで使えるHEX・RGB・HSLなどの正確なコードを得るためのツールです。

シャープ記号の後に6桁の16進数で色を表す書き方です。赤・緑・青にそれぞれ2桁ずつ使います。例：#2C71DE。

ピッカーにHexを入力してください。変換表にRGB・HSL・HSV・OKLCH・CMYKが自動で表示され、すぐにコピーできます。

HSLは白や黒との混ざり具合である「明度（Lightness）」を、HSB（HSVとも呼ばれる）は「明るさ（Brightness/Value）」を使います。どちらも色相と彩度から始まりますが、3つ目の軸の計算方法が異なるため、同じ色でもモデルによって数値が変わります。

OKLCHは知覚に基づく色空間で、L（明度）・C（彩度）・H（色相）が実際の見え方に合わせて調整されています。RGBは画面の光（赤・緑・青）を表し、HSLは同じモデルを直感的に並べ替えたものですが、どちらも同じ明度の2色が同じ明るさに見えることは保証しません。OKLCHはそれを保証するため、より均一なパレットや自然なグラデーションを作れます。

CMYK（シアン・マゼンタ・イエロー・ブラック）は紙にインクを重ねる印刷のモデルです。モニターは光であるRGBで動作します。CMYKコードは、印刷用のデータや入稿用PDFを準備するときのために表示しています。画面上では、引き続きRGB・Hex・HSL・OKLCHが適切な形式です。

ピッカーのスポイトを使えば、画面上の任意のピクセルの色を取得できます（デスクトップ版ChromeとEdge）。色が写真の中にある場合は、画像カラーピッカーにアップロードしてください。

関連ツール