Fargepaletter

Tailwind CSS-fargen cyan

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

Nyanser av cyan

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

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

Kopier hele paletten

Tailwind v4 (CSS, @theme)

@theme {
  --color-cyan-50: oklch(98.4% 0.019 200.873);
  --color-cyan-100: oklch(95.6% 0.045 203.388);
  --color-cyan-200: oklch(91.7% 0.08 205.041);
  --color-cyan-300: oklch(86.5% 0.127 207.078);
  --color-cyan-400: oklch(78.9% 0.154 211.53);
  --color-cyan-500: oklch(71.5% 0.143 215.221);
  --color-cyan-600: oklch(60.9% 0.126 221.723);
  --color-cyan-700: oklch(52% 0.105 223.128);
  --color-cyan-800: oklch(45% 0.085 224.283);
  --color-cyan-900: oklch(39.8% 0.07 227.392);
  --color-cyan-950: oklch(30.2% 0.056 229.695);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        cyan: {
          50: '#ecfeff',
          100: '#cffafe',
          200: '#a5f3fc',
          300: '#67e8f9',
          400: '#22d3ee',
          500: '#06b6d4',
          600: '#0891b2',
          700: '#0e7490',
          800: '#155e75',
          900: '#164e63',
          950: '#083344'
        }
      }
    }
  }
}

CSS-variabler (HEX)

:root {
  --cyan-50: #ECFEFF;
  --cyan-100: #CFFAFE;
  --cyan-200: #A5F3FC;
  --cyan-300: #67E8F9;
  --cyan-400: #22D3EE;
  --cyan-500: #06B6D4;
  --cyan-600: #0891B2;
  --cyan-700: #0E7490;
  --cyan-800: #155E75;
  --cyan-900: #164E63;
  --cyan-950: #083344;
}

Flere Tailwind-farger

slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealskyblueindigovioletpurplefuchsiapinkrose

Vanlige spørsmål

Hva er HEX-koden for Tailwind cyan-500?

I Tailwind v3 er cyan-500 #06B6D4, altså rgb(6, 182, 212). I Tailwind v4 er den definert som oklch(71.5% 0.143 215.221).

Hvordan bruker jeg Tailwind cyan i prosjektet mitt?

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