ホーム 色の変換
色の変換
#RGBは各桁を二つにして #RRGGBB に伸ばします。#ff0000は rgb(255, 0, 0)、hsl(0, 100%, 50%)です。色はこのブラウザにだけあります。
作った理由
デザインとスタイルシートは、同じ色を #ff0000、rgb(255, 0, 0)、hsl(0, 100%, 50%) のように書き分けます。
短い #abc を六桁に伸ばしてから整数の HSL に戻すと、チャンネルが1ずれることがあります。
-
01使い方
HEX、RGB、HSLのどれかを直すと、残りの二つと色の面が一緒に変わります。
色の面はその HEX を背景に塗ります。結果をコピーすると HEX、rgb()、hsl() の三行がクリップボードに入ります。
タブを閉じると色は消えます。このページは透明度の桁を読みません。
-
02出力例
#ff0000、#00ff00、#0000ffは hsl(0, 100%, 50%)、hsl(120, 100%, 50%)、hsl(240, 100%, 50%) で、それぞれ同じ HEX に戻ります。
#fffは #ffffff、rgb(255, 255, 255)、hsl(0, 0%, 100%) です。#000000は hsl(0, 0%, 0%) です。
入力#ff0000
#ff0000 rgb(255, 0, 0) · hsl(0, 100%, 50%) #00ff00 rgb(0, 255, 0) · hsl(120, 100%, 50%) #0000ff rgb(0, 0, 255) · hsl(240, 100%, 50%) #abc #aabbcc · 戻すと #a9bacb -
03知っておくこと
色相360は0と同じです。hsl(360, 100%, 50%) は #ff0000 です。
灰色の #808080 は彩度が0なので色相は0になります。明度50%を戻すと 128, 128, 128 です。
範囲外や小数のチャンネルは、その欄だけ誤りを出し、最後の色はコピーされません。
この変換は画面の sRGB です。印刷用の CMYK は出しません。
よくある質問
- Q#f00は #ff0000 ですか？
- Aそうです。各桁を二つ書くと #ff0000 になります。
- Q#abcを HSL から戻すと同じ HEX ですか？
- Aいいえ。hsl(210, 25%, 73%) は #a9bacb に戻ります。
- Q八桁の HEX も読めますか？
- A読めません。#RGB と #RRGGBB だけを読みます。
- Q色は保存されますか？
- Aしません。このブラウザの中だけで計算し、サーバーへは送りません。
このページの分け方
このページは HEX、RGB、HSL を同じ sRGB の色に変えます。#RRGGBB は赤、緑、青を二桁で書きます。#ff0000 は rgb(255, 0, 0)、hsl(0, 100%, 50%) です。#00ff00 は色相 120、#0000ff は色相 240 です。#RGB は各桁を二つにします。#abc は #aabbcc、つまり rgb(170, 187, 204) で、hsl(210, 25%, 73%) です。
HSL は CSS と同じ変換で、画面は色相、彩度、明度を整数に四捨五入します。その整数から戻すとチャンネルが 1 ずれることがあります。#abc の hsl(210, 25%, 73%) は #a9bacb に戻ります。#808080 は rgb(128, 128, 128)、hsl(0, 0%, 50%) で、再び #808080 です。色相 360 は 0 と同じなので、hsl(360, 100%, 50%) は #ff0000 です。
RGB の各チャンネルは 0 から 255 までの整数です。彩度と明度は 0 から 100 までです。八桁の HEX と小数は読みません。範囲を外れるとその欄だけ誤りを出し、最後の色はコピーされません。この変換は画面の sRGB で、印刷用の CMYK は出しません。色はこのブラウザの中だけで計算し、サーバーへは送りません。