Classic Shrine of Pleasures Bloom palette

Colors in Classic Shrine of Pleasures Bloom: HEX, RGB, HSL & OKLCH

• bg

  #0E0208

  #0E0208 color page →

  RGB

  rgb(14 2 8)

  HSL

  hsl(330 75% 3%)

  OKLCH

  oklch(0.12 0.034 345.8)

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

• surface

  #D22E93

  #D22E93 color page →

  RGB

  rgb(210 46 147)

  HSL

  hsl(323 65% 50%)

  OKLCH

  oklch(0.591 0.217 348.4)

  WCAG contrast: on white 4.61:1 (AA) · on black 4.55:1 (AA)

• muted

  #FF5D00

  #FF5D00 color page →

  RGB

  rgb(255 93 0)

  HSL

  hsl(22 100% 50%)

  OKLCH

  oklch(0.685 0.211 40.9)

  WCAG contrast: on white 3.08:1 (Fail) · on black 6.81:1 (AA)

• primary

  #00BB41

  #00BB41 color page →

  RGB

  rgb(0 187 65)

  HSL

  hsl(141 100% 37%)

  OKLCH

  oklch(0.69 0.207 146.6)

  WCAG contrast: on white 2.56:1 (Fail) · on black 8.18:1 (AAA)

• accent

  #239FFF

  #239FFF color page →

  RGB

  rgb(35 159 255)

  HSL

  hsl(206 100% 57%)

  OKLCH

  oklch(0.686 0.174 248.3)

  WCAG contrast: on white 2.80:1 (Fail) · on black 7.47:1 (AAA)

• text

  #F5E8EF

  #F5E8EF color page →

  RGB

  rgb(245 232 239)

  HSL

  hsl(328 39% 94%)

  OKLCH

  oklch(0.943 0.017 343.6)

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

Export Classic Shrine of Pleasures Bloom: CSS variables, Tailwind & JSON

:root {
  --bg: #0e0208;
  --surface: #d22e93;
  --muted: #ff5d00;
  --primary: #00bb41;
  --accent: #239fff;
  --text: #f5e8ef;
}

@theme {
  --color-bg: #0e0208;
  --color-surface: #d22e93;
  --color-muted: #ff5d00;
  --color-primary: #00bb41;
  --color-accent: #239fff;
  --color-text: #f5e8ef;
}

{
  "classic-shrine-of-pleasures-bloom-x1": {
    "bg": {
      "$type": "color",
      "$value": "#0e0208"
    },
    "surface": {
      "$type": "color",
      "$value": "#d22e93"
    },
    "muted": {
      "$type": "color",
      "$value": "#ff5d00"
    },
    "primary": {
      "$type": "color",
      "$value": "#00bb41"
    },
    "accent": {
      "$type": "color",
      "$value": "#239fff"
    },
    "text": {
      "$type": "color",
      "$value": "#f5e8ef"
    }
  }
}