カラーコード変換

HEXからRGBへの変換方法（計算式）

HEXコードは「#」の後に赤・緑・青をそれぞれ16進数2桁で並べたものです。#F97316なら、F9が赤、73が緑、16が青です。16進数の2桁は「1桁目×16+2桁目」で10進数に直せます。

F9は15×16+9=249、73は7×16+3=115、16は1×16+6=22なので、#F97316はrgb(249, 115, 22)になります。逆にRGBからHEXへは、各値を16で割った商と余りを16進数の文字（0から9とAからF）に置き換えます。

3桁の短縮形は各桁を2回繰り返したものと同じ意味です。#F00は#FF0000、#ABCは#AABBCCになります。このツールでは3桁でも6桁でも、#があってもなくても入力できます。

HSLの色相・彩度・明度の意味と使い方

HSLは色相（Hue）・彩度（Saturation）・明度（Lightness）で色を表す方式です。色相は0から360度の角度で、0が赤、120が緑、240が青です。彩度は0%で灰色、100%で最も鮮やかな色になり、明度は0%が黒、100%が白、50%が最も純粋な色になります。

HSLの利点は、人間の感覚に近い調整ができることです。ボタンのホバー色を作るなら色相と彩度はそのままで明度だけを10%ほど下げる、同系色のパレットを作るなら色相を固定して彩度と明度を変える、という操作が数値で直感的に行えます。

補色は色相に180を足した色、類似色は色相を30度ほど動かした色です。HSLタブで色相だけを変えてHEXに変換すれば、配色案をすぐにCSSに反映できます。色相は360を超えると一周して0に戻るので、180を足して360を超えたら360を引いてください。

CSSの色指定の書き方一覧

CSSでは同じ色を複数の書き方で指定できます。最も短いのはHEXで、透明度が必要なときは8桁のHEXやrgb()の4番目の値を使います。新しい記法ではrgb(255 0 0 / 50%)のようにスペース区切りで書けます。

red、tomato、steelblueのような色名も使えますが、種類が限られ細かい調整ができないため、デザインでは主にHEXかHSLが使われます。このツールはHEX・RGB・HSLの3形式を同時に表示するので、CSSに貼る形式を選ぶだけで済みます。

• #RRGGBB、#RGB（HEX表記）
• #RRGGBBAA（透明度付きHEX）
• rgb(255, 0, 0)、rgba(255, 0, 0, 0.5)
• hsl(0, 100%, 50%)、hsla(0, 100%, 50%, 0.5)
• 色名（red、white、transparent、currentColor）

色コード変換で色がずれる理由（丸め誤差）

HEXとRGBは同じ数値を表記し直しているだけなので、相互に変換しても値は変わりません。一方HSLは計算で求めるため、整数に丸める段階でわずかな誤差が出ます。HSLからRGBに変換し、そのRGBをHSLに戻すと、元の値と1ほどずれることがあります。

このツールはHSLの各値を整数で扱います。デザインツールで小数を含むHSL値を見た場合は、HEXの値を基準にして受け渡すと、ツール間で色が一致します。最終的にCSSへ書くときも、HEXかRGBを正としておくのが無難です。

画面の色はディスプレイの設定によって見え方が変わり、印刷物はCMYKという別の方式で色を作るため、同じHEXでも仕上がりが異なります。ブランドカラーを紙とWebで合わせる場合は、印刷用の指定を別に用意するのが一般的です。