Clear Pristine Oceanic Lattice palette

Colors in Clear Pristine Oceanic Lattice: HEX, RGB, HSL & OKLCH

• bg

  #D9E4E4

  #D9E4E4 color page →

  RGB

  rgb(217 228 228)

  HSL

  hsl(180 17% 87%)

  OKLCH

  oklch(0.911 0.012 196.9)

  WCAG contrast: on white 1.29:1 (Fail) · on black 16.16:1 (AAA)

• surface

  #35D0BB

  #35D0BB color page →

  RGB

  rgb(53 208 187)

  HSL

  hsl(172 62% 51%)

  OKLCH

  oklch(0.775 0.128 181.5)

  WCAG contrast: on white 1.92:1 (Fail) · on black 10.89:1 (AAA)

• primary

  #009A9F

  #009A9F color page →

  RGB

  rgb(0 154 159)

  HSL

  hsl(182 100% 31%)

  OKLCH

  oklch(0.623 0.106 198.9)

  WCAG contrast: on white 3.42:1 (Fail) · on black 6.12:1 (AA)

• accent

  #005072

  #005072 color page →

  RGB

  rgb(0 80 114)

  HSL

  hsl(198 100% 22%)

  OKLCH

  oklch(0.408 0.087 235.6)

  WCAG contrast: on white 8.78:1 (AAA) · on black 2.39:1 (Fail)

• text

  #002223

  #002223 color page →

  RGB

  rgb(0 34 35)

  HSL

  hsl(182 100% 7%)

  OKLCH

  oklch(0.229 0.039 197.6)

  WCAG contrast: on white 16.75:1 (AAA) · on black 1.25:1 (Fail)

Export Clear Pristine Oceanic Lattice: CSS variables, Tailwind & JSON

:root {
  --bg: #d9e4e4;
  --surface: #35d0bb;
  --primary: #009a9f;
  --accent: #005072;
  --text: #002223;
}

@theme {
  --color-bg: #d9e4e4;
  --color-surface: #35d0bb;
  --color-primary: #009a9f;
  --color-accent: #005072;
  --color-text: #002223;
}

{
  "clear-pristine-oceanic-lattice-2j4": {
    "bg": {
      "$type": "color",
      "$value": "#d9e4e4"
    },
    "surface": {
      "$type": "color",
      "$value": "#35d0bb"
    },
    "primary": {
      "$type": "color",
      "$value": "#009a9f"
    },
    "accent": {
      "$type": "color",
      "$value": "#005072"
    },
    "text": {
      "$type": "color",
      "$value": "#002223"
    }
  }
}