🎨カラー変換
読み込み中...
ウェブ開発やデザインでは、色が複数の形式で表現されます。CSSでは主にHEX (#FF5733)やRGBが使われますが、デザインツールではHSLやHSV、印刷物ではCMYKが好まれます。このツールは1つの形式を入力するだけで、他のすべての形式へ瞬時に変換します。
使い方
- 1色を入力
HEX、RGB、HSLのいずれかの形式で値を入力するか、カラーピッカーで色を視覚的に選択します。
- 2変換結果を確認
入力された色が、HEX, RGB, HSL, HSV, CMYKの各形式に同時に変換されます。
- 3CSSコードを使用
下部にそのまま使えるCSSスニペットが表示されます。スタイルシートへ直接コピー＆ペースト可能です。
- 4プレビュー確認
選択した色がプレビューエリアに表示され、実際の見え方を確認できます。
ヒント
- 💡HSL形式は、HEXやRGBよりも色相・彩度・明度の調整が直感的に行えます。
- 💡ウェブアクセシビリティのため、背景色と文字色のコントラスト比にも注意しましょう。
- 💡CSS変数ではHSLを使うと、一部の値を変更するだけでカラーバリエーションを簡単に作れます。
- 💡CMYK値を確認することで、画面（RGB）と印刷物の色の出方の違いを予測できます。