컬러 팔레트

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의 다른 색

slategrayzincneutralstoneredorangeamberyellowlimegreentealcyanskyblueindigovioletpurplefuchsiapinkrose

자주 묻는 질문

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, Material Design, Bootstrap은 각 소유자의 상표예요. 값은 각 프로젝트의 공식 문서와 공개 패키지를 바탕으로 해요: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.