色変換のやり方｜HEX・RGB・HSLと透明度の注意点

CSSや資料に使う色コードをそろえたい人は、元の数値、透明度、貼り付け先の形式を順に確認します。色変換ツールでまず#3acを入力し、#33aaccとrgb(51, 170, 204)が同じ色を表すことを検算してください。

HEX・RGB・HSLの選び方

## HEXを10進数へ変換して検算する #RRGGBBのRRが赤、GGが緑、BBが青です。#3acを#33aaccへ展開する操作は情報を失いません。#3aacはCSSでは#33aaaaccというアルファ付きの色になり、同じ不透明色の短縮形として扱うと取り違えます。

HSLの明度とコントラストを混同しない

HSLのHは色相、Sは彩度、Lは明度です。このツールでは色相に0以上の安全な整数を入力し、360で折り返します。S・Lは0〜100の整数です。色相210・彩度100%・明度50%は、8bit RGBへ丸めると#0080ffになります。

HSLのLはWCAGの相対輝度とは別の値です。例えばhsl(60,100%,50%)の黄とhsl(240,100%,50%)の青は、同じLでも白背景でのコントラストが異なります。文字に使う前にはコントラスト比ガイドとチェッカーで実際の組を測ります。

入力できる形式・できない形式を確認する

入力にエラーがある間は、他の欄に直前の値が残っていてもコピーは無効です。正しい形式へ直すか、カラーピッカーで選び直します。出力するHSLは整数丸めを含むので、往復変換で元のRGBに戻るとは限りません。#33aacc → hsl(193,60%,50%) → #33abccがその例です。

半透明色は背景との合成から考える

アルファαの前景を不透明な背景に重ねる単純な合成では、各成分を「α×前景＋(1−α)×背景」で求めます。sRGB成分を使う通常の合成例では、50%の赤rgb(255,0,0)を白に重ねると、各成分を8bitへ丸めてrgb(255,128,128)、約#ff8080です。#ff000080のαは128/255で、正確な0.5とは異なります。

背景画像・グラデーション・blend-modeがある画面では、重なりの位置と合成条件も確認します。配色候補の作り方は配色ガイドとパレット生成へ進めます。

便利ツールカテゴリからも開けます。お気に入りは同じブラウザのマイツールから再訪するための入口です。色コードの控えは制作ファイルに残してください。

Tools Hub編集部が2026年11月8日にCSSの出典と入力・コピー・丸めの例を照合しました。

よくある質問

3桁のHEXはどのように展開しますか？

#3acは各桁を2回並べて#33aaccです。33は51、aaは170、ccは204なのでrgb(51, 170, 204)になります。

4桁・8桁HEXやrgba()を入力できますか？

CSSでは使える表記ですが、このツールは透明度を持たない色だけを扱います。アルファ付きの入力はエラーになります。背景色を含めて表示色を確認してください。

HSLをコピーして戻すと色が少し変わるのはなぜですか？

HSL出力の色相・彩度・明度を整数に丸めるためです。#33aaccはhsl(193, 60%, 50%)と表示され、戻すと#33abccになります。元の8bit値を残すならHEXかRGBをコピーします。

エラーが出たときに結果をコピーできますか？

入力エラー中はコピーが無効になります。RGBは各0〜255、彩度・明度は0〜100%の整数で入力し直してください。正しい入力に戻ると再びコピーできます。

@misc{tools_hub_color_conversion_guide_2026,
  author = {{Tools Hub編集部}},
  title = {色変換のやり方｜HEX・RGB・HSLと透明度の注意点},
  year = {2026},
  url = {https://the-tools-hub.net/blog/color-conversion-guide/}
}