カラー変換
HEX ⇔ RGB ⇔ HSL を相互変換。プレビュー付きで各形式をワンクリックコピー。
このツールについて
カラー変換ツールは、色を表す 3 つの主要な記法 HEX・RGB・HSL を相互に変換し、変換結果を実際の色見本(プレビュー)とともに確認できるツールです。デザインカンプの色指定を CSS 用に整えたいとき、あるいは受け取った RGB 値を HEX に直したいときなど、記法をまたいだ変換をワンクリックで行えます。処理はすべてブラウザ内で完結し、入力した色の値が外部サーバーに送信されることはありません。
HEX は #RRGGBB のように 16 進数で赤・緑・青の強さを表す記法で、Web でもっとも広く使われます。RGB は同じ光の三原色を 0〜255 の 10 進数で表し、HSL は色相(Hue)・彩度(Saturation)・明度(Lightness)という人間の感覚に近い 3 軸で色を指定します。同じ 1 色でも用途によって扱いやすい記法が異なるため、相互変換できると作業がスムーズになります。
使い方はシンプルで、いずれかの形式に値を入力すると、残りの形式が自動的に計算されて表示されます。各形式にはコピーボタンが用意されているため、CSS やデザインツールにそのまま貼り付けられます。HSL は「少し明るくしたい」「彩度を落としたい」といった微調整が直感的に行えるので、配色を詰める段階で特に役立ちます。
色を選ぶ際は、文字と背景の組み合わせが十分に読みやすいか(コントラスト)も意識すると、アクセシビリティの高いデザインになります。本ツールで作った配色は、コントラスト比が基準を満たすかどうかを別途チェックしておくと安心です。
使い方
- 色コードを HEX・RGB・HSL のいずれかの形式で入力します(例: #285240)。
- 他形式への変換結果とプレビューが自動で表示されます。
- 各形式の横のボタンでワンクリックコピーできます。
よくある質問
入力した色はサーバーに送信されますか？
いいえ。変換はすべてブラウザ内(JavaScript)で計算されるため、入力した色の値が外部に送られることはありません。
HEX の 3 桁表記(#RGB)にも対応していますか？
#RGB のような短縮表記は #RRGGBB に展開して解釈するのが一般的です。うまく認識されない場合は 6 桁の完全な形で入力してみてください。
HSL と RGB はどう使い分ければよいですか？
RGB はディスプレイや CSS の指定と相性がよく、HSL は「色味を保ったまま明るさだけ変える」といった感覚的な調整に向いています。目的に応じて行き来すると便利です。
透明度(アルファ値)は扱えますか？
このツールは不透明な色(HEX・RGB・HSL)の相互変換を対象としています。透明度を含む rgba() や 8 桁 HEX が必要な場合は、変換後の値にアルファ成分を付け足してください。
変換すると色が微妙に変わることがありますか？
RGB と HSL の相互変換では計算上の丸めが発生するため、往復すると 1 の位がわずかにずれる場合があります。見た目に影響しない範囲ですが、厳密な値が必要なときは元の記法を基準にしてください。
カラーピッカーのように色を選べますか？
値を直接入力・編集して変換する仕組みが中心です。プレビューで実際の色を確かめながら数値を調整することで、狙った色に近づけられます。