カラーパレットビジュアライザー
パレットやブランドカラーを、実際のフォント、リアルタイムのコントラストチェック、ライト・ダークモード付きの完成した Web サイトで確認できます。
実際の UI で配色をプレビューする方法
- パレットから始めます。たとえばジェネレーターからパレットを開きます。または「ブランドカラーから」に切り替えて 1 色を選びます。
- プレビューのテンプレートをランディングページ、ダッシュボード、モバイルアプリ、記事から選び、ライトモードとダークモードを切り替えます。
- 背景やプライマリなどのロールをクリックしてパレットの別の色を割り当てるか、「ロールをシャッフル」で別の割り当てを試します。フォントの組み合わせを選んだり、フォントをシャッフルしたりもできます。
- リアルタイムのコントラスト一覧を確認し、不合格の組み合わせには「修正」を適用します。最後にロールを CSS 変数、Tailwind v4、shadcn/ui のトークンとしてコピーするか、リンクをコピーしてプレビューを共有します。
できること
4 つのプレビューテンプレート
ランディングページ、ダッシュボード、モバイルアプリの画面、記事のレイアウトで配色を確認できます。
ロールの割り当て
パレットのどの色を背景、文字、主要な操作、そのほかの UI ロールにするかを決められます。変更はいつでもリセットできます。
実際のフォント
内蔵のリストから見出しと本文のフォントを組み合わせ、タイプスケール付きでプレビューに反映できます。
リアルタイムのコントラストチェック
主要な文字と背景の組み合わせを編集中に随時チェックし、不合格の組み合わせはワンクリックで修正できます。
ライトモードとダークモード
プレビュー全体をライトとダークで切り替えて、配色の両方のバージョンを確認できます。
書き出しと共有
ロールを CSS 変数、Tailwind v4、shadcn/ui のトークンとしてコピーしたり、同じプレビューを開けるリンクをコピーしたりできます。
よくある質問
カラーパレットを Web サイト上でプレビューするには？
パレットを指定してビジュアライザーを開き、ランディングページやダッシュボードなどのテンプレートを選ぶと、レイアウト全体に配色が反映されます。ライトモードとダークモードを切り替えたり、どの色をどのロールに使うかを変えたりできます。
なぜ実際のレイアウトでパレットを確認するのですか？
スウォッチだけでは問題が見えないからです。ページ上なら、色がボタン、リンク、本文、カードの背景としてどう見えるか、その上の文字が読みやすいままかがわかります。
パレットの代わりに自分のブランドカラーを使えますか？
はい。「ブランドカラーから」を選んで HEX コードを入力すると、ビジュアライザーがその 1 色から UI のロールを作成します。
ビジュアライザーでアクセシビリティを確認できますか？
はい。主要な文字と背景の組み合わせのコントラストを一覧にし、不合格のものに印を付け、その組み合わせの色を調整する「修正」を提案します。
色を書き出すには？
「共有と書き出し」セクションで、ロールを CSS 変数、Tailwind v4 のテーマ、shadcn/ui のトークンとしてコピーするか、プレビューへのリンクをコピーします。