無料 · デザインとCSS
Tailwind カラーシェード生成.
ブランドカラー 1 色から OKLCH で 50〜950 の Tailwind パレットを作成。hex 値、コントラスト比、Tailwind v4 の @theme、v3 設定、CSS 変数のコード付き。
Loading the calculator…
使い方: Tailwind カラーシェード生成
データを入力するかファイルを選び、設定を調整して結果を生成します。コピーやダウンロードの前に結果を確認してください。
制限と対応形式
入力内容はお使いの端末で処理されます。
英語の技術説明
Lightness steps imitate Tailwind’s default palette; check important text pairs for contrast. Everything is calculated in your browser; nothing you type is uploaded.
Each step has a target OKLCH lightness from 0.971 (50) to 0.258 (950); chroma rises and falls around the middle in proportion to your colour, and is reduced where needed to stay in sRGB.
Teal #0d9488 becomes 11 shades from #f2f7f6 to #072a26 and is kept exactly at step 600.