カラーピッカー

カラーピッカーとは

カラーピッカーとは、画面上の色をHEX・RGB・HSL・CMYKなどのカラーコードとして数値化して取得したり、逆にコードから色を作成したりするためのツールです。Webデザインで CSS に色を指定するときや、デザインカンプの配色を再現したいときなどに使います。本ツールはブラウザ内で完結し、入力した色や画像はサーバーに送信されません。

主な使い方

HEXコードやRGB値から色を作る

たとえばHEX欄に 4262FF と入力すると、自動的に RGB(66, 98, 255) ・HSL(231°, 100%, 63%) ・CMYK(74%, 62%, 0%, 0%) に変換されます。RGB・HSL・CMYKのいずれかの数値やスライダーを操作しても、他のすべての形式がリアルタイムで再計算されます。

カラースウォッチで直感的に選ぶ

左上の色見本をクリックすると、OS標準のカラーピッカーが開きます。マウスで選ぶだけで、数値入力なしに好きな色を作れます。

画像から色を抽出する(スポイト)

「画像からスポイト」欄で画像をアップロードすると、画像上にマウスを乗せた位置の色をリアルタイムにプレビューできます。クリックで確定すると、そのピクセルの色がHEX/RGB/HSL/CMYKに反映されます。ロゴやデザインカンプから正確な配色を抽出したいときに便利です。

HEX・RGB・HSL・CMYKの違い

HEX(16進数カラーコード)

#RRGGBB の形式で赤・緑・青の各成分を00〜FFの16進数2桁で表します。CSSやHTMLで最もよく使われる形式です。

RGB(光の三原色)

赤・緑・青を0〜255の数値で指定します。ディスプレイの発光量に対応するため、Web/デジタル用途で直感的です。

HSL(色相・彩度・明度)

色相(Hue) 0〜360°・彩度(Saturation) 0〜100%・明度(Lightness) 0〜100%で指定します。同じ色相のまま明るさだけ変えたいときに便利です。

CMYK(印刷用インク)

シアン・マゼンタ・イエロー・キー(黒)の4色インクの掛け合わせ量を0〜100%で指定します。印刷物の色指定で使われますが、RGBからの変換値はあくまで目安で、実際の印刷結果はインクや紙質によって変わります。

このツールの特徴

• HEX・RGB・HSL・CMYKを常にリアルタイムで相互変換。どの形式を編集しても他の形式に即反映
• 選択中の色を画面全体の背景にリアルタイム表示。配色の見え方をその場で確認できる
• color: / background-color: のCSSスニペットをワンクリックでコピー
• 画像をアップロードしてスポイトで任意のピクセルの色を抽出
• 作成した色を保存してワンクリックで呼び出し。URLに ?hex= が自動反映されるため色付きページをそのまま共有可能

よくある質問