Palette generator using CSS

:root { --myBG: RebeccaPurple; } .myBg { background: var(--myBG); } .myBgLight { background: color-mix(in srgb, white 20%, var(--myBG)); } .myBgLight2 { background: color-mix(in srgb, white 40%, var(--myBG)); } .myBgLight3 { background: color-mix(in srgb, white 80%, var(--myBG)); } .myBgDark { background: color-mix(in srgb, black 20%, var(--myBG)); } .myBgDark2 { background: color-mix(in srgb, black 40%, var(--myBG)); } .myBgDark3 { background: color-mix(in srgb, black 80%, var(--myBG)); }