Classic Perrywinkle Orchard palette

Colors in Classic Perrywinkle Orchard: HEX, RGB, HSL & OKLCH

• bg

  #05050E

  #05050E color page →

  RGB

  rgb(5 5 14)

  HSL

  hsl(240 47% 4%)

  OKLCH

  oklch(0.121 0.023 282.5)

  WCAG contrast: on white 20.29:1 (AAA) · on black 1.03:1 (Fail)

• surface

  #312A65

  #312A65 color page →

  RGB

  rgb(49 42 101)

  HSL

  hsl(247 41% 28%)

  OKLCH

  oklch(0.327 0.1 284.8)

  WCAG contrast: on white 12.72:1 (AAA) · on black 1.64:1 (Fail)

• muted

  #474B9C

  #474B9C color page →

  RGB

  rgb(71 75 156)

  HSL

  hsl(237 37% 45%)

  OKLCH

  oklch(0.453 0.129 277.8)

  WCAG contrast: on white 7.62:1 (AAA) · on black 2.75:1 (Fail)

• primary

  #8084E4

  #8084E4 color page →

  RGB

  rgb(128 132 228)

  HSL

  hsl(238 65% 70%)

  OKLCH

  oklch(0.653 0.142 279.9)

  WCAG contrast: on white 3.31:1 (Fail) · on black 6.33:1 (AA)

• accent

  #A4B4F7

  #A4B4F7 color page →

  RGB

  rgb(164 180 247)

  HSL

  hsl(228 84% 81%)

  OKLCH

  oklch(0.782 0.097 273.6)

  WCAG contrast: on white 2.00:1 (Fail) · on black 10.45:1 (AAA)

• text

  #ECF5FF

  #ECF5FF color page →

  RGB

  rgb(236 245 255)

  HSL

  hsl(212 100% 96%)

  OKLCH

  oklch(0.966 0.017 250.8)

  WCAG contrast: on white 1.10:1 (Fail) · on black 19.07:1 (AAA)

Export Classic Perrywinkle Orchard: CSS variables, Tailwind & JSON

:root {
  --bg: #05050e;
  --surface: #312a65;
  --muted: #474b9c;
  --primary: #8084e4;
  --accent: #a4b4f7;
  --text: #ecf5ff;
}

@theme {
  --color-bg: #05050e;
  --color-surface: #312a65;
  --color-muted: #474b9c;
  --color-primary: #8084e4;
  --color-accent: #a4b4f7;
  --color-text: #ecf5ff;
}

{
  "classic-perrywinkle-orchard-1hn": {
    "bg": {
      "$type": "color",
      "$value": "#05050e"
    },
    "surface": {
      "$type": "color",
      "$value": "#312a65"
    },
    "muted": {
      "$type": "color",
      "$value": "#474b9c"
    },
    "primary": {
      "$type": "color",
      "$value": "#8084e4"
    },
    "accent": {
      "$type": "color",
      "$value": "#a4b4f7"
    },
    "text": {
      "$type": "color",
      "$value": "#ecf5ff"
    }
  }
}