カラーピッカーとは？

カラーピッカーを使うと、数値を入力する代わりに、見た目で色を選べます。ほとんどのデザインアプリでは、同じようなレイアウトが使われています。色相スライダーで虹の中から基本色を選び、その横にある四角形で、その色相の強さ（左から右へ変化する彩度）と明るさ（上から下へ変化）を設定します。このレイアウトはHSV色モデルを表しており、画面に表示できるすべての色がその中に位置します。

ツールの説明

四角形と色相スライダーをドラッグして色を探すか、すでに使いたい色がある場合は、HEX、RGB、HSLなどの形式で入力または貼り付けてください。ChromeとEdgeでは、スポイトボタンを使って、ブラウザーの外も含め、画面上のどこからでも色を選べます。透過色にするには不透明度を設定し、必要な形式で結果をコピーします。HEXはCSSやほとんどのデザインツール向け、RGBとHSLはCSS向け、HSVはデザインアプリ向け、OKLCHは最新のCSS向け、CMYKは印刷用の出発点として使えます。

機能

  • 彩度と明るさを調整する四角形と色相スライダー。マウス、タッチ、またはキーボードで操作可能
  • ChromeとEdgeで使える画面上のスポイト
  • HEX、RGB、HSL、HWB、CMYKなどの形式で色を入力または貼り付け
  • 透明度グリッド上に表示される不透明度
  • コピーしてすぐ使えるHEX、RGB、HSL、HSV、OKLCH、CMYKの値
  • 選択した色の形式一覧から、HWB、LAB、LCH、XYZなどの形式も利用可能
  • ブラウザー上で動作

仕組み

このツールでは、色を色相、彩度、明度として保持するため、白、黒、またはグレーに向かってドラッグしても、色相は設定した位置に保たれます。ほかの形式はこの色をもとに計算されます。HEXとRGBは0から255までの整数に、HSLとHSVは整数の角度とパーセントに丸められ、OKLCHはsRGB色空間を介して変換されます。不透明度が100%未満の場合、HEXには4組目の数字が追加され、CSS形式にはアルファ値が追加されます。CMYKにはアルファ値がなく、プリンタープロファイルを使わない簡易的な変換です。

ヒント

  • rgba()のように、貼り付けた色に設定されている不透明度は引き継がれません。不透明度欄で設定してください。
  • 四角形またはスライダーをクリックし、矢印キーを使うと1%ずつ、Shiftキーを押しながら使うと10%ずつ移動できます。
  • 写真やスクリーンショットの色を調べるには、画像そのものを読み取る「画像の色選択ツール」を使ってください。
  • 同じ色でも印刷機や用紙によって仕上がりが異なることがあるため、使用するCMYK値は印刷会社に確認してください。