カラーコード変換（HEX・RGB・HSL相互変換）
HEXを貼ればRGBとHSLに、RGBを貼ればHEXとHSLに、HSLを貼ればHEXとRGBに自動変換。色見本プレビューとワンクリックコピー、カラーピッカー対応。すべて端末内処理で外部送信なし。
#2563ebrgb(37, 99, 235)hsl(221, 83%, 53%)定番色から選ぶ
このツールの特徴
- ・HEX 3桁短縮形（#fff）・6桁（#2563eb）・8桁アルファ（#ff0099aa）すべて自動判別
- ・RGBは0-255の整数とパーセント（30%等）どちらも受付
- ・HSLは色相をdeg付き（120deg）でも数値だけでも認識、彩度・明度はパーセント
- ・コピーボタンで欲しい形式をワンクリック転送
- ・カラーピッカーで微調整→そのまま3形式の値を取得
- ・全処理がブラウザ内で完結、外部送信ゼロ
使い方（5ステップ）
- 入力欄にHEX・RGB・HSLのどれかを貼り付け
- 形式を自動判別して残りの2形式を表示
- 色見本ブロックで色を視覚確認
- コピーボタンで欲しい形式をクリップボード転送
- カラーピッカーで微調整しつつ3形式を取得
詳しい操作のコツ
Figma・Adobe XD・Illustratorからコピーした色は多くの場合HEXで取得されます。そのまま本ツールに貼ると、CSSで使うrgb()・hsl()の値が即座に得られます。 逆にデザイナーから「もう少し明るく」と依頼を受けたときはHSLで読み取り、明度Lを5-10ポイント上げ、出てきたHEXをデザインツールに戻すと、彩度や色相をズラさずに明るさだけ調整できます。 スクリーンショットから色を吸いたい場合はOSの色取得ツール（macOSのDigital Color Meter等）でHEXを取得し、本ツールに貼ると同じ流れで使えます。
こんなときに使えます
- ・Webサイト制作：FigmaのHEXをコピーしてrgb()/hsl()に変換、CSS変数として登録
- ・資料・スライドの色合わせ：PowerPoint/Keynoteで使った色をWebサイトと揃える
- ・ブランドカラー管理：ロゴのHEXをHSLで読み、明度違いのアクセントカラーを派生させる
- ・ダークモード設計：HSLの明度を反転して、明度Lだけ入れ替えたダーク版を試作
- ・印刷物との色合わせ：RGBの近似値を確認しつつ、印刷会社へCMYK指定の元データを準備
- ・アクセシビリティ確認：HSLの明度差をチェックし、コントラスト確保の目安に
日本のデザイン現場に合わせた表記対応
日本のWeb現場で広く使われるHEX 6桁表記（#2563eb等）、コーポレートサイトでよく見るRGB表記（rgb(37, 99, 235)）、CSS変数で扱いやすいHSL表記（hsl(221deg 83% 53%)）の3形式すべてを、貼り付けるだけで相互変換します。 全角・半角の混在や、Figmaコピー時に紛れる前後の空白も自動でトリム。日本語環境のIMEで「ｆｆ」のような全角英字が入っても、半角に正規化して読み取ります。 鉄道路線色・コーポレートカラーガイドラインを反映したカンプ作成、自治体サイトのCMSテーマ色設定、印刷物の校正用見本作成にもそのまま使えます。
よくある質問（9問）
Q1. HEX・RGB・HSLは何が違うのですか？
A. 同じ色の書き方の違いです。HEX(#2563eb等)はWebで最も使われる16進数表記、RGBは赤・緑・青の強さ(0-255)、HSLは色相・彩度・明度で表す方式で、明るさだけ変えたいときに便利です。
Q2. 3桁のHEX（#fffなど）にも対応していますか？
A. はい。#fffのような3桁の短縮形も自動で6桁(#ffffff)として読み取ります。先頭の「#」は付けても付けなくても大丈夫です。
Q3. 8桁HEX（透明度つき）には対応しますか？
A. #ff0099aaのような8桁HEXは色の部分(6桁)を読み取って変換します。透明度部分(aa)は無視されます。
Q4. rgba()やhsla()のアルファ値も変換されますか？
A. 色の部分だけを読み取って変換します。透明度は無視されるため、不透明な色のコード変換にお使いください。
Q5. HSLの色相は度数(deg)で書けますか？
A. CSS Color仕様ではhsl(120deg 75% 25%)のようにdegを付けても、hsl(120,75%,25%)のように省略しても同じです。本ツールはどちらの表記も受け付けます。
Q6. 16進数の英字は大文字・小文字どちらでもいいですか？
A. CSS仕様で大文字と小文字は区別しません。#FF0099と#ff0099は同じ色です。本ツールはどちらの表記も自動で読み取ります。
Q7. 入力した色は外部サーバーに送られますか？
A. 送信されません。すべての変換処理はブラウザ内で完結し、入力値が外部に出ることはありません。社内資料やデザインカンプの色を扱うときも安心です。
Q8. カラーピッカーで選んだ色はそのままCSSに使えますか？
A. はい、表示される形式はそのままCSSのcolor/background-colorプロパティに貼り付けられます。HEX・RGB・HSLいずれの形式でも標準のCSS構文に従っています。
Q9. 色覚への配慮はどう確認すればいいですか？
A. WCAG 2.1 SCの規定で、通常テキストは背景色とのコントラスト比4.5:1以上、大きいテキストは3:1以上が求められます。HSLの明度Lを20-30%以上離すと、おおむねコントラストを確保できます。
関連ツール
カラーコードの基礎知識
1. HEX表記の歴史と理由
HEXはRGB各チャンネル0-255を16進数2桁で表す方式で、Webの黎明期から最も普及した色表記です。#RRGGBB の形が標準で、CSS Color Module Level 4ではアルファチャンネル付きの#RRGGBBAA、短縮形の#RGBと#RGBAも公式に定義されています。短縮形は各桁を2回繰り返した値として解釈され、#f09は#ff0099と同じ色です。
2. RGBの値域と書式
CSS仕様では、rgb()関数の各値は0-255の整数または0-100%のパーセント、もしくはキーワードnone（0%相当）を取れます。アルファ値は0-1の小数か0-100%、または / で区切って指定します。レガシーのコンマ区切り（rgb(255, 0, 0)）と、新しいスペース区切り（rgb(255 0 0)）の両方が有効です。
3. HSLが直感的な理由
HSL(Hue/Saturation/Lightness)は色を「色相0-360度の角度」「彩度0-100%」「明度0-100%」で表します。色相は赤(0)→黄(60)→緑(120)→シアン(180)→青(240)→マゼンタ(300)→赤(360)と一巡し、補色は180度反対側にあります。明度だけ変えれば「同系色で明るさだけ違う色」を作れるので、ホバー時の色変化やダークモードの設計に向きます。
4. sRGB色空間と人間の知覚
HEX・RGB・HSLが基準としているsRGB色空間は、1996年にHPとMicrosoftが提唱したディスプレイ用標準です。一般的なWebブラウザ・モニター・スマホ画面はsRGBを前提に色を表示します。最新のディスプレイはより広いDisplay P3やRec.2020を扱えますが、本ツールはsRGB前提のWeb表示用の3形式変換に絞っています。
5. 色覚多様性とコントラスト
日本人男性の約5%、女性の約0.2%が色覚特性（P型/D型/T型）を持ちます。HSLの色相だけで意味を区別すると伝わらない場合があるため、「色＋形」「色＋テキスト」のように冗長化するのが原則です。WCAG 2.1の規定で、通常テキストの背景コントラスト比は4.5:1以上、大きいテキストは3:1以上が必要で、HSLの明度差で大まかな目安が得られます。
6. CSS Color Module Level 4の新機能
CSS Color Module Level 4では、本ツールが扱う従来のHEX/RGB/HSLに加え、oklch()・lch()・lab()といった知覚均等色空間や、color-mix()・相対色構文（hsl(from green h s l)）も追加されました。新仕様はより精密な色設計に向きますが、ブラウザ対応の都合上、本ツールはまずWeb標準として広く普及するHEX/RGB/HSLの相互変換に絞っています。