Tailwind CSSのemerald

Tailwind CSSのemeraldの11段階のシェードです。最も明るいemerald-50から最も暗いemerald-950まで並んでいます。値をクリックするとコピーできます。

emeraldのシェード

HEXとRGBはTailwind v3、OKLCHはTailwind v4の値です。値をクリックするとコピーできます。

emerald-50

emerald-100

emerald-200

emerald-300

emerald-400

emerald-500

emerald-600

emerald-700

emerald-800

emerald-900

emerald-950

パレットをまとめてコピー

Tailwind v4（CSS、@theme）

@theme {
  --color-emerald-50: oklch(97.9% 0.021 166.113);
  --color-emerald-100: oklch(95% 0.052 163.051);
  --color-emerald-200: oklch(90.5% 0.093 164.15);
  --color-emerald-300: oklch(84.5% 0.143 164.978);
  --color-emerald-400: oklch(76.5% 0.177 163.223);
  --color-emerald-500: oklch(69.6% 0.17 162.48);
  --color-emerald-600: oklch(59.6% 0.145 163.225);
  --color-emerald-700: oklch(50.8% 0.118 165.612);
  --color-emerald-800: oklch(43.2% 0.095 166.913);
  --color-emerald-900: oklch(37.8% 0.077 168.94);
  --color-emerald-950: oklch(26.2% 0.051 172.552);
}

Tailwind v3（tailwind.config.js）

module.exports = {
  theme: {
    extend: {
      colors: {
        emerald: {
          50: '#ecfdf5',
          100: '#d1fae5',
          200: '#a7f3d0',
          300: '#6ee7b7',
          400: '#34d399',
          500: '#10b981',
          600: '#059669',
          700: '#047857',
          800: '#065f46',
          900: '#064e3b',
          950: '#022c22'
        }
      }
    }
  }
}

CSS変数（HEX）

:root {
  --emerald-50: #ECFDF5;
  --emerald-100: #D1FAE5;
  --emerald-200: #A7F3D0;
  --emerald-300: #6EE7B7;
  --emerald-400: #34D399;
  --emerald-500: #10B981;
  --emerald-600: #059669;
  --emerald-700: #047857;
  --emerald-800: #065F46;
  --emerald-900: #064E3B;
  --emerald-950: #022C22;
}

Tailwindのほかの色

slate gray zinc neutral stone red orange amber yellow lime green teal cyan sky blue indigo violet purple fuchsia pink rose

よくある質問

Tailwind emerald-500のHEXコードは？

Tailwind v3ではemerald-500は#10B981、つまりrgb(16, 185, 129)です。Tailwind v4ではoklch(69.6% 0.17 162.48)として定義されています。

Tailwind emeraldをプロジェクトで使うには？

bg-emerald-500、text-emerald-700、border-emerald-200などのクラスを使います。Tailwind v4では、独自のCSSでCSS変数var(--color-emerald-500)を使うこともできます。

ほかのフレームワーク

Tailwind CSS、Material Design、Bootstrapはそれぞれの所有者の商標です。値は各プロジェクトの公式ドキュメントと公開パッケージに基づいています：Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2。