Pure Clean Slate Cascade palette

Colors in Pure Clean Slate Cascade: HEX, RGB, HSL & OKLCH

• bg

  #F7F9FB

  #F7F9FB color page →

  RGB

  rgb(247 249 251)

  HSL

  hsl(210 33% 98%)

  OKLCH

  oklch(0.981 0.003 247.9)

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

• surface

  #99AFCE

  #99AFCE color page →

  RGB

  rgb(153 175 206)

  HSL

  hsl(215 35% 70%)

  OKLCH

  oklch(0.748 0.051 257)

  WCAG contrast: on white 2.23:1 (Fail) · on black 9.37:1 (AAA)

• primary

  #537392

  #537392 color page →

  RGB

  rgb(83 115 146)

  HSL

  hsl(210 28% 45%)

  OKLCH

  oklch(0.543 0.061 248.2)

  WCAG contrast: on white 4.95:1 (AA) · on black 4.23:1 (Fail)

• accent

  #2D3F50

  #2D3F50 color page →

  RGB

  rgb(45 63 80)

  HSL

  hsl(209 28% 25%)

  OKLCH

  oklch(0.36 0.038 247.5)

  WCAG contrast: on white 10.83:1 (AAA) · on black 1.93:1 (Fail)

• text

  #050D16

  #050D16 color page →

  RGB

  rgb(5 13 22)

  HSL

  hsl(212 63% 5%)

  OKLCH

  oklch(0.155 0.024 249.5)

  WCAG contrast: on white 19.52:1 (AAA) · on black 1.07:1 (Fail)

Export Pure Clean Slate Cascade: CSS variables, Tailwind & JSON

:root {
  --bg: #f7f9fb;
  --surface: #99afce;
  --primary: #537392;
  --accent: #2d3f50;
  --text: #050d16;
}

@theme {
  --color-bg: #f7f9fb;
  --color-surface: #99afce;
  --color-primary: #537392;
  --color-accent: #2d3f50;
  --color-text: #050d16;
}

{
  "pure-clean-slate-cascade-2v1": {
    "bg": {
      "$type": "color",
      "$value": "#f7f9fb"
    },
    "surface": {
      "$type": "color",
      "$value": "#99afce"
    },
    "primary": {
      "$type": "color",
      "$value": "#537392"
    },
    "accent": {
      "$type": "color",
      "$value": "#2d3f50"
    },
    "text": {
      "$type": "color",
      "$value": "#050d16"
    }
  }
}