Steady Teal Vault palette

Colors in Steady Teal Vault: HEX, RGB, HSL & OKLCH

• bg

  #BDE7E2

  #BDE7E2 color page →

  RGB

  rgb(189 231 226)

  HSL

  hsl(173 47% 82%)

  OKLCH

  oklch(0.897 0.044 187.5)

  WCAG contrast: on white 1.33:1 (Fail) · on black 15.69:1 (AAA)

• surface

  #77BAB7

  #77BAB7 color page →

  RGB

  rgb(119 186 183)

  HSL

  hsl(177 33% 60%)

  OKLCH

  oklch(0.743 0.068 192.2)

  WCAG contrast: on white 2.21:1 (Fail) · on black 9.49:1 (AAA)

• primary

  #0D7C7A

  #0D7C7A color page →

  RGB

  rgb(13 124 122)

  HSL

  hsl(179 81% 27%)

  OKLCH

  oklch(0.531 0.088 192.8)

  WCAG contrast: on white 5.02:1 (AA) · on black 4.18:1 (Fail)

• accent

  #003F3B

  #003F3B color page →

  RGB

  rgb(0 63 59)

  HSL

  hsl(176 100% 12%)

  OKLCH

  oklch(0.331 0.058 187.7)

  WCAG contrast: on white 11.83:1 (AAA) · on black 1.77:1 (Fail)

• text

  #000E0D

  #000E0D color page →

  RGB

  rgb(0 14 13)

  HSL

  hsl(176 100% 3%)

  OKLCH

  oklch(0.148 0.026 189.9)

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

Export Steady Teal Vault: CSS variables, Tailwind & JSON

:root {
  --bg: #bde7e2;
  --surface: #77bab7;
  --primary: #0d7c7a;
  --accent: #003f3b;
  --text: #000e0d;
}

@theme {
  --color-bg: #bde7e2;
  --color-surface: #77bab7;
  --color-primary: #0d7c7a;
  --color-accent: #003f3b;
  --color-text: #000e0d;
}

{
  "steady-teal-vault-cj": {
    "bg": {
      "$type": "color",
      "$value": "#bde7e2"
    },
    "surface": {
      "$type": "color",
      "$value": "#77bab7"
    },
    "primary": {
      "$type": "color",
      "$value": "#0d7c7a"
    },
    "accent": {
      "$type": "color",
      "$value": "#003f3b"
    },
    "text": {
      "$type": "color",
      "$value": "#000e0d"
    }
  }
}