True Fat Smooch Beacon palette

Colors in True Fat Smooch Beacon: HEX, RGB, HSL & OKLCH

• bg

  #FFE5E2

  #FFE5E2 color page →

  RGB

  rgb(255 229 226)

  HSL

  hsl(6 100% 94%)

  OKLCH

  oklch(0.942 0.029 25.6)

  WCAG contrast: on white 1.19:1 (Fail) · on black 17.55:1 (AAA)

• surface

  #FC94AB

  #FC94AB color page →

  RGB

  rgb(252 148 171)

  HSL

  hsl(347 95% 78%)

  OKLCH

  oklch(0.781 0.127 6.2)

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

• primary

  #BB507E

  #BB507E color page →

  RGB

  rgb(187 80 126)

  HSL

  hsl(334 44% 52%)

  OKLCH

  oklch(0.582 0.146 355.7)

  WCAG contrast: on white 4.60:1 (AA) · on black 4.56:1 (AA)

• accent

  #72306D

  #72306D color page →

  RGB

  rgb(114 48 109)

  HSL

  hsl(305 41% 32%)

  OKLCH

  oklch(0.424 0.123 330.5)

  WCAG contrast: on white 8.90:1 (AAA) · on black 2.35:1 (Fail)

• text

  #0D1830

  #0D1830 color page →

  RGB

  rgb(13 24 48)

  HSL

  hsl(221 57% 12%)

  OKLCH

  oklch(0.213 0.05 264.1)

  WCAG contrast: on white 17.64:1 (AAA) · on black 1.19:1 (Fail)

Export True Fat Smooch Beacon: CSS variables, Tailwind & JSON

:root {
  --bg: #ffe5e2;
  --surface: #fc94ab;
  --primary: #bb507e;
  --accent: #72306d;
  --text: #0d1830;
}

@theme {
  --color-bg: #ffe5e2;
  --color-surface: #fc94ab;
  --color-primary: #bb507e;
  --color-accent: #72306d;
  --color-text: #0d1830;
}

{
  "true-fat-smooch-beacon-2de": {
    "bg": {
      "$type": "color",
      "$value": "#ffe5e2"
    },
    "surface": {
      "$type": "color",
      "$value": "#fc94ab"
    },
    "primary": {
      "$type": "color",
      "$value": "#bb507e"
    },
    "accent": {
      "$type": "color",
      "$value": "#72306d"
    },
    "text": {
      "$type": "color",
      "$value": "#0d1830"
    }
  }
}