Fargepaletter

Tailwind CSS-fargen violet

De 11 nyansene av Tailwind CSS-fargen violet, fra violet-50 (lysest) til violet-950 (mørkest). Klikk på en verdi for å kopiere den.

Nyanser av violet

HEX og RGB fra Tailwind v3; OKLCH fra Tailwind v4. Klikk på en verdi for å kopiere den.

violet-50
violet-100
violet-200
violet-300
violet-400
violet-500
violet-600
violet-700
violet-800
violet-900
violet-950

Kopier hele paletten

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-variabler (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;
}

Flere Tailwind-farger

slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanskyblueindigopurplefuchsiapinkrose

Vanlige spørsmål

Hva er HEX-koden for Tailwind violet-500?

I Tailwind v3 er violet-500 #8B5CF6, altså rgb(139, 92, 246). I Tailwind v4 er den definert som oklch(60.6% 0.25 292.717).

Hvordan bruker jeg Tailwind violet i prosjektet mitt?

Med klasser som bg-violet-500, text-violet-700 eller border-violet-200. I Tailwind v4 kan du også bruke CSS-variabelen var(--color-violet-500) i din egen CSS.

Andre rammeverk

Tailwind CSS fargepalettMaterial Design fargepalettBootstraps fargepalettFargepaletter fra rammeverk

Tailwind CSS, Material Design og Bootstrap er varemerker som tilhører sine respektive eiere. Verdiene kommer fra dokumentasjonen og de offentlige pakkene deres: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.