カラーコード変換
HEX・RGB・HSLのカラーコードを変換。
ファイルは端末内に留まります
このツールはすべての処理をブラウザ内で行います。サーバーへのアップロードはありません。
📝 カラーコード変換について
カラーコード変換ツールは、HEXカラーコードを入力すると、同じ色のRGB値とHSL値をすぐに表示し、それぞれにコピーボタンを用意しています。テキスト欄に #ff3a73 のような6桁のコードを入力するか、カラーピッカーで色を目で見て選ぶと、結果がその場で更新されます。
3つの形式は、同じ色を異なる方法で表しています。HEXは赤・緑・青の値を短い文字列にまとめたもので、CSSやデザインツールでよく使われます。RGBは3つのチャンネルを0から255の数値で並べたもので、コードの記述や画像編集に便利です。HSLは色相を0〜360度の角度で、彩度と明度をパーセントで表すため、数値を1つ調整するだけでブランドカラーの明るい版、暗い版、落ち着いた版を簡単に作れます。
テキスト欄には6桁のHEXコードを入力してください。#f00 のような3桁の省略形は、先に #ff0000 のように展開してから入力します。HSL値は整数に丸めて表示されます。すべての変換はブラウザ内で計算されます。
📘 使い方
- 1
色を入力または選択
テキスト欄に6桁のHEXコードを入力するか、色見本をクリックして目で見ながら色を選びます。
- 2
変換結果を確認
HEX、RGB、HSLの各行が自動で更新され、同じ色がそれぞれの形式で表示されます。
- 3
値をコピー
必要な形式の横にある「コピー」ボタンをクリックし、CSSやデザインツールに貼り付けます。
❓ よくある質問
#fff のような3桁のHEXコードも入力できますか？
このツールは6桁を前提としているため、各桁を2回ずつ書いて展開してください。たとえば #fff は #ffffff になります。
透明度（アルファ）には対応していますか？
いいえ。不透明な色のみを変換するため、アルファを含む8桁のHEXコード、RGBA、HSLAには対応していません。
# 記号は必要ですか？
いいえ。入力時の # は省略可能で、どちらの場合でもRGBとHSLの結果が表示されます。
RGBよりHSLのほうが便利なのはどんなときですか？
明度を上げて明るくしたり、色相を固定したままパレットを作ったりと、色を直感的に調整したいときにHSLが便利です。