Fargepaletter

Tailwind CSS-fargen fuchsia

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

Nyanser av fuchsia

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

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

Kopier hele paletten

Tailwind v4 (CSS, @theme)

@theme {
  --color-fuchsia-50: oklch(97.7% 0.017 320.058);
  --color-fuchsia-100: oklch(95.2% 0.037 318.852);
  --color-fuchsia-200: oklch(90.3% 0.076 319.62);
  --color-fuchsia-300: oklch(83.3% 0.145 321.434);
  --color-fuchsia-400: oklch(74% 0.238 322.16);
  --color-fuchsia-500: oklch(66.7% 0.295 322.15);
  --color-fuchsia-600: oklch(59.1% 0.293 322.896);
  --color-fuchsia-700: oklch(51.8% 0.253 323.949);
  --color-fuchsia-800: oklch(45.2% 0.211 324.591);
  --color-fuchsia-900: oklch(40.1% 0.17 325.612);
  --color-fuchsia-950: oklch(29.3% 0.136 325.661);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        fuchsia: {
          50: '#fdf4ff',
          100: '#fae8ff',
          200: '#f5d0fe',
          300: '#f0abfc',
          400: '#e879f9',
          500: '#d946ef',
          600: '#c026d3',
          700: '#a21caf',
          800: '#86198f',
          900: '#701a75',
          950: '#4a044e'
        }
      }
    }
  }
}

CSS-variabler (HEX)

:root {
  --fuchsia-50: #FDF4FF;
  --fuchsia-100: #FAE8FF;
  --fuchsia-200: #F5D0FE;
  --fuchsia-300: #F0ABFC;
  --fuchsia-400: #E879F9;
  --fuchsia-500: #D946EF;
  --fuchsia-600: #C026D3;
  --fuchsia-700: #A21CAF;
  --fuchsia-800: #86198F;
  --fuchsia-900: #701A75;
  --fuchsia-950: #4A044E;
}

Flere Tailwind-farger

slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplepinkrose

Vanlige spørsmål

Hva er HEX-koden for Tailwind fuchsia-500?

I Tailwind v3 er fuchsia-500 #D946EF, altså rgb(217, 70, 239). I Tailwind v4 er den definert som oklch(66.7% 0.295 322.15).

Hvordan bruker jeg Tailwind fuchsia i prosjektet mitt?

Med klasser som bg-fuchsia-500, text-fuchsia-700 eller border-fuchsia-200. I Tailwind v4 kan du også bruke CSS-variabelen var(--color-fuchsia-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.