Atomic Magentle Meadow palette

Colors in Atomic Magentle Meadow: HEX, RGB, HSL & OKLCH

• bg

  #F1E4F3

  #F1E4F3 color page →

  RGB

  rgb(241 228 243)

  HSL

  hsl(292 38% 92%)

  OKLCH

  oklch(0.934 0.024 321.7)

  WCAG contrast: on white 1.22:1 (Fail) · on black 17.13:1 (AAA)

• surface

  #AF12B2

  #AF12B2 color page →

  RGB

  rgb(175 18 178)

  HSL

  hsl(299 82% 38%)

  OKLCH

  oklch(0.536 0.239 327.4)

  WCAG contrast: on white 5.91:1 (AA) · on black 3.55:1 (Fail)

• primary

  #007F0C

  #007F0C color page →

  RGB

  rgb(0 127 12)

  HSL

  hsl(126 100% 25%)

  OKLCH

  oklch(0.517 0.172 143.1)

  WCAG contrast: on white 5.19:1 (AA) · on black 4.04:1 (Fail)

• accent

  #3E193A

  #3E193A color page →

  RGB

  rgb(62 25 58)

  HSL

  hsl(306 43% 17%)

  OKLCH

  oklch(0.282 0.076 331.6)

  WCAG contrast: on white 14.94:1 (AAA) · on black 1.40:1 (Fail)

• text

  #110A11

  #110A11 color page →

  RGB

  rgb(17 10 17)

  HSL

  hsl(300 26% 5%)

  OKLCH

  oklch(0.158 0.019 326.4)

  WCAG contrast: on white 19.52:1 (AAA) · on black 1.07:1 (Fail)

Export Atomic Magentle Meadow: CSS variables, Tailwind & JSON

:root {
  --bg: #f1e4f3;
  --surface: #af12b2;
  --primary: #007f0c;
  --accent: #3e193a;
  --text: #110a11;
}

@theme {
  --color-bg: #f1e4f3;
  --color-surface: #af12b2;
  --color-primary: #007f0c;
  --color-accent: #3e193a;
  --color-text: #110a11;
}

{
  "atomic-magentle-meadow-3nf": {
    "bg": {
      "$type": "color",
      "$value": "#f1e4f3"
    },
    "surface": {
      "$type": "color",
      "$value": "#af12b2"
    },
    "primary": {
      "$type": "color",
      "$value": "#007f0c"
    },
    "accent": {
      "$type": "color",
      "$value": "#3e193a"
    },
    "text": {
      "$type": "color",
      "$value": "#110a11"
    }
  }
}