カラー変換

カラー変換ツールとは？#

カラー変換ツールは、ある色の記述を、スタックが実際に必要とする別の記述に翻訳します。デザイナーはモックアップから HEX 値を渡し、CSS は rgb() や hsl() で書け、デザイントークンパイプラインは CSS 変数を欲しがり、チャートライブラリはアルファチャネル付きの RGBA タプルを求めます。同じ色が次々と異なる衣を着るため、手で変換するか電卓で推測するのに実時間を費やします。

本ページは 4 つの変換をすべて一度に行います。色を 1 つ入力または選ぶだけで、即座に HEX、RGB、HSL、貼り付けReadyの CSS 変数 宣言、そしてライブのプレビュー見本と、その色から派生した 5 段階の明るく／暗くパレットが得られます — すべてブラウザ内でローカルに計算されます。

HEX、RGB、HSL が共存する理由は、それぞれが異なる作業に優れているためです。HEX（#4f46e5）はコンパクトで CSS、Figma 書き出し、ブランドガイドラインを支配します。RGB（rgb(79, 70, 229)）は赤／緑／青チャネルを明示するため、画像コードや canvas のピクセル操作が期待する形式です。HSL（hsl(243, 75%, 59%)）は色相、彩度、輝度に分割され、人間が考えられる形式です — 「もう少し明るく」は HSL では 1 つの数値変更で済み、RGB では 3 つの数値の面倒な踊りになります。

使い方#

1. 次のいずれかの方法で入力色を設定します。
   • 左のカラースクエアをクリックしてネイティブの OS カラーピッカーを開き、視覚的に選ぶ。
   • またはその隣のテキストフィールドに値を入力。HEX（#4f46e5、#abc、またはアルファ付き 8 桁 #4f46e5ff）、rgb()／rgba()、hsl()／hsla() がすべて受け付けられます。
2. 右のリストで結果を読みます — HEX、RGB、HSL、CSS 変数。各フィールドは読み取り専用です。クリックしてコピーするか、作業中の参照として使います。
3. 右の大きなプレビューブロックを見ます。現在の色で塗りつぶされるため、デザインに対する妥当性チェックに使えます。
4. プレビューの下の5 色パレットを使います。HSL の輝度を 10 ポイント刻みでシフトして darker、dark、base、light、lighter バリアントを生成します — hover／active 状態や、単一のブランドカラーからのトーンスケール構築に便利です。
5. ステータス行が変換を確認するか、入力が解析できなかった場合に「無効な色です」メッセージを報告します。

主な機能#

• 3 形式を受け付け、4 形式を返す。 HEX、rgb()、hsl() を貼り付けて、HEX、RGB、HSL、CSS 変数宣言を一度に得られます。
• アルファ対応。 8 桁 HEX（#rrggbbaa）と rgba()／hsla() 入力はアルファチャネルを出力まで運ぶため、半透明カラーが正しくラウンドトリップします。
• トーンパレットジェネレーター。 5 段階の明るく／暗か行は、用意されたランプではなく色自身の HSL から派生するため、常に同じファミリーに見えます。
• コピーレディな CSS 変数。 --color-brand: #4f46e5; 行は :root ブロックにそのまま落ち、後でトークン名に変更できます。
• 100% クライアントサイド。 バックエンドもネットワークリクエストもなく、ブランドカラーはページから出ません。

実例#

ページはインディゴ #4f46e5 で読み込まれます。この入力で、4 つのフィールドは次のように埋まります。

HEX:        #4f46e5
RGB:        rgb(79, 70, 229)
HSL:        hsl(243, 75%, 59%)
CSS var:    --color-brand: #4f46e5;

HSL 形式 hsl(243, 75%, 59%) が一文のように読めることに注目してください。色相 243（カラーホイール上の青紫の角度）、彩度 75%（かなり鮮やか）、輝度 59%（中間トーン、中間グリよりわずかに明るい）。デザイナーに「hover 状態のために少し暗くして」と言われたなら、この 59 を 49 に下げて hsl(243, 75%, 49%) を得ます — 実際、それはまさにパレットジェネレーターがプレビューの下に生成する dark 見本であり、69% の light や、39% と 79% の極端値と並んでいます。

代わりにすでに持っている CSS 変数から始めるなら、その値をテキストフィールドに貼り付けます。rgba(79, 70, 229, 0.5) は 50% 不透明度の同じインディゴとして解析され、HEX 出力は #4f46e580（8 桁、アルファ 0x80 ≈ 0.5）になり、HEX を好むスタイルシートに落とせます。

よくある質問#

デザイナーが #4f46e5 をくれたのに、デベロッパーツールは rgb(79, 70, 229) と表示します。同じ色ですか？#

はい、完全に同じです。HEX と RGB は同じ sRGB 値の 2 つの直列化です。#4f46e5 はバイトペア 4f、46、e5 に分割され、これらは 79、70、229 の 16 進です。コンテキストが好む方を使ってください — CSS は同一と扱います。

いつ HEX ではなく HSL に手を伸ばすべきですか？#

フィーリングで予測可能に色を変えたいときはいつでも。暗くする、明るくする、彩度を落とす、あるいは 1 つのブランドカラーから 5 色のスケールを構築するのは、HSL では 1 つの数値で済み、RGB ではフラストレーションのある 3 方向のバランスになります。HEX は保存とコピーペーストに最適、HSL は編集に最適です。

パレットが非常に暗い色や明るい色で不均等になるのはなぜですか？#

ジェネレーターは輝度を固定の 10 ポイント刻みでシフトし、0% と 100% でクランプするためです。この上限付近では動ける余裕がなく、刻みが圧縮されます — すでに 95% の輝度の色は、純白に達する前に「より明るい」方向に 5 ポイントしかありません。これは HSL 空間自体の性質であり、バグではありません。

このツールは P3 やワイドゲーマットカラーに対応していますか？#

いいえ。CSS の HEX／RGB／HSL が記述する sRGB 空間で動作し、ウェブ作業の大半をカバーします。Display-P3 や color() 構文は別のパイプラインであり、ここでは解析されません。