Classic Soothing Sapphire Mirror palette

Colors in Classic Soothing Sapphire Mirror: HEX, RGB, HSL & OKLCH

• bg

  #DDF0FF

  #DDF0FF color page →

  RGB

  rgb(221 240 255)

  HSL

  hsl(206 100% 93%)

  OKLCH

  oklch(0.946 0.029 241.6)

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

• surface

  #007EDD

  #007EDD color page →

  RGB

  rgb(0 126 221)

  HSL

  hsl(206 100% 43%)

  OKLCH

  oklch(0.587 0.171 251.1)

  WCAG contrast: on white 4.17:1 (Fail) · on black 5.02:1 (AA)

• primary

  #B32D54

  #B32D54 color page →

  RGB

  rgb(179 45 84)

  HSL

  hsl(343 60% 44%)

  OKLCH

  oklch(0.517 0.171 8.5)

  WCAG contrast: on white 6.14:1 (AA) · on black 3.42:1 (Fail)

• accent

  #507400

  #507400 color page →

  RGB

  rgb(80 116 0)

  HSL

  hsl(79 100% 23%)

  OKLCH

  oklch(0.512 0.134 128)

  WCAG contrast: on white 5.46:1 (AA) · on black 3.83:1 (Fail)

• text

  #030F1B

  #030F1B color page →

  RGB

  rgb(3 15 27)

  HSL

  hsl(210 80% 6%)

  OKLCH

  oklch(0.163 0.032 246.6)

  WCAG contrast: on white 19.30:1 (AAA) · on black 1.08:1 (Fail)

Export Classic Soothing Sapphire Mirror: CSS variables, Tailwind & JSON

:root {
  --bg: #ddf0ff;
  --surface: #007edd;
  --primary: #b32d54;
  --accent: #507400;
  --text: #030f1b;
}

@theme {
  --color-bg: #ddf0ff;
  --color-surface: #007edd;
  --color-primary: #b32d54;
  --color-accent: #507400;
  --color-text: #030f1b;
}

{
  "classic-soothing-sapphire-mirror-2n2": {
    "bg": {
      "$type": "color",
      "$value": "#ddf0ff"
    },
    "surface": {
      "$type": "color",
      "$value": "#007edd"
    },
    "primary": {
      "$type": "color",
      "$value": "#b32d54"
    },
    "accent": {
      "$type": "color",
      "$value": "#507400"
    },
    "text": {
      "$type": "color",
      "$value": "#030f1b"
    }
  }
}