Atomic Telemagenta Garden palette

Colors in Atomic Telemagenta Garden: HEX, RGB, HSL & OKLCH

• bg

  #FFEEFF

  #FFEEFF color page →

  RGB

  rgb(255 238 255)

  HSL

  hsl(300 100% 97%)

  OKLCH

  oklch(0.967 0.029 325.8)

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

• surface

  #D682F6

  #D682F6 color page →

  RGB

  rgb(214 130 246)

  HSL

  hsl(283 87% 74%)

  OKLCH

  oklch(0.738 0.181 316.1)

  WCAG contrast: on white 2.50:1 (Fail) · on black 8.38:1 (AAA)

• primary

  #AA39CB

  #AA39CB color page →

  RGB

  rgb(170 57 203)

  HSL

  hsl(286 58% 51%)

  OKLCH

  oklch(0.569 0.225 317.4)

  WCAG contrast: on white 5.05:1 (AA) · on black 4.15:1 (Fail)

• accent

  #5B0876

  #5B0876 color page →

  RGB

  rgb(91 8 118)

  HSL

  hsl(285 87% 25%)

  OKLCH

  oklch(0.356 0.168 315)

  WCAG contrast: on white 12.06:1 (AAA) · on black 1.74:1 (Fail)

• text

  #0F0014

  #0F0014 color page →

  RGB

  rgb(15 0 20)

  HSL

  hsl(285 100% 4%)

  OKLCH

  oklch(0.123 0.059 319.3)

  WCAG contrast: on white 20.38:1 (AAA) · on black 1.03:1 (Fail)

Export Atomic Telemagenta Garden: CSS variables, Tailwind & JSON

:root {
  --bg: #ffeeff;
  --surface: #d682f6;
  --primary: #aa39cb;
  --accent: #5b0876;
  --text: #0f0014;
}

@theme {
  --color-bg: #ffeeff;
  --color-surface: #d682f6;
  --color-primary: #aa39cb;
  --color-accent: #5b0876;
  --color-text: #0f0014;
}

{
  "atomic-telemagenta-garden-c1": {
    "bg": {
      "$type": "color",
      "$value": "#ffeeff"
    },
    "surface": {
      "$type": "color",
      "$value": "#d682f6"
    },
    "primary": {
      "$type": "color",
      "$value": "#aa39cb"
    },
    "accent": {
      "$type": "color",
      "$value": "#5b0876"
    },
    "text": {
      "$type": "color",
      "$value": "#0f0014"
    }
  }
}