Classic Soothing Sapphire Ember palette

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

• bg

  #E6EFF9

  #E6EFF9 color page →

  RGB

  rgb(230 239 249)

  HSL

  hsl(212 61% 94%)

  OKLCH

  oklch(0.948 0.017 250.8)

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

• surface

  #007EEA

  #007EEA color page →

  RGB

  rgb(0 126 234)

  HSL

  hsl(208 100% 46%)

  OKLCH

  oklch(0.596 0.187 253.6)

  WCAG contrast: on white 4.05:1 (Fail) · on black 5.17:1 (AA)

• primary

  #AE3D20

  #AE3D20 color page →

  RGB

  rgb(174 61 32)

  HSL

  hsl(12 69% 40%)

  OKLCH

  oklch(0.516 0.154 35.2)

  WCAG contrast: on white 6.02:1 (AA) · on black 3.48:1 (Fail)

• accent

  #866600

  #866600 color page →

  RGB

  rgb(134 102 0)

  HSL

  hsl(46 100% 26%)

  OKLCH

  oklch(0.528 0.108 87)

  WCAG contrast: on white 5.36:1 (AA) · on black 3.91:1 (Fail)

• text

  #041523

  #041523 color page →

  RGB

  rgb(4 21 35)

  HSL

  hsl(207 79% 8%)

  OKLCH

  oklch(0.189 0.037 244.5)

  WCAG contrast: on white 18.47:1 (AAA) · on black 1.13:1 (Fail)

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

:root {
  --bg: #e6eff9;
  --surface: #007eea;
  --primary: #ae3d20;
  --accent: #866600;
  --text: #041523;
}

@theme {
  --color-bg: #e6eff9;
  --color-surface: #007eea;
  --color-primary: #ae3d20;
  --color-accent: #866600;
  --color-text: #041523;
}

{
  "classic-soothing-sapphire-ember-14j": {
    "bg": {
      "$type": "color",
      "$value": "#e6eff9"
    },
    "surface": {
      "$type": "color",
      "$value": "#007eea"
    },
    "primary": {
      "$type": "color",
      "$value": "#ae3d20"
    },
    "accent": {
      "$type": "color",
      "$value": "#866600"
    },
    "text": {
      "$type": "color",
      "$value": "#041523"
    }
  }
}