カラーシェード ジェネレーター
ティント、シェード、WCAGコントラストスコアを含む完全なカラーパレットを作成
カラーシェード ジェネレーター
使用例
明るいティント(50-200)は背景や控えめなハイライトに最適です。
中間シェード(400-600)はボタン、リンク、主要要素に理想的です。
暗いシェード(700-900)は見出しや高コントラストのテキストに最適です。
常にWCAGコントラストを確認してください。AAは通常のテキストに4.5:1が必要です。
コントラスト
WCAG contrast requirements
- AA: 4.5:1 (Normal text)
- AA 大: 3:1 (Large text)
- AAA: 7:1 (Normal text)
機能
完全な50-900パレット
任意のベースカラーから完全なTailwindスタイルパレットを生成
WCAGコントラスト
各シェードが白と黒の背景に対するコントラストスコアを表示
複数のエクスポート形式
CSS変数、SCSS、Tailwind設定、JSONとしてコピー
プライベート＆オフライン
完全にブラウザ内で動作し、サーバーにデータは送信されません
使用方法
ベースカラーを選択
ピッカーで色を選択するか、HEX、RGB、HSL値を入力します。
パレットを確認
アクセシビリティのためのWCAGコントラストインジケーター付きで生成されたシェードを確認します。
エクスポートまたはコピー
個別の色をコピーするか、パレット全体をCSS、SCSS、Tailwind、JSONとしてエクスポートします。
よくある質問
カラーシェードジェネレーターとは？
カラーシェードジェネレーターは、単一のベースカラーからティントとシェードの完全な範囲を作成します。どの明るい、または暗いバリエーションを使用するか推測する代わりに、ボタン、背景、境界線、テキストで機能する一貫したパレットが得られます。このツールは、人気のTailwind CSSカラーシステムに合わせて、50(最も明るい)から900(最も暗い)までの10ステップのスケールを生成します。
仕組み
ジェネレーターはベースカラーをHSLに変換し、明度値を調整して10の均等に分散されたステップを作成します。次に、各シェードはWCAG 2.1コントラスト式を使用して白と黒の背景に対して評価されるため、どの色がテキストにアクセシブルかすぐにわかります。すべてはサーバーとのやり取りなしにブラウザ内で実行されます。
一般的なユースケース
デザイナーはシェードジェネレーターを使用してブランドパレットを構築し、デザイントークンを作成し、製品全体で視覚的な一貫性を維持します。開発者は、Tailwind設定エントリやCSSカスタムプロパティを生成するために愛用しています。これらはアクセシビリティ監査にも不可欠で、WCAG AAまたはAAA要件を満たすテキストと背景のペアを選択するのに役立ちます。
プライバシーとセキュリティ
このカラーシェードジェネレーターは100%クライアントサイドです。すべての色計算はJavaScriptを使用してブラウザで行われます。色、パレット、エクスポートはいかなるサーバーにも送信されません。Cookieはあなたの選択を追跡せず、現在のセッションを超えて何も保存されません。機密のブランド作業や内部デザインシステムに安全です。
Webデザインのための色彩理論 - シェードとWCAGコントラスト
色彩理論、シェード、WCAGコントラスト基準、完全なデザインシステムパレットの構築方法をマスターしましょう。