Színpaletták

Tailwind CSS szín: rose

A Tailwind CSS 11 árnyalata ebből a színből (rose): rose-50 a legvilágosabb, rose-950 a legsötétebb. Kattints egy értékre a másoláshoz.

Árnyalatok: rose

HEX és RGB a Tailwind v3-ból, OKLCH a Tailwind v4-ből. Kattints egy értékre a másoláshoz.

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

A teljes paletta másolása

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-változók (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;
}

További Tailwind színek

slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapink

Gyakori kérdések

Mi a Tailwind rose-500 HEX-kódja?

A Tailwind v3-ban: rose-500 = #F43F5E, vagyis rgb(244, 63, 94). A Tailwind v4-ben ugyanez a szín így van megadva: oklch(64.5% 0.246 16.439).

Hogyan használom a Tailwind rose színt a projektemben?

Olyan osztályokkal, mint a bg-rose-500, a text-rose-700 vagy a border-rose-200. A Tailwind v4-ben a var(--color-rose-500) CSS-változót is használhatod a saját CSS-edben.

Más keretrendszerek

Tailwind CSS színpalettaMaterial Design színpalettaA Bootstrap színpalettájaKeretrendszerek színpalettái

A Tailwind CSS, a Material Design és a Bootstrap a tulajdonosaik védjegyei. Az értékek a dokumentációjukból és nyilvános csomagjaikból származnak: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.