メインコンテンツにスキップ
ToolShed
ホーム
人気
新着
すべてのツール
読み込み中...
ホーム
デザイン・CSS
Tailwindカラーパレット
デザイン・CSS
無料
登録不要
Tailwindカラーパレット
Tailwind CSSの標準カラーパレット一覧。色名とHEXコードの対応表。デザイン参照に便利な無料オンラインツール。
入力
結果
--- 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コードはそのまま使えますか？
+
オフラインでも使えますか？
+
関連ツール
こちらも
おすすめ
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で直感的に作成。多重シャドウ、ニューモーフィズム、テキストシャドウにも対応。コード即コピーの無料ツール。