True Neptune Circuit palette

Colors in True Neptune Circuit: HEX, RGB, HSL & OKLCH

• bg

  #D8F0F9

  #D8F0F9 color page →

  RGB

  rgb(216 240 249)

  HSL

  hsl(196 73% 91%)

  OKLCH

  oklch(0.94 0.028 222.3)

  WCAG contrast: on white 1.18:1 (Fail) · on black 17.75:1 (AAA)

• surface

  #81C5D2

  #81C5D2 color page →

  RGB

  rgb(129 197 210)

  HSL

  hsl(190 47% 66%)

  OKLCH

  oklch(0.783 0.071 210.9)

  WCAG contrast: on white 1.93:1 (Fail) · on black 10.85:1 (AAA)

• primary

  #0083AF

  #0083AF color page →

  RGB

  rgb(0 131 175)

  HSL

  hsl(195 100% 34%)

  OKLCH

  oklch(0.572 0.115 230.9)

  WCAG contrast: on white 4.31:1 (Fail) · on black 4.86:1 (AA)

• accent

  #005563

  #005563 color page →

  RGB

  rgb(0 85 99)

  HSL

  hsl(188 100% 19%)

  OKLCH

  oklch(0.413 0.073 213.7)

  WCAG contrast: on white 8.46:1 (AAA) · on black 2.47:1 (Fail)

• text

  #010B14

  #010B14 color page →

  RGB

  rgb(1 11 20)

  HSL

  hsl(208 90% 4%)

  OKLCH

  oklch(0.143 0.028 238.9)

  WCAG contrast: on white 19.82:1 (AAA) · on black 1.05:1 (Fail)

Export True Neptune Circuit: CSS variables, Tailwind & JSON

:root {
  --bg: #d8f0f9;
  --surface: #81c5d2;
  --primary: #0083af;
  --accent: #005563;
  --text: #010b14;
}

@theme {
  --color-bg: #d8f0f9;
  --color-surface: #81c5d2;
  --color-primary: #0083af;
  --color-accent: #005563;
  --color-text: #010b14;
}

{
  "true-neptune-circuit-4jn": {
    "bg": {
      "$type": "color",
      "$value": "#d8f0f9"
    },
    "surface": {
      "$type": "color",
      "$value": "#81c5d2"
    },
    "primary": {
      "$type": "color",
      "$value": "#0083af"
    },
    "accent": {
      "$type": "color",
      "$value": "#005563"
    },
    "text": {
      "$type": "color",
      "$value": "#010b14"
    }
  }
}