Vivid Demeter Green Drift palette

Colors in Vivid Demeter Green Drift: HEX, RGB, HSL & OKLCH

• bg

  #020B03

  #020B03 color page →

  RGB

  rgb(2 11 3)

  HSL

  hsl(127 69% 3%)

  OKLCH

  oklch(0.134 0.029 147.4)

  WCAG contrast: on white 19.96:1 (AAA) · on black 1.05:1 (Fail)

• surface

  #00CA00

  #00CA00 color page →

  RGB

  rgb(0 202 0)

  HSL

  hsl(120 100% 40%)

  OKLCH

  oklch(0.727 0.247 142.5)

  WCAG contrast: on white 2.22:1 (Fail) · on black 9.44:1 (AAA)

• primary

  #418BFF

  #418BFF color page →

  RGB

  rgb(65 139 255)

  HSL

  hsl(217 100% 63%)

  OKLCH

  oklch(0.65 0.188 259.2)

  WCAG contrast: on white 3.30:1 (Fail) · on black 6.36:1 (AA)

• accent

  #F9394D

  #F9394D color page →

  RGB

  rgb(249 57 77)

  HSL

  hsl(354 94% 60%)

  OKLCH

  oklch(0.646 0.225 21.2)

  WCAG contrast: on white 3.67:1 (Fail) · on black 5.72:1 (AA)

• text

  #E2EDE2

  #E2EDE2 color page →

  RGB

  rgb(226 237 226)

  HSL

  hsl(120 23% 91%)

  OKLCH

  oklch(0.935 0.019 145.4)

  WCAG contrast: on white 1.20:1 (Fail) · on black 17.44:1 (AAA)

Export Vivid Demeter Green Drift: CSS variables, Tailwind & JSON

:root {
  --bg: #020b03;
  --surface: #00ca00;
  --primary: #418bff;
  --accent: #f9394d;
  --text: #e2ede2;
}

@theme {
  --color-bg: #020b03;
  --color-surface: #00ca00;
  --color-primary: #418bff;
  --color-accent: #f9394d;
  --color-text: #e2ede2;
}

{
  "vivid-demeter-green-drift-2vq": {
    "bg": {
      "$type": "color",
      "$value": "#020b03"
    },
    "surface": {
      "$type": "color",
      "$value": "#00ca00"
    },
    "primary": {
      "$type": "color",
      "$value": "#418bff"
    },
    "accent": {
      "$type": "color",
      "$value": "#f9394d"
    },
    "text": {
      "$type": "color",
      "$value": "#e2ede2"
    }
  }
}