Atomic Hokkaido Lavender Ribbon palette

Colors in Atomic Hokkaido Lavender Ribbon: HEX, RGB, HSL & OKLCH

• bg

  #F2E3FF

  #F2E3FF color page →

  RGB

  rgb(242 227 255)

  HSL

  hsl(272 100% 95%)

  OKLCH

  oklch(0.936 0.041 309.5)

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

• surface

  #B794FF

  #B794FF color page →

  RGB

  rgb(183 148 255)

  HSL

  hsl(260 100% 79%)

  OKLCH

  oklch(0.741 0.154 297.6)

  WCAG contrast: on white 2.41:1 (Fail) · on black 8.69:1 (AAA)

• primary

  #8A33E2

  #8A33E2 color page →

  RGB

  rgb(138 51 226)

  HSL

  hsl(270 75% 54%)

  OKLCH

  oklch(0.54 0.243 300.8)

  WCAG contrast: on white 5.74:1 (AA) · on black 3.65:1 (Fail)

• accent

  #48008A

  #48008A color page →

  RGB

  rgb(72 0 138)

  HSL

  hsl(271 100% 27%)

  OKLCH

  oklch(0.343 0.186 297.2)

  WCAG contrast: on white 12.78:1 (AAA) · on black 1.64:1 (Fail)

• text

  #0F0820

  #0F0820 color page →

  RGB

  rgb(15 8 32)

  HSL

  hsl(258 60% 8%)

  OKLCH

  oklch(0.161 0.049 293.8)

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

Export Atomic Hokkaido Lavender Ribbon: CSS variables, Tailwind & JSON

:root {
  --bg: #f2e3ff;
  --surface: #b794ff;
  --primary: #8a33e2;
  --accent: #48008a;
  --text: #0f0820;
}

@theme {
  --color-bg: #f2e3ff;
  --color-surface: #b794ff;
  --color-primary: #8a33e2;
  --color-accent: #48008a;
  --color-text: #0f0820;
}

{
  "atomic-hokkaido-lavender-ribbon-4e8": {
    "bg": {
      "$type": "color",
      "$value": "#f2e3ff"
    },
    "surface": {
      "$type": "color",
      "$value": "#b794ff"
    },
    "primary": {
      "$type": "color",
      "$value": "#8a33e2"
    },
    "accent": {
      "$type": "color",
      "$value": "#48008a"
    },
    "text": {
      "$type": "color",
      "$value": "#0f0820"
    }
  }
}