カラーバリエーション生成
HEX または RGB 色を入力し、バランスの取れた明暗、コントラストを確認して、そのまま使える色の値をコピーします。
入力例：#60784b または rgb(96, 120, 75)。
ピッカーを変更するとテキスト値も更新されます。
3～13色を選びます。
元の色
#60784B
rgb(96, 120, 75)
使い方
使い方
- HEX または RGB 色を入力するか、ピッカーで選択します。
- 生成された明るい色・暗い色とコントラストの目安を確認します。
- 個々の HEX・RGB 値、CSS 変数をコピーするか、尺度を CSS ファイルとしてダウンロードします。
色の明暗を生成する方法
生成器は元の色を白に混ぜて明るい段階を、黒に混ぜて暗い段階を作ります。色相の方向を保ちますが、すべての色の知覚上の明るさが同じだとは見なしません。実際の使用環境で結果を確認してください。
コントラストは目安です
各スウォッチについて、WCAG 相対輝度の式を使い、白と黒に対するコントラストを表示します。通常のテキストでは 4.5:1、大きなテキストでは 3:1 が一般的な最低値です。実際のフォントサイズ、太さ、背景、隣接色を画面上で確認してください。
ローカル処理とエクスポート
解析、色の生成、コピー、CSS のダウンロードはブラウザー内で行われます。ダウンロードファイルには :root 配下のカスタムプロパティが含まれ、入力値は他の場所に含まれません。
よくある質問
あわせて知りたいこと
どの色形式を入力できますか？
6 桁または 3 桁の HEX、rgb(96, 120, 75) や rgb(96 120 75) のような RGB 値を使えます。RGB 成分のパーセント指定にも対応します。
生成した色のアクセシビリティは保証されますか？
いいえ。コントラストはテキスト、サイズ、太さ、周囲の背景によって変わります。比率は参考情報であり、アクセシビリティの承認ではありません。
色はアップロードされますか？
いいえ。計算とエクスポートはすべてブラウザー内で行われます。