Haddock’s Sweater Pulse palette

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

• bg

  #E6F4FC

  #E6F4FC color page →

  RGB

  rgb(230 244 252)

  HSL

  hsl(202 79% 95%)

  OKLCH

  oklch(0.959 0.018 232.5)

  WCAG contrast: on white 1.12:1 (Fail) · on black 18.71:1 (AAA)

• surface

  #85BCCE

  #85BCCE color page →

  RGB

  rgb(133 188 206)

  HSL

  hsl(195 43% 66%)

  OKLCH

  oklch(0.763 0.063 220.2)

  WCAG contrast: on white 2.08:1 (Fail) · on black 10.08:1 (AAA)

• primary

  #377EB1

  #377EB1 color page →

  RGB

  rgb(55 126 177)

  HSL

  hsl(205 53% 45%)

  OKLCH

  oklch(0.571 0.106 243)

  WCAG contrast: on white 4.39:1 (Fail) · on black 4.78:1 (AA)

• accent

  #004B58

  #004B58 color page →

  RGB

  rgb(0 75 88)

  HSL

  hsl(189 100% 17%)

  OKLCH

  oklch(0.38 0.067 214.3)

  WCAG contrast: on white 9.77:1 (AAA) · on black 2.14:1 (Fail)

• text

  #03121F

  #03121F color page →

  RGB

  rgb(3 18 31)

  HSL

  hsl(208 82% 7%)

  OKLCH

  oklch(0.176 0.035 244.5)

  WCAG contrast: on white 18.91:1 (AAA) · on black 1.11:1 (Fail)

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

:root {
  --bg: #e6f4fc;
  --surface: #85bcce;
  --primary: #377eb1;
  --accent: #004b58;
  --text: #03121f;
}

@theme {
  --color-bg: #e6f4fc;
  --color-surface: #85bcce;
  --color-primary: #377eb1;
  --color-accent: #004b58;
  --color-text: #03121f;
}

{
  "haddock-s-sweater-pulse-5kf": {
    "bg": {
      "$type": "color",
      "$value": "#e6f4fc"
    },
    "surface": {
      "$type": "color",
      "$value": "#85bcce"
    },
    "primary": {
      "$type": "color",
      "$value": "#377eb1"
    },
    "accent": {
      "$type": "color",
      "$value": "#004b58"
    },
    "text": {
      "$type": "color",
      "$value": "#03121f"
    }
  }
}