True Honolulu Blue Canvas palette

Colors in True Honolulu Blue Canvas: HEX, RGB, HSL & OKLCH

• bg

  #D4F2F9

  #D4F2F9 color page →

  RGB

  rgb(212 242 249)

  HSL

  hsl(191 76% 90%)

  OKLCH

  oklch(0.942 0.033 213.4)

  WCAG contrast: on white 1.17:1 (Fail) · on black 17.86:1 (AAA)

• surface

  #00B9DE

  #00B9DE color page →

  RGB

  rgb(0 185 222)

  HSL

  hsl(190 100% 44%)

  OKLCH

  oklch(0.726 0.131 219)

  WCAG contrast: on white 2.33:1 (Fail) · on black 8.99:1 (AAA)

• primary

  #0080C4

  #0080C4 color page →

  RGB

  rgb(0 128 196)

  HSL

  hsl(201 100% 38%)

  OKLCH

  oklch(0.576 0.139 243)

  WCAG contrast: on white 4.29:1 (Fail) · on black 4.88:1 (AA)

• accent

  #004C6D

  #004C6D color page →

  RGB

  rgb(0 76 109)

  HSL

  hsl(198 100% 21%)

  OKLCH

  oklch(0.394 0.085 235.9)

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

• text

  #06171D

  #06171D color page →

  RGB

  rgb(6 23 29)

  HSL

  hsl(196 66% 7%)

  OKLCH

  oklch(0.193 0.026 223.1)

  WCAG contrast: on white 18.29:1 (AAA) · on black 1.14:1 (Fail)

Export True Honolulu Blue Canvas: CSS variables, Tailwind & JSON

:root {
  --bg: #d4f2f9;
  --surface: #00b9de;
  --primary: #0080c4;
  --accent: #004c6d;
  --text: #06171d;
}

@theme {
  --color-bg: #d4f2f9;
  --color-surface: #00b9de;
  --color-primary: #0080c4;
  --color-accent: #004c6d;
  --color-text: #06171d;
}

{
  "true-honolulu-blue-canvas-153": {
    "bg": {
      "$type": "color",
      "$value": "#d4f2f9"
    },
    "surface": {
      "$type": "color",
      "$value": "#00b9de"
    },
    "primary": {
      "$type": "color",
      "$value": "#0080c4"
    },
    "accent": {
      "$type": "color",
      "$value": "#004c6d"
    },
    "text": {
      "$type": "color",
      "$value": "#06171d"
    }
  }
}