Barva fuchsia v Tailwind CSS

11 odstínů barvy fuchsia v Tailwind CSS, od fuchsia-50 (nejsvětlejší) po fuchsia-950 (nejtmavší). Klikni na libovolnou hodnotu a zkopíruješ ji.

Odstíny fuchsia

HEX a RGB z Tailwindu v3; OKLCH z Tailwindu v4. Kliknutím na hodnotu ji zkopíruješ.

fuchsia-50

fuchsia-100

fuchsia-200

fuchsia-300

fuchsia-400

fuchsia-500

fuchsia-600

fuchsia-700

fuchsia-800

fuchsia-900

fuchsia-950

Zkopírovat celou paletu

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'
        }
      }
    }
  }
}

Proměnné CSS (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;
}

Další barvy Tailwindu

slate gray zinc neutral stone red orange amber yellow lime green emerald teal cyan sky blue indigo violet purple pink rose

Časté otázky

Jaký je HEX kód Tailwind fuchsia-500?

V Tailwindu v3 je fuchsia-500 #D946EF, tedy rgb(217, 70, 239). V Tailwindu v4 je definovaná jako oklch(66.7% 0.295 322.15).

Jak použít Tailwind fuchsia ve svém projektu?

Pomocí tříd jako bg-fuchsia-500, text-fuchsia-700 nebo border-fuchsia-200. V Tailwindu v4 můžeš ve vlastním CSS použít i proměnnou CSS var(--color-fuchsia-500).

Další frameworky

Tailwind CSS, Material Design a Bootstrap jsou ochranné známky svých vlastníků. Hodnoty pocházejí z jejich dokumentace a veřejných balíčků: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.