RGB を HSL に変換
赤・緑・青の値を色相・彩度・輝度に変換して、CSSでの色の調整をもっと簡単にします。
ファイルはお使いのデバイスから外に出ません完全無料
#FF3D72
rgb 入力
結果 · HSL
hsl(344, 100%, 62%)
HEX
#FF3D72
RGB
rgb(255, 61, 114)
HSV
hsv(344, 76%, 100%)
CMYK
cmyk(0%, 76%, 55%, 0%)
使い方: RGB を HSL に変換
- 1
色を入力する
カラーコードを入力するか、カラーピッカーで色を選びます。各フィールドには表示されている形式で入力できます。
- 2
変換結果を確認する
入力と同時に結果が更新され、色のライブプレビューも表示されます。
- 3
コードをコピーする
必要な値をワンクリックでコピーし、デザインや CSS、印刷設定に貼り付けます。
RGBとHSLの違い
RGBは3つの光のチャンネルで色を作るため、画面には適していますが、手作業での調整は困難です。rgb(255, 61, 114)を少し暗くするには、3つの数値をすべて変える必要があります。HSLは同じ色を、カラーホイール上の0〜360°の角度である色相と、パーセントで表す彩度と輝度で表します。先ほどのピンクはhsl(344, 100%, 62%)になります。
この構造のおかげで、HSLは色のバリエーションやテーマづくりに最適です。色相と彩度を保ったまま輝度を下げればホバー時や押下時の色に、上げれば淡い背景色に、彩度を下げれば落ち着いた色になります。最新のブラウザはすべてCSSのhsl()に対応しているので、結果をそのまま貼り付けられます。このツールは値を整数に丸めるため、元に戻すとチャンネルが1段階ずれることがあります。
すべての処理はブラウザ内で完結します。画像がサーバーにアップロードされることはありません。