Vivid Magenta Elephant Mirror palette

Colors in Vivid Magenta Elephant Mirror: HEX, RGB, HSL & OKLCH

• bg

  #EFDDE3

  #EFDDE3 color page →

  RGB

  rgb(239 221 227)

  HSL

  hsl(340 36% 90%)

  OKLCH

  oklch(0.914 0.021 355.2)

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

• surface

  #E77ED7

  #E77ED7 color page →

  RGB

  rgb(231 126 215)

  HSL

  hsl(309 69% 70%)

  OKLCH

  oklch(0.738 0.168 333)

  WCAG contrast: on white 2.51:1 (Fail) · on black 8.36:1 (AAA)

• primary

  #DA006F

  #DA006F color page →

  RGB

  rgb(218 0 111)

  HSL

  hsl(329 100% 43%)

  OKLCH

  oklch(0.574 0.232 1.6)

  WCAG contrast: on white 4.98:1 (AA) · on black 4.21:1 (Fail)

• accent

  #990016

  #990016 color page →

  RGB

  rgb(153 0 22)

  HSL

  hsl(351 100% 30%)

  OKLCH

  oklch(0.43 0.174 24.9)

  WCAG contrast: on white 8.87:1 (AAA) · on black 2.36:1 (Fail)

• text

  #2A0015

  #2A0015 color page →

  RGB

  rgb(42 0 21)

  HSL

  hsl(330 100% 8%)

  OKLCH

  oklch(0.186 0.077 354.4)

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

Export Vivid Magenta Elephant Mirror: CSS variables, Tailwind & JSON

:root {
  --bg: #efdde3;
  --surface: #e77ed7;
  --primary: #da006f;
  --accent: #990016;
  --text: #2a0015;
}

@theme {
  --color-bg: #efdde3;
  --color-surface: #e77ed7;
  --color-primary: #da006f;
  --color-accent: #990016;
  --color-text: #2a0015;
}

{
  "vivid-magenta-elephant-mirror-pp": {
    "bg": {
      "$type": "color",
      "$value": "#efdde3"
    },
    "surface": {
      "$type": "color",
      "$value": "#e77ed7"
    },
    "primary": {
      "$type": "color",
      "$value": "#da006f"
    },
    "accent": {
      "$type": "color",
      "$value": "#990016"
    },
    "text": {
      "$type": "color",
      "$value": "#2a0015"
    }
  }
}