Loading...
Loading...
ライブスライダー、インタラクティブなピッカー、およびコピー準備完了の CSS 文字列を使用して、HEX、RGB、および HSL の間で任意の色を変換します — すべてブラウザ内で計算されます。
#1A73E8rgb(26, 115, 232)hsl(214, 82%, 51%)WCAG ratio of this color against pure white and pure black backgrounds.
カラーコンバーターは、デザイナーや開発者が日常的に使用する 3 つの形式間で変換します: スタイルシート用の HEX (#RRGGBB)、キャンバスや画像ツール用の RGB (赤、緑、青 0–255)、直感的な編集用の HSL (色相、彩度、明度)。これらはすべて sRGB カラースペース内の同じポイントを説明します — 読みやすさと数学のトレードオフです。このツールは、いずれかを編集する際に 3 つを同期させ、ライブスウォッチを表示し、白または黒に対するボディテキストに対して色が安全かどうかを知るための迅速な WCAG コントラストスナップショットを報告します。すべてはブラウザ内でローカルに実行され、色はアップロードされたりログに記録されたりすることはありません。
HEX 値を貼り付ける (先頭の # ありまたはなし)、ネイティブカラーピッカーをドラッグする、またはスライダーや数値入力で RGB / HSL チャンネルを設定します。
大きなスウォッチと HEX ラベルは、すべてのキー入力やスライダードラッグで更新されるので、確定する前に色を確認できます。
編集した形式にかかわらず、他の 2 つは「コピー形式」セクションで瞬時に再計算されます — HEX、rgb(...)、および hsl(...) が CSS、デザインツール、またはコードに貼り付ける準備が整っています。
任意の行の「コピー」をクリックして、その文字列をクリップボードに置きます。ボタンは 1.5 秒間チェックマークで確認します。
コントラストスナップショットは、純白および純黒に対するあなたの色の WCAG 比率を示します。カスタム背景に対する完全な WCAG AA / AAA 判定が必要な場合は、下のリンクからコントラストチェッカーツールにジャンプしてください。
HEX → RGB:
R = parseInt(hex[0..1], 16)
G = parseInt(hex[2..3], 16)
B = parseInt(hex[4..5], 16)
RGB → HSL (各チャンネルは0–1にスケーリング):
max = max(R, G, B); min = min(R, G, B)
L = (max + min) / 2
S = L > 0.5 ? (max − min) / (2 − max − min) : (max − min) / (max + min)
Hはどのチャンネルが最大かによって異なる:
R: H = 60 · ((G − B) / (max − min) mod 6)
G: H = 60 · ((B − R) / (max − min) + 2)
B: H = 60 · ((R − G) / (max − min) + 4)HEXはRGBを16進数で表現したもので、各チャンネルごとに3つの16進数のペアが1つの文字列にパックされています。HSLは同じRGBキューブの知覚的な再形成です: 色相(0–360°)はカラーホイールのスライスを選び、彩度(0–100%)はどれだけ鮮やかか灰色かを示し、明度(0–100%)は白または黒にどれだけ近いかを示します。上記の変換は丸めを除いてロスレスであるため、HEX ↔ RGB ↔ HSL ↔ HEXは同じ値に戻ります。
| 入力 | 同等のフォーマット |
|---|---|
#1A73E8 | rgb(26, 115, 232) · hsl(214, 82%, 51%) Googleブルー — 人気のリンク/プライマリボタンの色合い。 |
rgb(255, 105, 180) | #FF69B4 · hsl(330, 100%, 71%) CSSで名付けられた色ホットピンク、3つの方法で表現。 |
hsl(120, 73%, 75%) | #9EE89E · rgb(158, 232, 158) パステルグリーン — Lスライダーを上げることで簡単に調整可能。 |
#03A | #0033AA · rgb(0, 51, 170) · hsl(222, 100%, 33%) 3桁の省略形が6桁の等価形に展開されます。 |
最終更新日