Classic Ahoy! Blue Signal palette

Colors in Classic Ahoy! Blue Signal: HEX, RGB, HSL & OKLCH

• bg

  #E3F3F9

  #E3F3F9 color page →

  RGB

  rgb(227 243 249)

  HSL

  hsl(196 65% 93%)

  OKLCH

  oklch(0.954 0.019 222.2)

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

• surface

  #7CC3CF

  #7CC3CF color page →

  RGB

  rgb(124 195 207)

  HSL

  hsl(189 46% 65%)

  OKLCH

  oklch(0.775 0.073 209.3)

  WCAG contrast: on white 1.98:1 (Fail) · on black 10.56:1 (AAA)

• primary

  #2081A4

  #2081A4 color page →

  RGB

  rgb(32 129 164)

  HSL

  hsl(196 67% 38%)

  OKLCH

  oklch(0.565 0.1 227.7)

  WCAG contrast: on white 4.43:1 (Fail) · on black 4.73:1 (AA)

• accent

  #004C54

  #004C54 color page →

  RGB

  rgb(0 76 84)

  HSL

  hsl(186 100% 16%)

  OKLCH

  oklch(0.381 0.065 206.9)

  WCAG contrast: on white 9.71:1 (AAA) · on black 2.16:1 (Fail)

• text

  #000D1A

  #000D1A color page →

  RGB

  rgb(0 13 26)

  HSL

  hsl(210 100% 5%)

  OKLCH

  oklch(0.153 0.037 243.1)

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

Export Classic Ahoy! Blue Signal: CSS variables, Tailwind & JSON

:root {
  --bg: #e3f3f9;
  --surface: #7cc3cf;
  --primary: #2081a4;
  --accent: #004c54;
  --text: #000d1a;
}

@theme {
  --color-bg: #e3f3f9;
  --color-surface: #7cc3cf;
  --color-primary: #2081a4;
  --color-accent: #004c54;
  --color-text: #000d1a;
}

{
  "classic-ahoy-blue-signal-w0": {
    "bg": {
      "$type": "color",
      "$value": "#e3f3f9"
    },
    "surface": {
      "$type": "color",
      "$value": "#7cc3cf"
    },
    "primary": {
      "$type": "color",
      "$value": "#2081a4"
    },
    "accent": {
      "$type": "color",
      "$value": "#004c54"
    },
    "text": {
      "$type": "color",
      "$value": "#000d1a"
    }
  }
}