カラーコード変換ツール

ステップ 1 / 2

色の値

色をHEX（#ff6600や#f60）、rgb(255, 102, 0)、カンマ区切りの255, 102, 0、またはhsl(24, 100%, 50%)で貼り付けると、変換ツールが他の2つの形式ですぐに返します。ライブのカラースウォッチプレビュー付きで、形式ごとにワンクリックでコピーできます。

カラーコード変換の仕組み

1

対応形式で色を入力する

HEX（#abc、#abcdef）、rgb(r, g, b)、カンマ区切りのr, g, b、またはhsl(h, s%, l%)に対応しています。
2

内部表現として解析する

ツールは値を内部でRGBに変換し、そこからHEXとHSLの相当値を導き出します。
3

すべての形式を表示する

対応するHEX、RGB、HSLの文字列が並んで表示されます。
4

ライブプレビューのスウォッチ

変換後の色が一目でわかるので、コピーする前に確認できます。

HSV、CMYK、LAB、LCH、OKLCHなどの形式はデザインツールにあります。これらは同じ色を別の方法で表したものですが、この変換ツールは上記の3つの基本Web形式に特化しています。

HEX、RGB、HSLの間の変換は正確です。HEXとRGBは同じ色モデルで、HSLは標準的な式でRGBから導き出されます。
HSLの値は整数に丸められるため、往復変換で最後の桁がずれることがあります。見た目の色は同じです。ビット単位で正確なコピーが必要な場合はHEXを使ってください。

幅広い互換性を求めるならHEXまたはrgb()。読みやすさを重視するならhsl()。最新ブラウザはoklch()などの形式もサポートしていますが、HEXが最も安全な既定の選択肢です。

いいえ、変換ツールは不透明な色のみを受け付けます。3桁または6桁のHEXと、アルファチャンネルなしのrgb()、hsl()です。rgba()や8桁のHEXはCSSで直接使ってください。

いいえ、変換ツールが受け付けるのは3つの数値形式だけです。色名はカラーピッカーやオンラインの変換で先にHEXにしてください。

HSLは色相・彩度・明度を整数で表示するため、往復変換で値が1ポイントずれることがあります。見た目の色は同じです。正確なコピーが必要な場合はHEXを使ってください。