True Prunella Ribbon palette

Colors in True Prunella Ribbon: HEX, RGB, HSL & OKLCH

• bg

  #FAF4FA

  #FAF4FA color page →

  RGB

  rgb(250 244 250)

  HSL

  hsl(300 37% 97%)

  OKLCH

  oklch(0.973 0.01 325.7)

  WCAG contrast: on white 1.08:1 (Fail) · on black 19.38:1 (AAA)

• surface

  #B398DF

  #B398DF color page →

  RGB

  rgb(179 152 223)

  HSL

  hsl(263 53% 74%)

  OKLCH

  oklch(0.73 0.105 301.3)

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

• primary

  #894593

  #894593 color page →

  RGB

  rgb(137 69 147)

  HSL

  hsl(292 36% 42%)

  OKLCH

  oklch(0.506 0.139 322.4)

  WCAG contrast: on white 6.29:1 (AA) · on black 3.33:1 (Fail)

• accent

  #642654

  #642654 color page →

  RGB

  rgb(100 38 84)

  HSL

  hsl(315 45% 27%)

  OKLCH

  oklch(0.376 0.108 338.8)

  WCAG contrast: on white 10.78:1 (AAA) · on black 1.94:1 (Fail)

• text

  #0A050B

  #0A050B color page →

  RGB

  rgb(10 5 11)

  HSL

  hsl(290 38% 3%)

  OKLCH

  oklch(0.128 0.018 321.6)

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

Export True Prunella Ribbon: CSS variables, Tailwind & JSON

:root {
  --bg: #faf4fa;
  --surface: #b398df;
  --primary: #894593;
  --accent: #642654;
  --text: #0a050b;
}

@theme {
  --color-bg: #faf4fa;
  --color-surface: #b398df;
  --color-primary: #894593;
  --color-accent: #642654;
  --color-text: #0a050b;
}

{
  "true-prunella-ribbon-3ff": {
    "bg": {
      "$type": "color",
      "$value": "#faf4fa"
    },
    "surface": {
      "$type": "color",
      "$value": "#b398df"
    },
    "primary": {
      "$type": "color",
      "$value": "#894593"
    },
    "accent": {
      "$type": "color",
      "$value": "#642654"
    },
    "text": {
      "$type": "color",
      "$value": "#0a050b"
    }
  }
}