Steady Happy Hearts Orchard palette

Colors in Steady Happy Hearts Orchard: HEX, RGB, HSL & OKLCH

• bg

  #FBDBCC

  #FBDBCC color page →

  RGB

  rgb(251 219 204)

  HSL

  hsl(19 85% 89%)

  OKLCH

  oklch(0.914 0.041 46.7)

  WCAG contrast: on white 1.30:1 (Fail) · on black 16.10:1 (AAA)

• surface

  #FD8E7B

  #FD8E7B color page →

  RGB

  rgb(253 142 123)

  HSL

  hsl(9 97% 74%)

  OKLCH

  oklch(0.762 0.138 30.8)

  WCAG contrast: on white 2.25:1 (Fail) · on black 9.33:1 (AAA)

• primary

  #D15959

  #D15959 color page →

  RGB

  rgb(209 89 89)

  HSL

  hsl(0 57% 58%)

  OKLCH

  oklch(0.617 0.153 22.6)

  WCAG contrast: on white 3.97:1 (Fail) · on black 5.28:1 (AA)

• accent

  #85244B

  #85244B color page →

  RGB

  rgb(133 36 75)

  HSL

  hsl(336 57% 33%)

  OKLCH

  oklch(0.425 0.135 0.2)

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

• text

  #15122A

  #15122A color page →

  RGB

  rgb(21 18 42)

  HSL

  hsl(248 40% 12%)

  OKLCH

  oklch(0.2 0.047 287.1)

  WCAG contrast: on white 18.23:1 (AAA) · on black 1.15:1 (Fail)

Export Steady Happy Hearts Orchard: CSS variables, Tailwind & JSON

:root {
  --bg: #fbdbcc;
  --surface: #fd8e7b;
  --primary: #d15959;
  --accent: #85244b;
  --text: #15122a;
}

@theme {
  --color-bg: #fbdbcc;
  --color-surface: #fd8e7b;
  --color-primary: #d15959;
  --color-accent: #85244b;
  --color-text: #15122a;
}

{
  "steady-happy-hearts-orchard-3cw": {
    "bg": {
      "$type": "color",
      "$value": "#fbdbcc"
    },
    "surface": {
      "$type": "color",
      "$value": "#fd8e7b"
    },
    "primary": {
      "$type": "color",
      "$value": "#d15959"
    },
    "accent": {
      "$type": "color",
      "$value": "#85244b"
    },
    "text": {
      "$type": "color",
      "$value": "#15122a"
    }
  }
}