HEX・RGB・HSL・CMYKの違いと使い分け
カラーコードには用途に応じた複数の形式があります。Web開発ではHEX・RGB・HSL、印刷デザインではCMYKが主流です。形式の特性を理解することで、ツール間の色の転用がスムーズになります。
HEX・RGB・HSLのWeb用途
HEX(#FF5733)はCSSで最も使われ、コンパクトで可読性が高いです。RGB(rgb(255,87,51))は数値操作やJavaScriptでの動的な色生成に向いています。HSL(hsl(11,100%,60%))は人間の直感に近く「同じ色相で明るくする」「彩度を下げる」操作が簡単です。TailwindCSSのカスタムカラーはHSLで管理するのが推奨されています。
CMYKとはなぜ印刷向けなのか
CMYKはシアン・マゼンタ・イエロー・キープレート(黒)の4色インクの混合量を表します。光の3原色(RGB)と異なりインクの混色(減法混色)で色を作るため、印刷物には物理的に対応する形式です。モニター上のRGB色はCMYKに変換すると彩度が落ちることがあるため、印刷物のデザインは最初からCMYKで作業することが推奨されます。
CSS名前付き色の活用
CSSでは約140種類の名前付き色(red・tomato・steelblue・coral・lavenderなど)が定義されています。チームのコミュニケーションでHEXコードより直感的で、デザインレビューや仕様書に使いやすいです。Color Format ConverterではCSS名前付き色を入力して各形式に変換できます。
スポイトで画面から色を取得(デスクトップ版)
デスクトップ版ではEyeDropper APIを使って画面上の任意のピクセルから色を取得できます。参考サイトや画像から使いたい色を直接ピックしてすべての形式に変換できるため、デザインリファレンスからの色の転用が格段に楽になります。