Steady Haddock’s Sweater Cascade palette

Colors in Steady Haddock’s Sweater Cascade: HEX, RGB, HSL & OKLCH

• bg

  #EEF6FF

  #EEF6FF color page →

  RGB

  rgb(238 246 255)

  HSL

  hsl(212 100% 97%)

  OKLCH

  oklch(0.97 0.015 251.2)

  WCAG contrast: on white 1.09:1 (Fail) · on black 19.26:1 (AAA)

• surface

  #7AB2E5

  #7AB2E5 color page →

  RGB

  rgb(122 178 229)

  HSL

  hsl(209 67% 69%)

  OKLCH

  oklch(0.744 0.095 246.9)

  WCAG contrast: on white 2.25:1 (Fail) · on black 9.32:1 (AAA)

• primary

  #387CB1

  #387CB1 color page →

  RGB

  rgb(56 124 177)

  HSL

  hsl(206 52% 46%)

  OKLCH

  oklch(0.567 0.107 244.9)

  WCAG contrast: on white 4.48:1 (Fail) · on black 4.68:1 (AA)

• accent

  #123C69

  #123C69 color page →

  RGB

  rgb(18 60 105)

  HSL

  hsl(211 71% 24%)

  OKLCH

  oklch(0.353 0.091 253.2)

  WCAG contrast: on white 11.19:1 (AAA) · on black 1.87:1 (Fail)

• text

  #030E1C

  #030E1C color page →

  RGB

  rgb(3 14 28)

  HSL

  hsl(214 81% 6%)

  OKLCH

  oklch(0.161 0.035 251.7)

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

Export Steady Haddock’s Sweater Cascade: CSS variables, Tailwind & JSON

:root {
  --bg: #eef6ff;
  --surface: #7ab2e5;
  --primary: #387cb1;
  --accent: #123c69;
  --text: #030e1c;
}

@theme {
  --color-bg: #eef6ff;
  --color-surface: #7ab2e5;
  --color-primary: #387cb1;
  --color-accent: #123c69;
  --color-text: #030e1c;
}

{
  "steady-haddock-s-sweater-cascade-6wr": {
    "bg": {
      "$type": "color",
      "$value": "#eef6ff"
    },
    "surface": {
      "$type": "color",
      "$value": "#7ab2e5"
    },
    "primary": {
      "$type": "color",
      "$value": "#387cb1"
    },
    "accent": {
      "$type": "color",
      "$value": "#123c69"
    },
    "text": {
      "$type": "color",
      "$value": "#030e1c"
    }
  }
}