Vivid Mystifying Magenta Meadow palette

Colors in Vivid Mystifying Magenta Meadow: HEX, RGB, HSL & OKLCH

• bg

  #0C060B

  #0C060B color page →

  RGB

  rgb(12 6 11)

  HSL

  hsl(310 33% 4%)

  OKLCH

  oklch(0.135 0.017 331.8)

  WCAG contrast: on white 20.06:1 (AAA) · on black 1.04:1 (Fail)

• surface

  #C31FA9

  #C31FA9 color page →

  RGB

  rgb(195 31 169)

  HSL

  hsl(310 73% 44%)

  OKLCH

  oklch(0.568 0.234 336.1)

  WCAG contrast: on white 5.13:1 (AA) · on black 4.08:1 (Fail)

• muted

  #FF5B00

  #FF5B00 color page →

  RGB

  rgb(255 91 0)

  HSL

  hsl(21 100% 50%)

  OKLCH

  oklch(0.683 0.213 40.3)

  WCAG contrast: on white 3.11:1 (Fail) · on black 6.74:1 (AA)

• primary

  #00B62B

  #00B62B color page →

  RGB

  rgb(0 182 43)

  HSL

  hsl(134 100% 36%)

  OKLCH

  oklch(0.674 0.216 144.4)

  WCAG contrast: on white 2.71:1 (Fail) · on black 7.72:1 (AAA)

• accent

  #00ACFF

  #00ACFF color page →

  RGB

  rgb(0 172 255)

  HSL

  hsl(200 100% 50%)

  OKLCH

  oklch(0.712 0.166 241.1)

  WCAG contrast: on white 2.51:1 (Fail) · on black 8.34:1 (AAA)

• text

  #EEE0EB

  #EEE0EB color page →

  RGB

  rgb(238 224 235)

  HSL

  hsl(313 29% 91%)

  OKLCH

  oklch(0.921 0.021 332.9)

  WCAG contrast: on white 1.27:1 (Fail) · on black 16.49:1 (AAA)

Export Vivid Mystifying Magenta Meadow: CSS variables, Tailwind & JSON

:root {
  --bg: #0c060b;
  --surface: #c31fa9;
  --muted: #ff5b00;
  --primary: #00b62b;
  --accent: #00acff;
  --text: #eee0eb;
}

@theme {
  --color-bg: #0c060b;
  --color-surface: #c31fa9;
  --color-muted: #ff5b00;
  --color-primary: #00b62b;
  --color-accent: #00acff;
  --color-text: #eee0eb;
}

{
  "vivid-mystifying-magenta-meadow-6z6": {
    "bg": {
      "$type": "color",
      "$value": "#0c060b"
    },
    "surface": {
      "$type": "color",
      "$value": "#c31fa9"
    },
    "muted": {
      "$type": "color",
      "$value": "#ff5b00"
    },
    "primary": {
      "$type": "color",
      "$value": "#00b62b"
    },
    "accent": {
      "$type": "color",
      "$value": "#00acff"
    },
    "text": {
      "$type": "color",
      "$value": "#eee0eb"
    }
  }
}