Classic Serenity’s Reign Horizon palette

Colors in Classic Serenity’s Reign Horizon: HEX, RGB, HSL & OKLCH

• bg

  #E3E8F0

  #E3E8F0 color page →

  RGB

  rgb(227 232 240)

  HSL

  hsl(217 30% 92%)

  OKLCH

  oklch(0.93 0.012 259.8)

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

• surface

  #7ABBDB

  #7ABBDB color page →

  RGB

  rgb(122 187 219)

  HSL

  hsl(200 57% 67%)

  OKLCH

  oklch(0.76 0.081 230.5)

  WCAG contrast: on white 2.10:1 (Fail) · on black 9.95:1 (AAA)

• primary

  #5281CA

  #5281CA color page →

  RGB

  rgb(82 129 202)

  HSL

  hsl(217 53% 56%)

  OKLCH

  oklch(0.603 0.123 258.9)

  WCAG contrast: on white 3.92:1 (Fail) · on black 5.35:1 (AA)

• accent

  #363F76

  #363F76 color page →

  RGB

  rgb(54 63 118)

  HSL

  hsl(232 37% 34%)

  OKLCH

  oklch(0.389 0.093 274.2)

  WCAG contrast: on white 9.86:1 (AAA) · on black 2.12:1 (Fail)

• text

  #08162A

  #08162A color page →

  RGB

  rgb(8 22 42)

  HSL

  hsl(215 68% 10%)

  OKLCH

  oklch(0.2 0.045 257.3)

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

Export Classic Serenity’s Reign Horizon: CSS variables, Tailwind & JSON

:root {
  --bg: #e3e8f0;
  --surface: #7abbdb;
  --primary: #5281ca;
  --accent: #363f76;
  --text: #08162a;
}

@theme {
  --color-bg: #e3e8f0;
  --color-surface: #7abbdb;
  --color-primary: #5281ca;
  --color-accent: #363f76;
  --color-text: #08162a;
}

{
  "classic-serenity-s-reign-horizon-2qu": {
    "bg": {
      "$type": "color",
      "$value": "#e3e8f0"
    },
    "surface": {
      "$type": "color",
      "$value": "#7abbdb"
    },
    "primary": {
      "$type": "color",
      "$value": "#5281ca"
    },
    "accent": {
      "$type": "color",
      "$value": "#363f76"
    },
    "text": {
      "$type": "color",
      "$value": "#08162a"
    }
  }
}