Цвет yellow в Tailwind CSS

11 оттенков цвета yellow в Tailwind CSS, от yellow-50 (самый светлый) до yellow-950 (самый тёмный). Нажми на любое значение, чтобы скопировать его.

Оттенки yellow

HEX и RGB из Tailwind v3; OKLCH из Tailwind v4. Нажми на значение, чтобы скопировать его.

yellow-50

yellow-100

yellow-200

yellow-300

yellow-400

yellow-500

yellow-600

yellow-700

yellow-800

yellow-900

yellow-950

Скопировать всю палитру

Tailwind v4 (CSS, @theme)

@theme {
  --color-yellow-50: oklch(98.7% 0.026 102.212);
  --color-yellow-100: oklch(97.3% 0.071 103.193);
  --color-yellow-200: oklch(94.5% 0.129 101.54);
  --color-yellow-300: oklch(90.5% 0.182 98.111);
  --color-yellow-400: oklch(85.2% 0.199 91.936);
  --color-yellow-500: oklch(79.5% 0.184 86.047);
  --color-yellow-600: oklch(68.1% 0.162 75.834);
  --color-yellow-700: oklch(55.4% 0.135 66.442);
  --color-yellow-800: oklch(47.6% 0.114 61.907);
  --color-yellow-900: oklch(42.1% 0.095 57.708);
  --color-yellow-950: oklch(28.6% 0.066 53.813);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        yellow: {
          50: '#fefce8',
          100: '#fef9c3',
          200: '#fef08a',
          300: '#fde047',
          400: '#facc15',
          500: '#eab308',
          600: '#ca8a04',
          700: '#a16207',
          800: '#854d0e',
          900: '#713f12',
          950: '#422006'
        }
      }
    }
  }
}

CSS-переменные (HEX)

:root {
  --yellow-50: #FEFCE8;
  --yellow-100: #FEF9C3;
  --yellow-200: #FEF08A;
  --yellow-300: #FDE047;
  --yellow-400: #FACC15;
  --yellow-500: #EAB308;
  --yellow-600: #CA8A04;
  --yellow-700: #A16207;
  --yellow-800: #854D0E;
  --yellow-900: #713F12;
  --yellow-950: #422006;
}

Другие цвета Tailwind

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

Попробуй также

Палитра цветов из имениНапиши имя и получи собственную палитру цветов Счастливый цвет дняТвой счастливый цвет дня по знаку зодиака Какая у меня форма лица?Узнай форму лица, подходящие стрижки и очки

Все бесплатные инструменты →

Частые вопросы

Какой HEX-код у Tailwind yellow-500?

В Tailwind v3 yellow-500 — это #EAB308, то есть rgb(234, 179, 8). В Tailwind v4 он задан как oklch(79.5% 0.184 86.047).

Как использовать Tailwind yellow в своём проекте?

С помощью классов вроде bg-yellow-500, text-yellow-700 или border-yellow-200. В Tailwind v4 в собственном CSS можно использовать и CSS-переменную var(--color-yellow-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.