Atomic Magenta Elephant Grove palette

Colors in Atomic Magenta Elephant Grove: HEX, RGB, HSL & OKLCH

• bg

  #F3DDE3

  #F3DDE3 color page →

  RGB

  rgb(243 221 227)

  HSL

  hsl(344 48% 91%)

  OKLCH

  oklch(0.917 0.025 359.2)

  WCAG contrast: on white 1.29:1 (Fail) · on black 16.26:1 (AAA)

• surface

  #EE87DC

  #EE87DC color page →

  RGB

  rgb(238 135 220)

  HSL

  hsl(310 75% 73%)

  OKLCH

  oklch(0.761 0.162 333.8)

  WCAG contrast: on white 2.29:1 (Fail) · on black 9.13:1 (AAA)

• primary

  #E20574

  #E20574 color page →

  RGB

  rgb(226 5 116)

  HSL

  hsl(330 96% 45%)

  OKLCH

  oklch(0.591 0.237 1.4)

  WCAG contrast: on white 4.65:1 (AA) · on black 4.50:1 (AA)

• accent

  #8C0010

  #8C0010 color page →

  RGB

  rgb(140 0 16)

  HSL

  hsl(353 100% 27%)

  OKLCH

  oklch(0.403 0.164 25.8)

  WCAG contrast: on white 9.89:1 (AAA) · on black 2.12:1 (Fail)

• text

  #3A0018

  #3A0018 color page →

  RGB

  rgb(58 0 24)

  HSL

  hsl(335 100% 11%)

  OKLCH

  oklch(0.225 0.091 2.5)

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

Export Atomic Magenta Elephant Grove: CSS variables, Tailwind & JSON

:root {
  --bg: #f3dde3;
  --surface: #ee87dc;
  --primary: #e20574;
  --accent: #8c0010;
  --text: #3a0018;
}

@theme {
  --color-bg: #f3dde3;
  --color-surface: #ee87dc;
  --color-primary: #e20574;
  --color-accent: #8c0010;
  --color-text: #3a0018;
}

{
  "atomic-magenta-elephant-grove-4bw": {
    "bg": {
      "$type": "color",
      "$value": "#f3dde3"
    },
    "surface": {
      "$type": "color",
      "$value": "#ee87dc"
    },
    "primary": {
      "$type": "color",
      "$value": "#e20574"
    },
    "accent": {
      "$type": "color",
      "$value": "#8c0010"
    },
    "text": {
      "$type": "color",
      "$value": "#3a0018"
    }
  }
}