カラーコード変換とは？
Webデザインや開発で使うHEX（#1b2433）・RGB・HSLの色表記を相互に変換します。カラーピッカーで色を選ぶかコードを入力すると、すべての形式の値に加えて、明るさの段階パレットや白・黒背景とのコントラスト比も確認できます。
使い方
- 1
カラーピッカーで色を選ぶか、HEX・RGB・HSLのいずれかを入力してください。
- 2
変換されたコードを必要な形式でコピーしてください。
- 3
下のパレットで明るさの段階をクリックするとその色に切り替わります。
活用例
デザインカンプ → CSS
デザインツールのHEX値をrgb()やhsl()に変換して透明度の調整に使います。
ボタン色のアクセシビリティ確認
白い文字とのコントラスト比が4.5:1以上か確認し、読みやすいボタン色を選びます。
よくある質問
どの形式を入力できますか？+
#abc、#aabbcc、rgb(10, 20, 30)、hsl(210, 50%, 40%)の形式を認識します。