カラーピッカー オンライン色を選んで、変換して、チェックして、書き出す。

「画像」タブを開いて写真やスクリーンショットを選び(または貼り付け)、任意のピクセルをクリックまたはタップします。ルーペで今どのピクセルにいるかが正確にわかり、3×3〜11×11の範囲を平均することもできます。画像はブラウザで読み込まれ、お使いのデバイスから外に出ません。

はい。スポイトに対応したブラウザ(デスクトップのChrome、Edgeなどのブラウザ)なら可能です。「スポイト」をクリックし、ブラウザのウィンドウ外も含めて画面上の任意のピクセルをクリックします。その他のブラウザでは、スクリーンショットを撮って「画像」タブに貼り付けてください。

カラー欄にHEXコードを入力または貼り付けると、下にRGB値が表示され、すぐにコピーできます。多数の色を一度に変換するには、「変換」タブに1行1色で貼り付け、出力形式を選んでください。

HEX(3・4・6・8桁)、RGB、HSL、HSV/HSB、HWB、OKLCH、OKLab、CMYK、さらにすべてのCSS色名に対応しています。「255, 87, 51」のように、関数名なしで値を貼り付けることもできます。

OKLCHは、知覚される明度、彩度(鮮やかさ)、色相で色を表します。等間隔のステップが見た目にも等間隔になるため、シェードスケールや統一感のあるパレットに最適で、最新のCSSではoklch()として使えます。

テキストと背景のWCAG 2コントラスト比を計算し、通常テキスト、大きなテキスト、UI要素についてAAとAAAを満たすかを表示します。WCAG 3草案のAPCA明度コントラスト(Lc)も表示し、基準を満たす最も近い色を提案します。

ベースの色を選び、「配色」で補色やトライアドなどの配色を、「シェード」でティント、シェード、50〜950スケールを作ります。写真からパレットを抽出することもできます。お気に入りを保存し、コードとして書き出しましょう。

はい。「書き出し」タブで、パレットをCSS変数、SCSS、Tailwind v4の@themeまたはv3の設定、SwiftUI、UIKit、Androidのcolors.xml、Jetpack Compose、JSON、GIMPパレット、シンプルなHEXリストとして出力できます。コピーするかファイルをダウンロードしてください。

はい。無料で、登録不要、制限なし、ウォーターマークもなく、すべてブラウザ上で動作します。