Steady Simply Purple Harbor palette

Colors in Steady Simply Purple Harbor: HEX, RGB, HSL & OKLCH

• bg

  #0B0B13

  #0B0B13 color page →

  RGB

  rgb(11 11 19)

  HSL

  hsl(240 27% 6%)

  OKLCH

  oklch(0.154 0.017 284.2)

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

• surface

  #181226

  #181226 color page →

  RGB

  rgb(24 18 38)

  HSL

  hsl(258 36% 11%)

  OKLCH

  oklch(0.201 0.04 296.5)

  WCAG contrast: on white 18.20:1 (AAA) · on black 1.15:1 (Fail)

• primary

  #7265B2

  #7265B2 color page →

  RGB

  rgb(114 101 178)

  HSL

  hsl(250 33% 55%)

  OKLCH

  oklch(0.553 0.117 289.8)

  WCAG contrast: on white 4.97:1 (AA) · on black 4.21:1 (Fail)

• accent

  #AF92AD

  #AF92AD color page →

  RGB

  rgb(175 146 173)

  HSL

  hsl(304 15% 63%)

  OKLCH

  oklch(0.695 0.051 328.3)

  WCAG contrast: on white 2.78:1 (Fail) · on black 7.53:1 (AAA)

• text

  #E8E6F2

  #E8E6F2 color page →

  RGB

  rgb(232 230 242)

  HSL

  hsl(250 32% 93%)

  OKLCH

  oklch(0.93 0.016 293.7)

  WCAG contrast: on white 1.23:1 (Fail) · on black 17.03:1 (AAA)

Export Steady Simply Purple Harbor: CSS variables, Tailwind & JSON

:root {
  --bg: #0b0b13;
  --surface: #181226;
  --primary: #7265b2;
  --accent: #af92ad;
  --text: #e8e6f2;
}

@theme {
  --color-bg: #0b0b13;
  --color-surface: #181226;
  --color-primary: #7265b2;
  --color-accent: #af92ad;
  --color-text: #e8e6f2;
}

{
  "steady-simply-purple-harbor-6u1": {
    "bg": {
      "$type": "color",
      "$value": "#0b0b13"
    },
    "surface": {
      "$type": "color",
      "$value": "#181226"
    },
    "primary": {
      "$type": "color",
      "$value": "#7265b2"
    },
    "accent": {
      "$type": "color",
      "$value": "#af92ad"
    },
    "text": {
      "$type": "color",
      "$value": "#e8e6f2"
    }
  }
}