カラーティントジェネレーター

明るい色の段階を作る

デザインシステムでは、白と混ぜて明るい段階を作ることがよくあります。Bootstrapのtint-color()もこの方法です。白を80–95%混ぜた色はアラート、選択行、バッジの背景に使え、20–40%ならホバー時の塗りやイラストに使える、ブランドカラーを柔らかくした色になります。各段階はティントした色ではなく元のベース色から作り、パーセンテージの意味を保ってください。最も明るい段階でテキストやアイコンを使う場合は、ベース色自体を使います。

ティントが白っぽく見える理由

白を加えると明度だけでなく彩度も下がるため、薄いティントはミルキーに見えます。特に青はラベンダー寄りに変化することがあります。明るい段階の色がしっくりこない場合は、ベース色の彩度を少し上げるか、カラコンバーターで明度を直接設定して比較してください。ティントが明るくなるほど、暗いテキストはコントラスト基準を満たしやすくなります。使う組み合わせはコントラストチェッカーで確認してください。

使い方

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

プライバシーと制限事項

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