Tailwind Fuchsia Colors: Shades, Contrast & Codes

Tailwind CSS 4.3.3

fuchsia: current colors

11 shades with exact official OKLCH values. Use bg-fuchsia-500, text-fuchsia-500 or border-fuchsia-500 in Tailwind. Wide-gamut colors are preserved; these are not the v3 hex values.

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

Source: Tailwind CSS 4.3.3 theme.css (MIT). Values are pinned to this release. Older v3 reference values below are kept separately for existing projects.

Scale

Every shade, 50 to 950

Each shade has a page of its own. Under each, white and black text on it; a bold figure passes 4.5:1.

50#FDF4FF
White
1.07
Black
19.56
100#FAE8FF
White
1.16
Black
18.05
200#F5D0FE
White
1.36
Black
15.33
300#F0ABFC
White
1.75
Black
11.93
400#E879F9
White
2.46
Black
8.53
500#D946EF
White
3.45
Black
6.07
600#C026D3
White
4.70
Black
4.45
700#A21CAF
White
6.32
Black
3.32
800#86198F
White
8.23
Black
2.54
900#701A75
White
10.03
Black
2.09
950#4A044E
White
14.80
Black
1.41

Values

Hex, RGB and OKLCH values

The Tailwind CSS v3.4 values, with the contrast of white and black text on each shade.

Shade	HEX	RGB	OKLCH	White text	Black text
fuchsia-50	`#FDF4FF`	`rgb(253, 244, 255)`	`oklch(0.977 0.017 320.1)`	1.07	19.56
fuchsia-100	`#FAE8FF`	`rgb(250, 232, 255)`	`oklch(0.952 0.036 318.9)`	1.16	18.05
fuchsia-200	`#F5D0FE`	`rgb(245, 208, 254)`	`oklch(0.903 0.073 319.6)`	1.36	15.33
fuchsia-300	`#F0ABFC`	`rgb(240, 171, 252)`	`oklch(0.833 0.132 321.4)`	1.75	11.93
fuchsia-400	`#E879F9`	`rgb(232, 121, 249)`	`oklch(0.748 0.207 322.2)`	2.46	8.53
fuchsia-500	`#D946EF`	`rgb(217, 70, 239)`	`oklch(0.667 0.259 322.1)`	3.45	6.07
fuchsia-600	`#C026D3`	`rgb(192, 38, 211)`	`oklch(0.591 0.257 322.9)`	4.70	4.45
fuchsia-700	`#A21CAF`	`rgb(162, 28, 175)`	`oklch(0.518 0.226 323.9)`	6.32	3.32
fuchsia-800	`#86198F`	`rgb(134, 25, 143)`	`oklch(0.452 0.192 324.6)`	8.23	2.54
fuchsia-900	`#701A75`	`rgb(112, 26, 117)`	`oklch(0.401 0.160 325.6)`	10.03	2.09
fuchsia-950	`#4A044E`	`rgb(74, 4, 78)`	`oklch(0.293 0.131 325.7)`	14.80	1.41

Legibility

Which shades pass on each other

Every shade as text on every other shade. 32 of 110 pairings pass 4.5:1 for body text, and 18 more pass 3:1 for large text.

Text shade, then background shade	50	100	200	300	400	500	600	700	800	900	950
50	same shade	1.08	1.27	1.63	2.29	3.22	4.38	5.88	7.67	9.34	13.78
100	1.08	same shade	1.17	1.51	2.11	2.97	4.04	5.43	7.08	8.62	12.72
200	1.27	1.17	same shade	1.28	1.79	2.52	3.43	4.61	6.01	7.32	10.81
300	1.63	1.51	1.28	same shade	1.39	1.96	2.67	3.59	4.68	5.70	8.41
400	2.29	2.11	1.79	1.39	same shade	1.40	1.91	2.56	3.34	4.07	6.01
500	3.22	2.97	2.52	1.96	1.40	same shade	1.36	1.82	2.38	2.90	4.28
600	4.38	4.04	3.43	2.67	1.91	1.36	same shade	1.34	1.74	2.12	3.14
700	5.88	5.43	4.61	3.59	2.56	1.82	1.34	same shade	1.30	1.58	2.34
800	7.67	7.08	6.01	4.68	3.34	2.38	1.74	1.30	same shade	1.21	1.79
900	9.34	8.62	7.32	5.70	4.07	2.90	2.12	1.58	1.21	same shade	1.47
950	13.78	12.72	10.81	8.41	6.01	4.28	3.14	2.34	1.79	1.47	same shade

Rows are the text shade, columns the background. A bold figure on a tinted cell passes 4.5:1 for body text; a plain one passes 3:1 for large text only; a faint one fails.

Color vision

The scale with color blindness

The same eleven shades as seen with each color vision deficiency. Lightness keeps a ramp in order even where its hue collapses.

Simulated with Machado et al. (2009) at full severity, in linear light.

What each type sees

Typical vision

Closest neighbors: 800 and 900, ΔE2000 5.3
Protanopia

Closest neighbors: 50 and 100, ΔE2000 4.1
Deuteranopia

Closest neighbors: 50 and 100, ΔE2000 3.8
Tritanopia

Closest neighbors: 50 and 100, ΔE2000 4.2
Achromatopsia

Closest neighbors: 50 and 100, ΔE2000 1.9

Code

Design tokens

