このツールについて
パネルをドラッグして彩度と明度を、スライダーで色相を決めると、HEX・RGB・HSL の 3 形式が同時に表示されます。白文字・黒文字それぞれとのコントラスト比も算出されるため、色を選んでいるその場で可読性を判断できます。さらに明るい 5 段階と暗い 5 段階を自動生成するので、そのままカラースケールとして利用できます。
CSS / FRONTEND · ブラウザ内で処理
オンラインカラーピッカー
カラーパネルで色を選び、HEX・RGB・HSL とコントラスト比を同時に取得。
計算はすべてブラウザ内で行い、選んだ色は保存されません。コントラスト比は WCAG 2.1 の相対輝度で算出します。
白文字 4.4:1黒文字 4.77:1
- HEX
#785dfc - RGB
rgb(120, 93, 252) - HSL
hsl(250, 96%, 68%)
- 白文字4.4:1AA 未満
- 黒文字4.77:1AA 適合
カラー値
パネルをドラッグして彩度と明度を調整できます。下のスライダーはキーボードでも操作できます。
スケール
明色
暗色
操作手順
- パネルをクリックまたはドラッグして色を選びます。
- 色相スライダーで微調整するか、既存の HEX／RGB／HSL を貼り付けます。
- 必要な形式をコピーするか、スケールから明色・暗色を取得します。
プライバシー
計算もプレビューもすべてこのブラウザ内で行われます。入力が送信・保存されることも、URL やログに記録されることもありません。
よくある質問
- コントラスト比はどのくらい必要ですか。
- WCAG AA では本文に 4.5:1、大きな文字（約 18pt 以上、または 14pt の太字）に 3:1 が求められます。AAA ではそれぞれ 7:1 と 4.5:1 です。本ツールは白文字と黒文字の比率を並べて表示するため、色選びの段階で判断できます。
- 画面上の色をスポイトで取得できますか。
- EyeDropper API に対応したブラウザ（デスクトップ版 Chrome、Edge など）ではスポイトボタンが表示され、画面上の任意の点の色を取得できます。非対応の環境でもパネルと値の入力は使えるため、機能が失われることはありません。