すべてのツール

MEDIA / 032

HEX・RGB・HSL変換

HEX、RGB、HSLを相互変換して色を確認します。

プライベート作業領域入力内容はこの端末に残り、可能な限りブラウザ内で処理されます。
#D9FF68
Color values
#D9FF68
rgb(217, 255, 104)
hsl(75, 100%, 70%)

ガイド / 01

どんなときに役立ちますか?

デザインの#D9FF68をCSSのrgb()やhsl()に直したり、色の成分を調整しながら同じ色の別表記をコピーしたりできます。

ガイド / 02

クイックガイド

  1. カラーピッカーを使うか、有効な3桁・6桁のHEX、RGB、HSLを入力します。
  2. 1つの形式の値を変え、プレビューとほかのHEX・RGB・HSL値が更新されることを確認します。
  3. 結果をコピーし、使用先のブラウザーやデザインツールで実際の背景と組み合わせて比較します。

確認

結果を確認する

#FF0000がrgb(255, 0, 0)とhsl(0, 100%, 50%)になることを原色の例で確認できます。

制限

知っておきたい制限

アルファ透明度、CMYK、LAB、広色域プロファイルには対応せず、一般的なsRGB表示色を想定します。HSLとRGBの相互変換では整数への丸めで成分がわずかに変わる場合があります。

よくある質問

よくある質問

同じHEXでも画面によって違う色に見えますか?

はい。モニターの調整、明るさ、周囲の色、ブラウザーの色管理が見え方に影響します。このツールは数値の表記を変えるもので、ディスプレイの色を補正するものではありません。

入力データは外部に送信されますか?

いいえ。作業データはブラウザ内で処理され、広告リクエストに含まれません。