すべての処理はブラウザ内で実行されます — ファイルや入力はサーバへ送信されません。
`#06B6A4`・`rgb(6, 182, 164)`・`hsl(174, 94%, 37%)` のいずれかを貼り付けると、3 形式すべてが同時に表示され、ライブカラースウォッチと変換値がそのままコピーできる状態になります。3 桁の HEX 略記(`#0F0`)も受け付けます。アルファ付き形式(`rgba(...)`・`hsla(...)`・8 桁 HEX `#RRGGBBAA`)はアルファチャンネルもパースしますが、本コンバータは不透明色を中心に扱います。ベースカラーのみが欲しい場合はアルファを除いてから貼り付けてください。
あるツールで取った色を、別の形式を好む別ツールに貼り付けたいときに使ってください。Figma は HEX でエクスポート、ブラウザは現代の CSS カラー構文を好み、デザイントークンは HSL を使うことが多いです。明度を調整しても「同じ色のより明るい / より暗い版」として知覚的に近いままだからです。ブランドガイドラインは色を 1 つの形式のみで記載していることが多く、エディタや CSS-in-JS ライブラリが欲しい形式を本ツールで取り出せます。処理はすべてブラウザ内で完結します。
#06B6A4
HEX: #06B6A4 RGB: rgb(6, 182, 164) HSL: hsl(174, 94%, 37%)
典型的なティール系のアクセントカラーです。HEX はインラインコピペで最短、RGB は GPU が値を保持する形に近く、HSL は *知覚上の色* を表します(青緑系、彩度が非常に高く、中庸より少し暗い)。デザイナーが HSL を好むのは、L チャンネルを ±10 動かすだけでブランドの同一性を保ちながらホバー / 無効状態を作れるためです。
#0F0
HEX: #00FF00 RGB: rgb(0, 255, 0) HSL: hsl(120, 100%, 50%)
`#0F0` は `#00FF00` に展開されます(各桁が複製、`0` → `00`、`F` → `FF`)。略記で表現できるのは各チャンネルの 16 進 2 桁が同一の色だけで、sRGB の 1677 万 7216 色のうち 4096 色に限られます。基本色や強調色には十分ですが、微妙な色には使えません。
hsl(174, 94%, 47%) (original was hsl(174, 94%, 37%), L raised by 10)
HEX: #0FE9D0 RGB: rgb(15, 233, 208) HSL: hsl(174, 94%, 49%)
L チャンネルを 37% から 47% に上げると、同じ色相・彩度で明らかに明るいティールが得られます。ボタンのホバーや通知の背景に使う「明るい派生」の教科書的な例です。同じことを HEX や RGB でやろうとすると 3 つの座標を同時に調整する必要がありますが、HSL ならスライダ 1 本です。出力 L が `49%`(`47%` ではない)になっているのは、RGB を介した往復で精度がわずかに落ちるためです。
HEX と RGB は整数で量子化されています(各チャンネル 0〜255 で 8 ビット)が、HSL は実数値です。`rgb(6, 182, 164)` → HSL → RGB と戻すと正確に `rgb(6, 182, 164)` に戻ります。一方 `hsl(174, 94%, 37%)` → RGB → HSL では `hsl(174.3, 93.7%, 36.9%)` のような値が出て丸めると `hsl(174, 94%, 37%)` になります。丸めは複数回の変換で累積するため、同じ色を何度も往復させないでください。正本(通常は HEX か元の HSL)を 1 つ決めて、そこを基準にしてください。
どちらも色を「色相 + 彩度 + 明るさ系の第三チャンネル」で表しますが、第三チャンネルの定義が異なります。**HSL** は Lightness(明度)を使い、0% が黒、50% が純粋なその色相、100% が白です。**HSV / HSB** は Value(明度)を使い、0% が黒、100% が純粋なその色相です。つまり HSL で「明度 50%・彩度 100%」が完全に色づいた色で、HSV では「明度 100%・彩度 100%」が同じ色になります。Photoshop・Figma・主要なデザインツールは HSV を既定とし、CSS は HSL を使います。変換は単純ですが恒等ではありません。`hsl(174, 94%, 37%)` ≠ `hsv(174, 94%, 37%)` です。
OKLCH(CSS Color Module Level 4 の L*a*b* ファミリーで、2023 年以降すべての現代ブラウザが対応)は、色を Lightness + Chroma + Hue で表しますが、*知覚的に均等な* 空間です。数値上で等距離なら知覚上も等距離になるという性質を持ち、HSL や RGB にはない強みです。デザイントークンには厳密に優れています — `oklch(70% 0.15 200)` を `oklch(60% 0.15 200)` に暗くすると、HSL の L を下げただけでは得られない「同じ色のより暗い版」として知覚されます。本ツールは HEX / RGB / HSL のみを扱います。OKLCH が必要ならブラウザの DevTools コンソール(`getComputedStyle(document.body).color` は現代構文を受け付けます)か専用ツールを使ってください。
パースは `rgba(...)`・`hsla(...)`・8 桁 HEX(`#RRGGBBAA`)のアルファを受け付けますが、出力は不透明値を中心に扱います。多くのワークフローで「不透明色そのもの」と「不透明度」を分けて持ちたいためです。完全なアルファ対応が必要なら CSS で直接書いてください — `rgb(6 182 164 / 0.5)` が現代の構文(CSS Color Level 4)で、現代の主要ブラウザで動きます。Photoshop や Figma もアルファを別スライダで持つため、「ベース色を取り出す → 調整 → 元のアルファとともに戻す」という本ツールとの往復はきれいに保てます。
主な理由は 2 つです。**カラースペース**: `#06B6A4` は既定で sRGB として解釈されますが、P3(広色域)ディスプレイは P3 として解釈すれば同じコードでもより彩度の高い色を表示できます。最近の Apple デバイスはこの傾向が強まっています。**キャリブレーション**: sRGB の中でも、各モニタやスマホ画面には工場出荷時の白色点とガンマカーブにわずかな差があります。ブランド重視の作業では、キャリブレーション済みディスプレイ(Datacolor SpyderX・X-Rite i1 など)で確認するか、広色域空間で指定する(`color(display-p3 0.5 0.7 0.65)`)とレンダリングパイプラインがターゲット色域に合わせて補正できます。
直接はできません。本コンバータは形式を表示するだけで、2 色間の WCAG コントラスト比は計算しません。アクセシビリティ確認には本サイトの Color Contrast ツールを使ってください。WCAG 2.1 に従って相対輝度を計算し、前景 / 背景の組が AA(通常テキストで 4.5:1)や AAA(7:1)を満たすかを示します。なお、ドラフト中の WCAG 3 は、知覚的に調整されたコントラスト公式 APCA に比率を置き換える予定です。同じ HEX 組が WCAG 2 をパスしてもユーザにはコントラスト不足に見える、という場面で重要になります。
画面上の色は本質的に 3 つの数値 — R / G / B サブピクセルの強度です。**HEX** はその 3 つの数値をコンパクトな 8 ビット 16 進数で書きます(`#06B6A4` = R 0x06、G 0xB6、B 0xA4)。略記 `#RGB` は各ニブルを複製します。**RGB** は 10 進数 0〜255 で書き(`rgb(6, 182, 164)`)、任意でアルファチャンネルを伴います。どちらも GPU がピクセルを描く方法に直接結びついていますが、*人間の* 色に対する感覚にはきれいに対応しません — 「この色はあの色より彩度が高い?」を答えるには RGB 空間内で計算が必要です。
**HSL**(Hue・Saturation・Lightness)とその兄弟 **HSV / HSB** は、同じ色を人間が実際に使う軸へと並べ替えます。Hue は赤 - 黄 - 緑 - シアン - 青 - マゼンタ - 赤を一周する 0°〜360° の輪です。Saturation は色がどれだけグレーから離れているかを表します。Lightness または Value は明るさを表します — 微妙な違いがあり(HSL では 50% L が純粋な色相、HSV では 100% V が純粋な色相)、CSS は HSL を、Photoshop・Figma・主要なデザインピッカーは HSV を既定とします。どちらも RGB から単純な式で導け、整数量子化が許す範囲ではきれいに往復します。
現代のウェブ作業で重要な隣接カラースペースが 3 つあります。**sRGB** はブラウザと大半のモニタが既定で前提とするカラースペースです — 本ツールの HEX や RGB はタグが付かない限り sRGB として扱われます。**Display P3** は最近の Apple デバイスやハイエンド Android が対応する広色域空間で、CSS Color Level 4 の `color(display-p3 r g b)` 構文で明示的に書けます。**OKLCH** は CSS Color Level 4 で導入された知覚的に均等な空間で、数値上で等距離なら知覚上も等距離になるため、色相をまたいで一貫したコントラストや明度ラダーが必要なデザイントークンシステムに向いています。本コンバータは、Figma と CSS の間で実際に貼り付ける sRGB ベースの形式に絞っています。本格的なパレット設計が必要になったら、ブランドカラーをここで確定させたうえで OKLCH 対応のツーリングへ進んでください。
線形・放射状の CSS グラデーションをビジュアルで作成。カラーストップをドラッグし角度を調整、background CSS をそのままコピー。
2 つの色のコントラスト比を WCAG 基準でチェック。通常テキスト・大きいテキスト・UI 部品ごとに AA / AAA の合否を即時表示。
アスペクト比を保ったまま幅・高さを計算。16:9 / 4:3 / 21:9 / 1:1 などのプリセットと CSS aspect-ratio 出力つき。
camelCase / PascalCase / snake_case / kebab-case / CONSTANT_CASE / Title Case の相互変換。
