Electric Opulent Blue Drift palette

Colors in Electric Opulent Blue Drift: HEX, RGB, HSL & OKLCH

• bg

  #DDF1FF

  #DDF1FF color page →

  RGB

  rgb(221 241 255)

  HSL

  hsl(205 100% 93%)

  OKLCH

  oklch(0.948 0.028 238.2)

  WCAG contrast: on white 1.16:1 (Fail) · on black 18.10:1 (AAA)

• surface

  #71ABFF

  #71ABFF color page →

  RGB

  rgb(113 171 255)

  HSL

  hsl(215 100% 72%)

  OKLCH

  oklch(0.737 0.137 257.6)

  WCAG contrast: on white 2.34:1 (Fail) · on black 8.97:1 (AAA)

• primary

  #0054EC

  #0054EC color page →

  RGB

  rgb(0 84 236)

  HSL

  hsl(219 100% 46%)

  OKLCH

  oklch(0.513 0.238 262)

  WCAG contrast: on white 6.03:1 (AA) · on black 3.47:1 (Fail)

• accent

  #00377C

  #00377C color page →

  RGB

  rgb(0 55 124)

  HSL

  hsl(213 100% 24%)

  OKLCH

  oklch(0.352 0.129 257.7)

  WCAG contrast: on white 11.42:1 (AAA) · on black 1.83:1 (Fail)

• text

  #0C1627

  #0C1627 color page →

  RGB

  rgb(12 22 39)

  HSL

  hsl(218 53% 10%)

  OKLCH

  oklch(0.2 0.037 260.5)

  WCAG contrast: on white 18.10:1 (AAA) · on black 1.15:1 (Fail)

Export Electric Opulent Blue Drift: CSS variables, Tailwind & JSON

:root {
  --bg: #ddf1ff;
  --surface: #71abff;
  --primary: #0054ec;
  --accent: #00377c;
  --text: #0c1627;
}

@theme {
  --color-bg: #ddf1ff;
  --color-surface: #71abff;
  --color-primary: #0054ec;
  --color-accent: #00377c;
  --color-text: #0c1627;
}

{
  "electric-opulent-blue-drift-5bf": {
    "bg": {
      "$type": "color",
      "$value": "#ddf1ff"
    },
    "surface": {
      "$type": "color",
      "$value": "#71abff"
    },
    "primary": {
      "$type": "color",
      "$value": "#0054ec"
    },
    "accent": {
      "$type": "color",
      "$value": "#00377c"
    },
    "text": {
      "$type": "color",
      "$value": "#0c1627"
    }
  }
}