本文へスキップ
BrowserUtil

カラー変換

HEX、RGB、HSL、HSV、CMYK の相互変換。カラーピッカー、WCAG コントラスト比判定、明暗パレット付き。

#2563EB100% 不透明度
透明度100%
RGB チャンネル
R37
G99
B235
プリセットカラー

カラーフォーマット変換

HEX
#2563EB
HEXA (with Alpha)
#2563EBFF
RGB
rgb(37, 99, 235)
RGBA
rgba(37, 99, 235, 1)
HSL
hsl(221, 83%, 53%)
HSLA
hsla(221, 83%, 53%, 1)
HSV / HSB
hsv(221, 84%, 92%)
CMYK (Print)
cmyk(84%, 58%, 0%, 8%)

明暗パレット生成 (Tints & Shades)

明るい階調 (Tints)
暗い階調 (Shades)

WCAG 2.1 コントラスト比

白背景 (#FFFFFF) との比率5.17:1
いろはにほへと ちりぬるを わかよたれそ
AA (≥4.5) ✓ Pass AAA (≥7.0) ✕ Fail
黒背景 (#000000) との比率4.06:1
いろはにほへと ちりぬるを わかよたれそ
AA (≥4.5) ✕ Fail AAA (≥7.0) ✕ Fail

使い方

  1. 1 カラーピッカーで色を選ぶか、HEX、RGB、HSL などのカラーコードを入力します。
  2. 2 透明度スライダーや R/G/B 各チャンネルのスライダーで微調整します。
  3. 3 HEX、RGB、HSL、HSV、印刷用 CMYK など必要な形式をワンクリックでコピーします。
  4. 4 WCAG 2.1 コントラスト比判定と自動生成された明暗パレットを確認できます。

主な機能

  • HEX、HEXA、RGB、RGBA、HSL、HSLA、HSV、CMYK のリアルタイム相互変換
  • 市松模様の透過プレビュー付きネイティブカラーピッカー
  • 標準 CSS カラーネーム（crimson、rebeccapurple など）に対応
  • 白背景・黒背景に対する WCAG 2.1 AA / AAA アクセシビリティ適合判定
  • 明暗 10 段階のカラーパレット（Tints & Shades）自動生成
  • 直感的に操作できる R/G/B チャンネルスライダー
  • 100% クライアントサイド動作で高速

よくある質問

RGB、HSL、HSV の違いは何ですか？

RGB は光の三原色の強さに基づくハードウェア寄りの表現です。HSL（色相・彩度・輝度）や HSV（色相・彩度・明度）は人間の直感的な色の捉え方に近く、デザイン調整に適しています。

WCAG コントラスト比の基準とは何ですか？

W3C ガイドラインでは、通常テキストで 4.5:1（AA 基準）または 7:1（AAA 基準）、大きなテキストで 3:1（AA 基準）以上のコントラスト比が推奨されています。

透明度（アルファ値）を含む色も変換できますか？

はい、完全に対応しています。透明度スライダーを動かすと HEXA、RGBA、HSLA の各フォーマットに透過率がリアルタイムに反映されます。

関連ツール