ユーティリティ

色変換

HEX・RGB・HSL形式の相互変換。カラーピッカーから直接選択もできます。

最終更新日: 2026-08-11

シェアX f B!L

#8b5cf6

HEX

RGB

HSL

使い方

デザインツールのHEX値を、CSSにそのまま使えるRGBやHSLに変換できます。

ブランドカラーを各形式に変換して、Web・印刷・資料で一貫させます。

ツールごとに求められる色形式の違いを、その場で解決できます。

WebデザインやUI実装では、色をHEX（#ff0000）、RGB（rgb(255, 0, 0)）、HSL（hsl(0, 100%, 50%)）などの形式で指定します。ツールや環境によって必要となる形式は異なるため、相互変換が頻繁に必要になります。

カラーピッカーから直接色を選ぶこともできます。選択した色は3つの形式すべてに即座に変換され、それぞれワンクリックでコピーできます。

HSL形式は色相（Hue）、彩度（Saturation）、明度（Lightness）で色を表すため、色相環での調整や、同じ色相の濃淡バリエーションを作るのに適しています。

短縮HEX（#f00）も変換できますか?

はい。#f00のような3桁の短縮HEXも自動的に展開して変換します。

アルファ値（透明度）は扱えますか?

現在は不透明色のみ対応しています。アルファ値付きのRGBA・HSLA形式には対応していません。

色の名前（redなど）は使えますか?

現在はHEX・RGB・HSLの形式のみ対応しています。