カラーコード変換(HEX・RGB・HSL)
色をHEX(#ff8800)・RGB・HSLの間で相互に変換します。色見本も表示します。Webデザインやコーディングに。
カラーコード変換について
色の表し方には、HEX(#ff8800)・RGB(rgb(255, 136, 0))・HSL(hsl(32, 100%, 50%))などがあります。Webデザインやコーディングで、色の表現を相互に変換したいときに使えます。
いずれかの形式で色を入力すると、ほかの形式に変換して、色見本も表示します。HEXは赤・緑・青の各0〜255を16進数2桁で表し、HSLは色相・彩度・明度で色を表します。色の調整には、HSLのほうが直感的です。
こんなときに使えます
- デザインツールのRGB値を、CSSのHEXコードに直す
- HEXコードの色を、HSLで少しずつ調整する
- 色見本を見ながら、色の表記を確認する
使うときのポイント
- #fff は #ffffff の省略形
- 同じ色相で、明度や彩度だけ変えると、統一感のある配色になる
計算例
入力欄の初期値のまま計算すると、次の結果になります。条件は、色(HEX・rgb()・hsl()のいずれか)が#2f6fedです。数値を変えると、この結果もそれに合わせて変わります。
| HEX | #2F6FED |
|---|---|
| RGB | rgb(47, 111, 237) |
| HSL | hsl(220, 84%, 56%) |
使い方
- 色のコードを入力します(HEX・rgb()・hsl()のどれでも可)。
- ほかの形式に変換した値と、色見本が表示されます。
計算方法・仕組み
HEXは赤・緑・青の各0〜255を16進数2桁で表したものです。HSLは色相(0〜360度)・彩度・明度で色を表します。
知っておきたい基礎知識
Webデザインでは、色をHEX(#ff8800)、RGB(rgb(255, 136, 0))、HSL(hsl(32, 100%, 50%))など、複数の形式で表します。HEXとRGBは、赤・緑・青の光の強さ(0〜255)を表したもので、同じ色を16進数と10進数で書き分けているだけです。HSLは、色相・彩度・明度で表すため、色味を直感的に調整しやすい形式です。
色を少し明るくしたい、彩度を下げたいといった調整は、HSLのほうが、簡単です。たとえば、同じ色相で、明度だけを変えると、統一感のある濃淡が作れます。デザインツールや、CSSでは、形式を自由に使い分けられるため、変換ツールがあると、コードの書き換えが、楽になります。
間違えやすいポイント
- HEXの3桁表記(#f80)は、6桁(#ff8800)の、省略形
- 画面で見える色は、モニターの設定で、異なる。印刷には、CMYKなど、別の色空間が使われる
- 透明度(アルファ値)を含む形式は、書き方が、複数ある
よくある質問
- 白と黒のコードは?
- 白は、#ffffff(RGBで255, 255, 255)、黒は、#000000(RGBで0, 0, 0)です。
- HSLの色相の値は、どう決まりますか?
- 色相環の角度(0〜360度)で表します。0度が赤、120度が緑、240度が青です。