Fargepaletter

Tailwind CSS-fargen rose

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

Nyanser av rose

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

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

Kopier hele paletten

Tailwind v4 (CSS, @theme)

@theme {
  --color-rose-50: oklch(96.9% 0.015 12.422);
  --color-rose-100: oklch(94.1% 0.03 12.58);
  --color-rose-200: oklch(89.2% 0.058 10.001);
  --color-rose-300: oklch(81% 0.117 11.638);
  --color-rose-400: oklch(71.2% 0.194 13.428);
  --color-rose-500: oklch(64.5% 0.246 16.439);
  --color-rose-600: oklch(58.6% 0.253 17.585);
  --color-rose-700: oklch(51.4% 0.222 16.935);
  --color-rose-800: oklch(45.5% 0.188 13.697);
  --color-rose-900: oklch(41% 0.159 10.272);
  --color-rose-950: oklch(27.1% 0.105 12.094);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        rose: {
          50: '#fff1f2',
          100: '#ffe4e6',
          200: '#fecdd3',
          300: '#fda4af',
          400: '#fb7185',
          500: '#f43f5e',
          600: '#e11d48',
          700: '#be123c',
          800: '#9f1239',
          900: '#881337',
          950: '#4c0519'
        }
      }
    }
  }
}

CSS-variabler (HEX)

:root {
  --rose-50: #FFF1F2;
  --rose-100: #FFE4E6;
  --rose-200: #FECDD3;
  --rose-300: #FDA4AF;
  --rose-400: #FB7185;
  --rose-500: #F43F5E;
  --rose-600: #E11D48;
  --rose-700: #BE123C;
  --rose-800: #9F1239;
  --rose-900: #881337;
  --rose-950: #4C0519;
}

Flere Tailwind-farger

slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapink

Vanlige spørsmål

Hva er HEX-koden for Tailwind rose-500?

I Tailwind v3 er rose-500 #F43F5E, altså rgb(244, 63, 94). I Tailwind v4 er den definert som oklch(64.5% 0.246 16.439).

Hvordan bruker jeg Tailwind rose i prosjektet mitt?

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