Steady Lipstick Beacon palette

Colors in Steady Lipstick Beacon: HEX, RGB, HSL & OKLCH

• bg

  #FFD5D1

  #FFD5D1 color page →

  RGB

  rgb(255 213 209)

  HSL

  hsl(5 100% 91%)

  OKLCH

  oklch(0.908 0.048 24.5)

  WCAG contrast: on white 1.33:1 (Fail) · on black 15.69:1 (AAA)

• surface

  #EB879A

  #EB879A color page →

  RGB

  rgb(235 135 154)

  HSL

  hsl(349 71% 73%)

  OKLCH

  oklch(0.736 0.123 8.4)

  WCAG contrast: on white 2.48:1 (Fail) · on black 8.46:1 (AAA)

• primary

  #C95D7E

  #C95D7E color page →

  RGB

  rgb(201 93 126)

  HSL

  hsl(342 50% 58%)

  OKLCH

  oklch(0.62 0.141 2.8)

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

• accent

  #7A3671

  #7A3671 color page →

  RGB

  rgb(122 54 113)

  HSL

  hsl(308 39% 35%)

  OKLCH

  oklch(0.446 0.122 332.7)

  WCAG contrast: on white 8.09:1 (AAA) · on black 2.59:1 (Fail)

• text

  #070F28

  #070F28 color page →

  RGB

  rgb(7 15 40)

  HSL

  hsl(225 70% 9%)

  OKLCH

  oklch(0.178 0.053 267.1)

  WCAG contrast: on white 18.95:1 (AAA) · on black 1.10:1 (Fail)

Export Steady Lipstick Beacon: CSS variables, Tailwind & JSON

:root {
  --bg: #ffd5d1;
  --surface: #eb879a;
  --primary: #c95d7e;
  --accent: #7a3671;
  --text: #070f28;
}

@theme {
  --color-bg: #ffd5d1;
  --color-surface: #eb879a;
  --color-primary: #c95d7e;
  --color-accent: #7a3671;
  --color-text: #070f28;
}

{
  "steady-lipstick-beacon-2ox": {
    "bg": {
      "$type": "color",
      "$value": "#ffd5d1"
    },
    "surface": {
      "$type": "color",
      "$value": "#eb879a"
    },
    "primary": {
      "$type": "color",
      "$value": "#c95d7e"
    },
    "accent": {
      "$type": "color",
      "$value": "#7a3671"
    },
    "text": {
      "$type": "color",
      "$value": "#070f28"
    }
  }
}