shadcn/uiテーマジェネレーター（OKLCH）

shadcn/uiテーマジェネレーター

shadcn/uiテーマジェネレーター：OKLCHのCSS変数 | We.Inc

ブランドの色相、彩度、角丸を選ぶと、ライトモードとダークモード両方のshadcn/ui CSS変数をすべてOKLCHで生成します。ライブプレビューとコントラストチェック付きです。

shadcn/uiのコンポーネントは、--primary、--muted、--borderなど、OKLCHで書かれたCSS変数から色を読み取ります。ここで色相、彩度、明度、グレーの色味、角丸を選び、ライトとダークのライブプレビューとコントラスト比を確認してから、生成された:rootと.darkのブロックをグローバルスタイルシートに貼り付けましょう。

どのテーマでも定義される変数のペア

テーマ設定のドキュメントでは約30個の変数が定義されています。プライマリカラーを変えると、その上で読みやすく保てるテキスト色も変わるため、手で編集すると時間がかかります。このジェネレーターは、いくつかの選択から変数一式を導き出し、各背景面に読みやすい前景色を選び、一般的なコントラスト目標を下回るペアを警告します。

よくある質問

HSLではなくOKLCHを使うのはなぜですか？

OKLCHの明度は色の見た目の明るさに沿っているので、Lが同じ2色は色相が違っても同じくらい明るく感じられます。そのため、対になるライトとダークのセットが作りやすくなります。現在の公式テーマ設定ドキュメントは、すべての色にOKLCHを使っています。

OKLCHの各数値の意味は？

Lは0（黒）から1（白）までの明度、Cは彩度で色の鮮やかさを表し、グレーは0から始まります。Hは度単位の色相角です。oklch(1 0 0 / 10%)のように、スラッシュの後に任意でアルファを付けられます。

--radiusは何を変えますか？

コンポーネントはこの1つの値をもとに角を丸めます。テーマ設定のドキュメントではデフォルトが0.625remで、@theme inlineブロックがそこから小さい段階と大きい段階の角丸を導き出します。

古いプロジェクトでも使えますか？

古いテンプレートのプロジェクトでは、色を別の形式で保存し、Tailwindの設定で別の方法で対応付けていることがあります。何かを置き換える前に、自分のglobals.cssとここの変数を比べてください。

コントラスト比は正確ですか？

各OKLCHの色をsRGBに変換し、範囲外の値は切り詰めたうえでWCAG 2の計算式を使っています。範囲外の色は、広色域の画面では少し違って表示されます。

パレットの導き方

ダークモードの細かな点

出力例：Blueプリセット

これはジェネレーターがBlueプリセットで実際に書き出す内容です。globals.cssの色のブロックに上書きして貼り付けてください。

globals.cssの色のブロック

ライトの値は:rootに、ダークの値は.darkに入り、どちらもOKLCHです。

独自のカラートークンを追加する

bg-warningとして使える警告色

両方のモードでペアを定義し、@theme inlineを通じてTailwindに公開します。

プリセット：ニュートラル、ブルー、バイオレット、グリーン、オレンジ、ローズ。色相、彩度、明度、グレーの色味、角丸を調整し、ライトとダークでプレビューして、CSSをコピーします。

プロジェクトを作成

新しいプロジェクトをワンクリックでデプロイ。

名前

Acmeのサイト

デプロイ

キャンセル

削除

ホバー中のメニュー項目

チャートの色

テーマを作成

プリセット

sRGBで約{hex}

、標準の色域を外れるため画面では切り詰められます

色相：{n}°

彩度：{n}

明度：{n}

グレーの色味：{n}

角丸：{n}rem

プレビューモード

ライト

ダーク

ライトモードのコントラスト（WCAG 2の比率）

ダークモードのコントラスト（WCAG 2の比率）

背景面上のテキスト

比率

{b}上の{f}

合格

不足

CSSをコピー

無料で始める · クレジットカード不要

関連: 無料ツール｜ビジネス向け計算・生成ツール

製品

ご利用いただける方

機能

リソース

会社情報

サイトマップを見る