🎨 カラーコード変換

HEX・RGB・HSLを相互変換、明度パレットも生成。登録不要・無料でお使いいただけます。

🔒 処理はすべてブラウザ内で完結します。ファイルや入力内容がサーバーに送信されることはありません。

CSS表記: rgb(15, 123, 138) / hsl(187, 80%, 30%)

明度パレット(クリックでHEXをコピー)

使い方

  1. カラーピッカーで色を選ぶか、HEX(例: #1E90FF)・RGB・HSLのいずれかの欄に値を入力します。
  2. 入力と同時に、他の形式の値とプレビューが自動で更新されます。
  3. 各形式の横にある「コピー」ボタンで、CSSにそのまま貼り付けられる形式でコピーできます。
  4. 下の明度パレットから、同系色の明るい色・暗い色を選んでコピーすることもできます。

こんな場面で便利です

よくある質問

Q. HEX・RGB・HSLはそれぞれ何が違うのですか?
A. いずれも同じ色を別の表現で表したものです。HEX(16進数)はWebで最も一般的な形式(例: #1E90FF)、RGBは赤・緑・青の光の強さ(0〜255)で表す形式、HSLは色相(0〜360°)・彩度・輝度で表す形式です。HSLは「同じ色味のまま明るさだけ変えたい」といった調整がしやすいのが特長です。
Q. 3桁のHEX(#fff など)も入力できますか?
A. はい。#fff のような3桁の短縮形式は #ffffff として解釈されます。先頭の「#」は省略しても構いません。大文字・小文字どちらでも入力できます。
Q. 明度パレットはどのように生成されていますか?
A. 選択中の色をHSLに変換し、色相と彩度を保ったまま輝度(L)だけを段階的に変えて生成しています。ボタンやリンクのホバー色、背景色のバリエーションを作るときにそのまま使えます。
Q. 入力した色の情報が外部に送信されることはありますか?
A. ありません。変換はすべてブラウザ内のJavaScriptで完結しており、入力内容がサーバーに送信されることは一切ありません。

関連ツール