OKLCH Neon Pulse palette

Colors in OKLCH Neon Pulse: HEX, RGB, HSL & OKLCH

• bg

  #0A0A0F

  #0A0A0F color page →

  RGB

  rgb(10 10 15)

  HSL

  hsl(240 20% 5%)

  OKLCH

  oklch(0.147 0.011 285)

  WCAG contrast: on white 19.75:1 (AAA) · on black 1.06:1 (Fail)

• cyan

  #22D3EE

  #22D3EE color page →

  RGB

  rgb(34 211 238)

  HSL

  hsl(188 86% 53%)

  OKLCH

  oklch(0.797 0.134 211.5)

  WCAG contrast: on white 1.80:1 (Fail) · on black 11.62:1 (AAA)

• violet

  #A855F7

  #A855F7 color page →

  RGB

  rgb(168 85 247)

  HSL

  hsl(271 91% 65%)

  OKLCH

  oklch(0.627 0.233 303.9)

  WCAG contrast: on white 3.95:1 (Fail) · on black 5.30:1 (AA)

• rose

  #F43F5E

  #F43F5E color page →

  RGB

  rgb(244 63 94)

  HSL

  hsl(350 89% 60%)

  OKLCH

  oklch(0.645 0.215 16.4)

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

• text

  #E2E8F0

  #E2E8F0 color page →

  RGB

  rgb(226 232 240)

  HSL

  hsl(214 32% 91%)

  OKLCH

  oklch(0.929 0.013 255.5)

  WCAG contrast: on white 1.23:1 (Fail) · on black 17.03:1 (AAA)

Export OKLCH Neon Pulse: CSS variables, Tailwind & JSON

:root {
  --bg: #0a0a0f;
  --cyan: #22d3ee;
  --violet: #a855f7;
  --rose: #f43f5e;
  --text: #e2e8f0;
}

@theme {
  --color-bg: #0a0a0f;
  --color-cyan: #22d3ee;
  --color-violet: #a855f7;
  --color-rose: #f43f5e;
  --color-text: #e2e8f0;
}

{
  "oklch-neon-pulse": {
    "bg": {
      "$type": "color",
      "$value": "#0a0a0f"
    },
    "cyan": {
      "$type": "color",
      "$value": "#22d3ee"
    },
    "violet": {
      "$type": "color",
      "$value": "#a855f7"
    },
    "rose": {
      "$type": "color",
      "$value": "#f43f5e"
    },
    "text": {
      "$type": "color",
      "$value": "#e2e8f0"
    }
  }
}