生成されたCSSコードはそのまま使えますか？

はい。Tailwindカラーパレットが出力するCSSは標準仕様に準拠しており、CSSファイルやstyle属性にそのままコピー＆ペーストして使用できます。

オフラインでも使えますか？

ページを一度読み込んだあとは、多くの処理がブラウザ内で完結するためネットワーク接続が切れても動作します。ただし初回アクセス時はオンラインが必要です。

デザイン・CSS無料登録不要

Tailwindカラーパレット

Tailwind CSSの標準カラーパレット一覧。色名とHEXコードの対応表。デザイン参照に便利な無料オンラインツール。

Input

Result

--- slate ---
50:#f8fafc 100:#f1f5f9 200:#e2e8f0 300:#cbd5e1 400:#94a3b8
500:#64748b 600:#475569 700:#334155 800:#1e293b 900:#0f172a 950:#020617

--- red ---
50:#fef2f2 100:#fee2e2 200:#fecaca 300:#fca5a5 400:#f87171
500:#ef4444 600:#dc2626 700:#b91c1c 800:#991b1b 900:#7f1d1d 950:#450a0a

--- blue ---
50:#eff6ff 100:#dbeafe 200:#bfdbfe 300:#93c5fd 400:#60a5fa
500:#3b82f6 600:#2563eb 700:#1d4ed8 800:#1e40af 900:#1e3a8a 950:#172554

--- green ---
50:#f0fdf4 100:#dcfce7 200:#bbf7d0 300:#86efac 400:#4ade80
500:#22c55e 600:#16a34a 700:#15803d 800:#166534 900:#14532d 950:#052e16

--- purple ---
50:#faf5ff 100:#f3e8ff 200:#e9d5ff 300:#d8b4fe 400:#c084fc
500:#a855f7 600:#9333ea 700:#7e22ce 800:#6b21a8 900:#581c87 950:#3b0764

FAQ

よくある質問

Tailwindカラーパレットは完全無料です。登録やログイン、課金、アプリのインストールは不要で、ブラウザがあればすぐに利用できます。

こちらもおすすめ

CSS→Tailwind変換

CSSプロパティを対応するTailwindCSSクラスに変換。Tailwindへの移行・学習に便利な無料オンラインツール。

Tailwindブレークポイント

Tailwind CSSのブレークポイント(sm/md/lg/xl/2xl)とピクセル値の対応表。レスポンシブ設計に便利な無料オンラインツール。

Tailwind CSSクラス検索

Tailwind CSSのユーティリティクラスをキーワードで検索。CSSプロパティとの対応表付き。Tailwind開発の必須リファレンス。無料ツール。

Tailwindスペーシング

Tailwind CSSのスペーシング値(p-/m-/gap-)とpx値の対応表。レイアウト設計に便利な無料オンラインツール。

border-radiusジェネレーター

CSSのborder-radiusをGUIで視覚的に調整。4隅個別・楕円形の角丸にも対応。コードをコピーしてすぐ使える無料オンラインツール。

Box Shadow生成

CSS box-shadowをGUIで直感的に作成。多重シャドウ、ニューモーフィズム、テキストシャドウにも対応。コード即コピーの無料ツール。

読み込み中...