True Plushy Pink Horizon palette

Colors in True Plushy Pink Horizon: HEX, RGB, HSL & OKLCH

• bg

  #FBE8ED

  #FBE8ED color page →

  RGB

  rgb(251 232 237)

  HSL

  hsl(344 70% 95%)

  OKLCH

  oklch(0.948 0.022 359.7)

  WCAG contrast: on white 1.17:1 (Fail) · on black 17.86:1 (AAA)

• surface

  #F9CDDA

  #F9CDDA color page →

  RGB

  rgb(249 205 218)

  HSL

  hsl(342 79% 89%)

  OKLCH

  oklch(0.89 0.052 358.6)

  WCAG contrast: on white 1.42:1 (Fail) · on black 14.77:1 (AAA)

• primary

  #ECB4A6

  #ECB4A6 color page →

  RGB

  rgb(236 180 166)

  HSL

  hsl(12 65% 79%)

  OKLCH

  oklch(0.817 0.069 34.4)

  WCAG contrast: on white 1.80:1 (Fail) · on black 11.64:1 (AAA)

• accent

  #CFAED1

  #CFAED1 color page →

  RGB

  rgb(207 174 209)

  HSL

  hsl(297 28% 75%)

  OKLCH

  oklch(0.791 0.061 324.3)

  WCAG contrast: on white 1.97:1 (Fail) · on black 10.62:1 (AAA)

• text

  #473237

  #473237 color page →

  RGB

  rgb(71 50 55)

  HSL

  hsl(346 17% 24%)

  OKLCH

  oklch(0.343 0.031 3.1)

  WCAG contrast: on white 11.80:1 (AAA) · on black 1.77:1 (Fail)

Export True Plushy Pink Horizon: CSS variables, Tailwind & JSON

:root {
  --bg: #fbe8ed;
  --surface: #f9cdda;
  --primary: #ecb4a6;
  --accent: #cfaed1;
  --text: #473237;
}

@theme {
  --color-bg: #fbe8ed;
  --color-surface: #f9cdda;
  --color-primary: #ecb4a6;
  --color-accent: #cfaed1;
  --color-text: #473237;
}

{
  "true-plushy-pink-horizon-p0": {
    "bg": {
      "$type": "color",
      "$value": "#fbe8ed"
    },
    "surface": {
      "$type": "color",
      "$value": "#f9cdda"
    },
    "primary": {
      "$type": "color",
      "$value": "#ecb4a6"
    },
    "accent": {
      "$type": "color",
      "$value": "#cfaed1"
    },
    "text": {
      "$type": "color",
      "$value": "#473237"
    }
  }
}