ティント＆シェード

このツールについて

このティント・シェード作成ツールは、任意のベースカラーから、白を混ぜた明るいティントと黒を混ぜた暗いシェードを 5・10・20 段階で作成し、CSS 変数として出力します。

使い方

1. ベースカラーを選びます。
2. 5、10、20 のいずれかの段階数を選びます。
3. 色見本をクリックすると HEX 値をコピーできます。
4. 「CSS 変数としてコピー」をクリックすると、スケール全体を書き出せます。

知っておきたいこと

• ティントは色に白を混ぜたもの、シェードは色に黒を混ぜたものです。
• RGB で均等な段階ずつ混ぜるため、どの段階でも色は同じ量だけ変化します。
• Tailwind などのデザインシステムでは、各ブランドカラーのティントとシェードから作った 50–900 のスケールを使います。
• スケールの中間の段階は白地で WCAG AA を満たさないことが多いため、スケールから文字色を選ぶ場合はコントラストを確認してください。

すべてブラウザ内で動作します。入力した内容がアップロード・保存されることはありません。

よくある質問