Palette generator using CSS

You only need to specify 1 color and the rest is CSS magic

CSS code:



: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)); }

Result: