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名前付き色を入力して各形式に変換できます。たとえば「tomato」はHEXで#FF6347・RGBではrgb(255,99,71)に対応し、名前から正確なコードが確認できます。CSS4で新たに追加されたrebeccapurple（#663399）やmediumspringgreen（#00FA9A）などの色名も含まれます。ただし業務用デザインシステムでは意味のある名前（--color-brand-primary・--color-error）で管理するのが保守性の観点から推奨されます。名前付き色はプロトタイピングや学習用途では手軽に使えます。
スポイトで画面から色を取得（デスクトップ版）
デスクトップ版ではEyeDropper APIを使って画面上の任意のピクセルから色を取得できます。参考サイトや画像から使いたい色を直接ピックしてすべての形式に変換できるため、デザインリファレンスからの色の転用が格段に楽になります。Webブラウザ版のEyeDropper APIはChrome 95+とEdgeで対応していますが、スポイトの範囲がブラウザウィンドウ内に限られます。デスクトップ版ではOSレベルのスクリーンキャプチャAPIを利用するため、他のアプリケーション（Figmaの作業ファイル・デザイン参考画像など）の画面からも色を取得できます。常に最前面に表示してスポイトモードを維持できるため、デザインリファレンス確認とカラーコード取得を往復する手間を省けます。