Tailwind カラーパレット
デフォルトの Tailwind パレット全体のビジュアルリファレンス（v3.4 と v4 で同じデフォルト値）。各スウォッチにシェード番号と HEX、コピーモードトグルでコードベースが望む形式で値を取得：`bg-slate-700`、`#334155`、または `rgb(51, 65, 85)`。色相名または HEX 部分文字列で検索フィルタ。
—
コピー:
slate
gray
zinc
neutral
stone
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose
Tailwind CSS v3.4 / v4 のデフォルトテーマ値。
使い方
- コピー形式を選択 — Tailwind ユーティリティには Class、デザインツールには HEX、CSS 変数には rgb()。
- スウォッチをクリックして値をコピー。チェックマークが一瞬コピーを確認。
- 色相（`emerald`）または HEX 断片（`fde0`）を入力してフィルタ。
よくある質問
- Tailwind v4 とマッチする？
- はい — v4 のデフォルトテーマは v3.4 と同じ色相・シェード値を保持するため、パレットは同一。設定で `theme.colors` をカスタマイズしている場合、プロジェクトのパレットは異なる可能性あり。
- なぜグレー系が 5 つも？
- Tailwind は slate・gray・zinc・neutral・stone の 5 つのニュートラル色相を提供：slate はクールなブルー寄り、gray はニュートラル、zinc はよりクールでスティールっぽい、neutral は真のニュートラル、stone は暖かい灰褐色。アクセントに最も合うものを選ぶ。
- シェード 950 の意味は？
- Tailwind は v3.3 で既存の 50〜900 はしごに加えて、より暗い 950 ステップを追加。色相のかすかなヒントを持つほぼ黒 — 深いダークモード背景や非常に微妙なボーダーに有用。
関連ツール
カラーソート
16 進カラーのリストを貼り付けて色相、彩度、明度、または知覚的明るさでソート — デザイントークンパレットを整えるのに便利。
カラー 0 0
色のシェード・ティント生成器
基本色からティント（明るく）·シェード（暗く）·トーン（グレー混合）を生成。2〜20 ステップ、HEX·RGB·HSL 出力。
カラー 0 0
カラーパレット ジェネレーター
ベースカラーを選んで、クラシックなカラーホイールのハーモニーを取得 — 補色、スプリット補色、トライアド、テトラド、スクエア、アナロガス、モノクロマティック。
カラー 0 0
画像からカラーパレット抽出
画像をドロップすると Canvas で主要色を分析しパレット抽出 — HEX をコピーまたは一括取得。
カラー 0 0
カラートークンエクスポーター
カラーパレットを1回定義 → CSSカスタムプロパティ·Tailwind設定·SCSS·LESS·デザイントークンJSON·SwiftUI Color·Android `colors.xml` にエクスポート。ライブプレビュースウォッチ。
カラー 0 0
カラー名検索
任意のhex/RGB色に最も近いCSS・Tailwind・XKCD色名をOKLabの知覚距離で順位付け表示。
カラー 0 0