カラーコード変換ツールとは？
カラーコードコンバーターは、任意の色値を HEX・RGB・HSL・CMYK・HSV に同時変換します。コードを入力するか、rebeccapurple のような CSS カラー名を貼り付けるか、スウォッチをクリックして視覚的に色を選べば、他の形式すべてが即座に更新され、スタイルシートや印刷入稿に必要な形式をそのままコピーできます。
#FF5733、rgb(255,87,51)、hsl(11,100%,60%)、cmyk(0%,66%,80%,0%)、hsv(11,80%,100%) など任意の形式、あるいは tomato、cornflowerblue のような CSS カラー名を入力または貼り付けてください。ツールが形式を判定し、残り 4 形式を埋めます。横のスウォッチで解釈が正しいかをすぐ確認でき、クリックすると端末標準のカラーピッカーが開いて任意の色を視覚的に選べます。デザインファイルが 1 つの形式で、スタイルシートやデザインソフト、印刷所が別の形式を要求する場面で活躍します。
使い方
- ステップ1 - 任意の形式でカラー値、または tomato のような CSS カラー名を入力します（例：#FF5733、rgb(255,87,51)、hsl(11,100%,60%)）。
- ステップ2 — 入力形式が自動検出され、他のすべての形式にリアルタイムで変換されます。
- ステップ3 - 変換された値をクリックしてコピーするか、カラープレビューをクリックして視覚的なピッカーを開き、新しい色を選びます。
使用するタイミング
- 印刷入稿前にブランドHEXをCMYKへ変換する。
- スクリーンショットから読み取ったRGBをCSS用のHEXに戻す。
- デザイナーから届いたHSLの色相が、ブランドガイドのHEXと一致するか確認する。
結果
ウェブ開発者がデザインファイルからブランドカラー #2196F3 を持っており、CSSアニメーション用のRGB値が必要な場合、ツールがすぐに rgb(33, 150, 243) とHSL・CMYK換算値を表示します。
よくある質問
- 印刷ソフトのCMYKと数値がわずかにズレるのはなぜ?
- 画面はRGBの加法混色、印刷はCMYKの減法混色。ここでは標準式で換算しますが、商業印刷プロファイル(Coated FOGRA39、GRACoLなど)は実際のインクと紙に合わせて数%調整します。出力CMYKは近似のスタートポイントとして扱ってください。
- #ZZZ のような無効な値を入力するとどうなりますか?
- 他の形式欄は空のまま、スウォッチも色なしです。HEX、RGB、HSL、CMYKのどれかと正しく一致したときだけ出力が更新されるので、誤解を招く中途半端な変換結果が表示されることはありません。
- #F53 のような3桁HEXも認識しますか?
- 認識します。3桁HEXは6桁の省略表記で、#F53 は #FF5533 と同じです。どちらでも入力可能で、出力は常に6桁の完全形式にそろうため、他の場所に貼ったときに曖昧さが残りません。
- HSL と HSV は何が違うのですか?
- どちらも先頭は色相ですが、HSL は黒〜白で明度を示し、HSV（別名 HSB）は純色を基準に明るさを示します。本ツールは現在 HSL と HSV を並べて表示します。CSS は HSL、Photoshop は HSV を使うため、デザイナーは両者を行き来して換算することが多いからです。
- 透明度(アルファ)に対応していますか?
- 本コンバーターでは未対応です。ここでのHEX、RGB、HSL、CMYKはすべて不透明値として扱われます。透明度を含めたい場合は8桁HEX(#RRGGBBAA)や rgba() を使用してください。これら2つは本ツールが対応する4形式の外側です。