HEX・RGB・HSL・HSVカラー変換

活用例

• CSS色形式を変換

  デザインのHEX値をrgba()やhsla()へ変換してWebスタイルに使います。

• 色チャンネルを確認

  1つの色のRGB、HSL、HSV、アルファ値を並べて比較します。

よくある質問

透明度も一緒に変換されますか？

はい。アルファが1未満の場合、HEXは#RRGGBBAA、RGBとHSLはrgba()とhsla()で出力します。

どの入力欄を編集すればよいですか？

HEX、RGB、HSL、HSVのどの欄でも編集できます。有効な値を入力すると、ほかの形式とプレビューが更新されます。

関連ツール

• カラーピッカー | 画像・画面から色を取得HEX、RGB、HSLを相互変換し、アップロード・貼り付け画像のピクセルや対応ブラウザの画面から色を取得します。
• WCAGカラーコントラスト確認前景色と背景色のHEXからWCAG 2.xのコントラスト比を計算し、通常・大きな文字のAA・AAA適合を確認します。
• 線形・放射CSSグラデーション生成線形・放射グラデーションの方向、形、カラーストップ、位置を視覚的に編集し、background CSSをコピーします。
• CSSボックスシャドウ生成オフセット、ぼかし、広がり、色、不透明度、内側シャドウを視覚的に調整し、重ねたCSS box-shadowを作成します。