カラー変換ツールとは？
カラーコンバーターは HEX・RGB・HSL・HSV・CMYK 形式を相互変換します。色を選ぶか値を入力すると、すべての形式でリアルタイムにプレビューできます。
ビジュアルなカラーホイールから選ぶか、HEX、RGB、HSL、HSV、CMYK の5つの連動フィールドのどこに入力しても、ほかのフィールドが即座に更新されます。HSV(HSB と表記されることもあり)を HSL と並べて用意してあるため、Photoshop や Sketch の値を扱うときも、純粋なCSSツールに無い形式のまま読み書きできます。
使い方
- ステップ1 — インタラクティブなカラーピッカーで色を選択するか、任意の形式フィールドに値を直接入力します。
- ステップ2 — すべての形式フィールドが一斉に更新され、各形式の対応する値が表示されます。
- ステップ3 — 任意の形式の値をコピーするか、カラーピッカーで微調整してください。各フィールドはリアルタイムで更新されます。
使用するタイミング
- ホイールで色をピックアップし、対応する CMYK をコピーして Illustrator に貼り付ける。
- Photoshop のパレットの HSV を調整し、CSS 用の HSL を読み取る。
- ピッカーをドラッグしながら毎回 HEX を控え、ゼロからパレットを組む。
結果
印刷デザイナーがウェブカラー rgb(0, 128, 255) のCMYK値を必要とする場合、ツールが cmyk(100%, 50%, 0%, 0%) に変換し、正確な印刷再現を可能にします。
よくある質問
- HSL と HSV、似ているのになぜ両方あるのですか?
- HSL は CSS や大半のWebツールに対応し、HSV(別名 HSB)は Photoshop、Sketch、macOS や Windows の標準カラーピッカーで主流です。デザイナーは日常的に両方を行き来するため、ツール側で両方を出して変換手間を省きました。
- ピッカーだけでなく、各フィールドを直接編集できますか?
- すべてのフィールドを編集できます。HEX を直接打ち込んだり、RGB / HSL / HSV / CMYK の数値を変えたりすると、ピッカーと他のフィールドが追随します。どこを変えても色は常に同期します。
- グレーのとき HSL の色相と彩度が0になるのはなぜ?
- 純粋な灰は色相を持たず彩度は0です。HSL では慣例上、彩度が0のときは色相も0として保存します。灰色はカラーホイール上の特定の位置を持たないためです。数学的には正しいのですが、「データが欠落している」と読み違えやすい値です。
- CMYK の K チャンネルとは何ですか?
- K は Key の頭文字で、実質的には黒インクのことです。CMY を混ぜて黒に近づけるよりも、K を加えるほうが高価なカラーインクを節約でき、CMY だけで作るとくすんだ茶色になりがちな問題も避けられます。K の値はツールが自動計算します。
- ピッカーはタッチ画面やスタイラスでも使えますか?
- 使えます。カラーピッカーはブラウザ標準の入力要素なので、マウス、指、スタイラス、トラックパッドのいずれでも操作可能です。スマホではタップでシステムのピッカーが、デスクトップではクリックでホイールが開きます。精密な値は数値フィールドの方が確実です。