Цвет violet в Tailwind CSS

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

Оттенки violet

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

violet-50

violet-100

violet-200

violet-300

violet-400

violet-500

violet-600

violet-700

violet-800

violet-900

violet-950

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

Tailwind v4 (CSS, @theme)

@theme {
  --color-violet-50: oklch(96.9% 0.016 293.756);
  --color-violet-100: oklch(94.3% 0.029 294.588);
  --color-violet-200: oklch(89.4% 0.057 293.283);
  --color-violet-300: oklch(81.1% 0.111 293.571);
  --color-violet-400: oklch(70.2% 0.183 293.541);
  --color-violet-500: oklch(60.6% 0.25 292.717);
  --color-violet-600: oklch(54.1% 0.281 293.009);
  --color-violet-700: oklch(49.1% 0.27 292.581);
  --color-violet-800: oklch(43.2% 0.232 292.759);
  --color-violet-900: oklch(38% 0.189 293.745);
  --color-violet-950: oklch(28.3% 0.141 291.089);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        violet: {
          50: '#f5f3ff',
          100: '#ede9fe',
          200: '#ddd6fe',
          300: '#c4b5fd',
          400: '#a78bfa',
          500: '#8b5cf6',
          600: '#7c3aed',
          700: '#6d28d9',
          800: '#5b21b6',
          900: '#4c1d95',
          950: '#2e1065'
        }
      }
    }
  }
}

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

:root {
  --violet-50: #F5F3FF;
  --violet-100: #EDE9FE;
  --violet-200: #DDD6FE;
  --violet-300: #C4B5FD;
  --violet-400: #A78BFA;
  --violet-500: #8B5CF6;
  --violet-600: #7C3AED;
  --violet-700: #6D28D9;
  --violet-800: #5B21B6;
  --violet-900: #4C1D95;
  --violet-950: #2E1065;
}

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

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

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

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

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

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

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

В Tailwind v3 violet-500 — это #8B5CF6, то есть rgb(139, 92, 246). В Tailwind v4 он задан как oklch(60.6% 0.25 292.717).

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

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