カラーシェードジェネレーター

状態表示とテキスト用のシェード

ボタンの色に黒を10–20%混ぜたシェードは、別の色に見えない程度に変化が分かる、ホバー時や押下時の状態としてよく使われます。黒を60–80%混ぜた濃いシェードは、ブランドカラーを見出しやテキスト向けの深い色に変えながら、パレットの一部として認識できる色にします。これらは白い背景でコントラストを満たしやすい段階です。色の段階が均一になるよう、すべて元のベース色から作ってください。

暗い色が濁って見えるとき

黒と混ぜるとすべてのチャンネルが同じ割合で変化するため、色相は保たれても、私たちが色を呼ぶときの印象は保たれません。暗い黄色はオリーブ色、暗いオレンジは茶色、暗いピンクはマルーンに見えますが、計算自体は正しく行われています。シェードが濁って見える場合、デザイナーは暗くする前に色相を少しずらすことがあります。たとえば黄色をオレンジ寄りにします。カラーミキサーでは、純粋な黒ではなく濃いネイビーや茶色に向けて暗くし、より豊かな色にできます。

使い方

1. #RGBまたは#RRGGBBの有効な値と、指定のパーセンテージを入力します。
2. 固定のブラウザ内ローカルのカラー演算を実行します。
3. スウォッチを確認し、結果またはパレットの値をコピーします。

プライバシーと制限事項

色の値はこのデバイス内にとどまります。コントラストの出力は数学的なチェッカーであり、包括的なWCAG準拠の保証ではありません。文脈、フォントレンダリング、非テキストのコントラスト、ユーザーインターフェースの状態は引き続き確認が必要です。