True Haddock’s Sweater System palette

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

• bg

  #E6FCFF

  #E6FCFF color page →

  RGB

  rgb(230 252 255)

  HSL

  hsl(187 100% 95%)

  OKLCH

  oklch(0.976 0.023 206.6)

  WCAG contrast: on white 1.06:1 (Fail) · on black 19.73:1 (AAA)

• surface

  #78C2DA

  #78C2DA color page →

  RGB

  rgb(120 194 218)

  HSL

  hsl(195 57% 66%)

  OKLCH

  oklch(0.774 0.081 220.7)

  WCAG contrast: on white 1.99:1 (Fail) · on black 10.52:1 (AAA)

• primary

  #3079AB

  #3079AB color page →

  RGB

  rgb(48 121 171)

  HSL

  hsl(204 56% 43%)

  OKLCH

  oklch(0.554 0.106 242.3)

  WCAG contrast: on white 4.72:1 (AA) · on black 4.44:1 (Fail)

• accent

  #004859

  #004859 color page →

  RGB

  rgb(0 72 89)

  HSL

  hsl(191 100% 17%)

  OKLCH

  oklch(0.372 0.068 220.3)

  WCAG contrast: on white 10.13:1 (AAA) · on black 2.07:1 (Fail)

• text

  #040D17

  #040D17 color page →

  RGB

  rgb(4 13 23)

  HSL

  hsl(212 70% 5%)

  OKLCH

  oklch(0.155 0.027 248.6)

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

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

:root {
  --bg: #e6fcff;
  --surface: #78c2da;
  --primary: #3079ab;
  --accent: #004859;
  --text: #040d17;
}

@theme {
  --color-bg: #e6fcff;
  --color-surface: #78c2da;
  --color-primary: #3079ab;
  --color-accent: #004859;
  --color-text: #040d17;
}

{
  "true-haddock-s-sweater-system-b4": {
    "bg": {
      "$type": "color",
      "$value": "#e6fcff"
    },
    "surface": {
      "$type": "color",
      "$value": "#78c2da"
    },
    "primary": {
      "$type": "color",
      "$value": "#3079ab"
    },
    "accent": {
      "$type": "color",
      "$value": "#004859"
    },
    "text": {
      "$type": "color",
      "$value": "#040d17"
    }
  }
}