The whole family in six formats, ready to paste.

CSS custom properties

:root {
  --color-fuchsia-50: #fdf4ff;
  --color-fuchsia-100: #fae8ff;
  --color-fuchsia-200: #f5d0fe;
  --color-fuchsia-300: #f0abfc;
  --color-fuchsia-400: #e879f9;
  --color-fuchsia-500: #d946ef;
  --color-fuchsia-600: #c026d3;
  --color-fuchsia-700: #a21caf;
  --color-fuchsia-800: #86198f;
  --color-fuchsia-900: #701a75;
  --color-fuchsia-950: #4a044e;
}

Tailwind config

// tailwind.config.js — fuchsia is built in; this pins the v3.4 values.
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',
        },
      },
    },
  },
};

Tailwind v4 theme

/* app.css — Tailwind CSS v4 */
@import "tailwindcss";

@theme {
  /* v4 has its own fuchsia; these pin the v3 values. */
  --color-fuchsia-50: oklch(0.977 0.017 320.1);
  --color-fuchsia-100: oklch(0.952 0.036 318.9);
  --color-fuchsia-200: oklch(0.903 0.073 319.6);
  --color-fuchsia-300: oklch(0.833 0.132 321.4);
  --color-fuchsia-400: oklch(0.748 0.207 322.2);
  --color-fuchsia-500: oklch(0.667 0.259 322.1);
  --color-fuchsia-600: oklch(0.591 0.257 322.9);
  --color-fuchsia-700: oklch(0.518 0.226 323.9);
  --color-fuchsia-800: oklch(0.452 0.192 324.6);
  --color-fuchsia-900: oklch(0.401 0.160 325.6);
  --color-fuchsia-950: oklch(0.293 0.131 325.7);
}

Design tokens (W3C DTCG)

{
  "color": {
    "fuchsia": {
      "50": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9922, 0.9569, 1],
          "hex": "#fdf4ff"
        }
      },
      "100": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9804, 0.9098, 1],
          "hex": "#fae8ff"
        }
      },
      "200": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9608, 0.8157, 0.9961],
          "hex": "#f5d0fe"
        }
      },
      "300": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9412, 0.6706, 0.9882],
          "hex": "#f0abfc"
        }
      },
      "400": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9098, 0.4745, 0.9765],
          "hex": "#e879f9"
        }
      },
      "500": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.851, 0.2745, 0.9373],
          "hex": "#d946ef"
        }
      },
      "600": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.7529, 0.149, 0.8275],
          "hex": "#c026d3"
        }
      },
      "700": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.6353, 0.1098, 0.6863],
          "hex": "#a21caf"
        }
      },
      "800": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.5255, 0.098, 0.5608],
          "hex": "#86198f"
        }
      },
      "900": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.4392, 0.102, 0.4588],
          "hex": "#701a75"
        }
      },
      "950": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.2902, 0.0157, 0.3059],
          "hex": "#4a044e"
        }
      }
    }
  }
}

SwiftUI colors

import SwiftUI

enum Palette {
    static let fuchsia50 = Color(.sRGB, red: 0.992, green: 0.957, blue: 1.000, opacity: 1)
    static let fuchsia100 = Color(.sRGB, red: 0.980, green: 0.910, blue: 1.000, opacity: 1)
    static let fuchsia200 = Color(.sRGB, red: 0.961, green: 0.816, blue: 0.996, opacity: 1)
    static let fuchsia300 = Color(.sRGB, red: 0.941, green: 0.671, blue: 0.988, opacity: 1)
    static let fuchsia400 = Color(.sRGB, red: 0.910, green: 0.475, blue: 0.976, opacity: 1)
    static let fuchsia500 = Color(.sRGB, red: 0.851, green: 0.275, blue: 0.937, opacity: 1)
    static let fuchsia600 = Color(.sRGB, red: 0.753, green: 0.149, blue: 0.827, opacity: 1)
    static let fuchsia700 = Color(.sRGB, red: 0.635, green: 0.110, blue: 0.686, opacity: 1)
    static let fuchsia800 = Color(.sRGB, red: 0.525, green: 0.098, blue: 0.561, opacity: 1)
    static let fuchsia900 = Color(.sRGB, red: 0.439, green: 0.102, blue: 0.459, opacity: 1)
    static let fuchsia950 = Color(.sRGB, red: 0.290, green: 0.016, blue: 0.306, opacity: 1)
}

Jetpack Compose colors

import androidx.compose.ui.graphics.Color

object Palette {
    val Fuchsia50 = Color(0xFFFDF4FF)
    val Fuchsia100 = Color(0xFFFAE8FF)
    val Fuchsia200 = Color(0xFFF5D0FE)
    val Fuchsia300 = Color(0xFFF0ABFC)
    val Fuchsia400 = Color(0xFFE879F9)
    val Fuchsia500 = Color(0xFFD946EF)
    val Fuchsia600 = Color(0xFFC026D3)
    val Fuchsia700 = Color(0xFFA21CAF)
    val Fuchsia800 = Color(0xFF86198F)
    val Fuchsia900 = Color(0xFF701A75)
    val Fuchsia950 = Color(0xFF4A044E)
}

Families

Other Tailwind families

The rest of the Tailwind CSS v3.4 palette, in the order Tailwind lists it.

Tailwind fuchsia 11 shades, 50 to 950