🎨カラー変換

使い方

1. 1
   色を入力

   HEX、RGB、HSLのいずれかの形式で値を入力するか、カラーピッカーで色を視覚的に選択します。

2. 2
   変換結果を確認

   入力された色が、HEX, RGB, HSL, HSV, CMYKの各形式に同時に変換されます。

3. 3
   CSSコードを使用

   下部にそのまま使えるCSSスニペットが表示されます。スタイルシートへ直接コピー＆ペースト可能です。

4. 4
   プレビュー確認

   選択した色がプレビューエリアに表示され、実際の見え方を確認できます。

ヒント

• 💡HSL形式は、HEXやRGBよりも色相・彩度・明度の調整が直感的に行えます。
• 💡ウェブアクセシビリティのため、背景色と文字色のコントラスト比にも注意しましょう。
• 💡CSS変数ではHSLを使うと、一部の値を変更するだけでカラーバリエーションを簡単に作れます。
• 💡CMYK値を確認することで、画面（RGB）と印刷物の色の出方の違いを予測できます。