カラーコード変換
HEX・RGB・HSLのカラーコードを相互変換します。処理はブラウザ内で完結し、入力内容はサーバーへ送信しません。
対応する書式は#rrggbb・#rgb形式のHEX、rgb(R, G, B)形式のRGB(0〜255の整数)、hsl(H, S%, L%)形式のHSLのみです。範囲外の値や対応していない書き方は自動補正せずエラーとして表示します。alpha(透過度)・CSS Named Colors・新しいCSS Color形式には対応していません。
このツールでできること
カラーコード変換にまつわる主な機能です。
- HEX・RGB・HSLのいずれかを入力すると、自動的に形式を判定して3形式すべてを表示します
- 入力した色をカラープレビューで確認できます
- 各形式を個別にコピーできます
- 入力・表示はブラウザ内で処理し、サーバーへ送信しません
手順を見る
- 入力欄にHEX・RGB・HSLいずれかのカラーコードを入力します
- 3形式の変換結果とカラープレビューがリアルタイムで表示されます
- 必要な形式の「コピー」ボタンでコピーできます
- 不要になったら「クリア」で入力内容を消せます
カラーコード変換ツールについて
詳しい仕様を見る
対応する3つの形式
#rrggbb・#rgb形式のHEX、rgb(R, G, B)形式のRGB(0〜255の整数)、hsl(H, S%, L%)形式のHSLに対応しています。入力した1つの色コードから、この3形式すべてへ同時に変換して表示します。alpha(透過度)・CSS Named Colors(red等)・hwb()やoklch()等の新しいCSS Color形式には対応していません。
受理する書き方(構文)
受理する書き方は意図的に絞り込んでいます。HEXは#が必須で3桁または6桁のみ、RGBはrgb(51, 102, 153)のようなカンマ区切りの整数のみ(小数・percentage・rgba()は非対応)、HSLはhsl(210, 50%, 40%)のようなカンマ区切りで彩度・明度に%が必須です(単位付きのHueやhsla()は非対応)。RGBの値が0〜255の範囲外、彩度・明度が0〜100%の範囲外の場合は、値を自動的に補正(clamp)せず、エラーとして表示します。一方でHueだけは360度で一周する角度として扱うため、360を超える値や負の値もエラーにはせず、0以上360未満の範囲へ自動的に換算します(例: 480度は120度、-30度は330度として扱います)。
変換結果の精度とround-tripについて
表示するHSLの数値は、H(色相)・S(彩度)・L(明度)いずれも小数第1位までの値です。HEXとRGBの間は常に完全に一致する変換(round-trip)ができます。RGBとHSLの間は、このツールが表示するHSL表記を経由した場合には常に完全に一致する変換ができます(内部で採用している0.1単位という精度は、8bitのRGB全パターンで完全に一致することを確認した上で決めています)。ユーザーが独自により粗い精度でHSL値を入力した場合は、この限りではありません。
よくある質問
対応している色の形式は何ですか?
HEX(#rrggbb・#rgb)・RGB(rgb(R, G, B))・HSL(hsl(H, S%, L%))の3形式に対応しています。alpha(透過度)・CSS Named Colors・hwb()やoklch()等の新しいCSS Color形式には対応していません。
範囲外の値(例: rgb(300, -20, 0))を入力するとどうなりますか?
自動的に0〜255の範囲へ補正(clamp)せず、エラーとして表示します。彩度・明度が0〜100%の範囲外の場合も同様です。ただしHueだけは360度で一周する角度として扱うため、360を超える値や負の値はエラーにせず0以上360未満の範囲へ自動的に換算します。
RGBとHSLの変換は完全に元に戻りますか?
HEXとRGBの間は常に完全に一致する変換ができます。RGBとHSLの間は、このツールが表示するHSL表記(小数第1位までの値)を経由した場合には常に完全に一致する変換ができますが、独自により粗い精度で入力したHSL値についてはこの限りではありません。
入力した色の値は外部に送信されますか?
いいえ。変換処理はすべてブラウザ内で完結し、入力したカラーコードや変換結果を外部やアクセス解析(GA4)へ送信することはありません。
3桁の短縮HEX(例: #f00)は使えますか?
はい。#f00のような3桁のHEXは、各桁を複製した6桁相当(#ff0000)として扱います。