:root{
    --white: #f2f2f2;

    --grey-100: oklch(from var(--white) l c h);
    --grey-200: oklch(from var(--white) calc(l - 0.1) c h);
    --grey-300: oklch(from var(--white) calc(l - 0.2) c h);
    --grey-400: oklch(from var(--white) calc(l - 0.3) c h);
    --grey-500: oklch(from var(--white) calc(l - 0.4) c h);
    --grey-600: oklch(from var(--white) calc(l - 0.5) c h);
    --grey-700: oklch(from var(--white) calc(l - 0.6) c h);
    --grey-800: oklch(from var(--white) calc(l - 0.7) c h);

    --grey-a-100: oklch(from var(--grey-600) l c h / 0.9);
    --grey-a-200: oklch(from var(--grey-600) l c h / 0.8);
    --grey-a-300: oklch(from var(--grey-600) l c h / 0.7);
    --grey-a-400: oklch(from var(--grey-600) l c h / 0.6);
    --grey-a-500: oklch(from var(--grey-600) l c h / 0.5);
    --grey-a-600: oklch(from var(--grey-600) l c h / 0.4);
    --grey-a-700: oklch(from var(--grey-600) l c h / 0.3);
    --grey-a-800: oklch(from var(--grey-600) l c h / 0.2);

    --black: oklch(from var(--white) calc(l - 0.9) c h);

    --blue: #65dbff;

    --blue-100: oklch(from var(--blue) l c h);
    --blue-200: oklch(from var(--blue) calc(l - 0.1) c h);
    --blue-300: oklch(from var(--blue) calc(l - 0.15) c h);
    --blue-400: oklch(from var(--blue) calc(l - 0.2) c h);
    --blue-500: oklch(from var(--blue) calc(l - 0.25) c h);
    --blue-600: oklch(from var(--blue) calc(l - 0.3) c h);
    --blue-700: oklch(from var(--blue) calc(l - 0.35) c h);
    --blue-800: oklch(from var(--blue) calc(l - 0.4) c h);
    --blue-900: oklch(from var(--blue) calc(l - 0.45) c h);
    --blue-1000: oklch(from var(--blue) calc(l - 0.5) c h);
    --blue-1100: oklch(from var(--blue) calc(l - 0.65) c h);
    --blue-1200: oklch(from var(--blue) calc(l - 0.75) c h);
    --blue-1300: oklch(from var(--blue) calc(l - 0.85) c h);

    --orange: oklch(from var(--blue) calc(l - 0.2) c calc(h + 170));

    --orange-100: oklch(from var(--orange) l c h);
    --orange-200: oklch(from var(--orange) calc(l - 0.1) c h);
    --orange-300: oklch(from var(--orange) calc(l - 0.15) c h);
    --orange-400: oklch(from var(--orange) calc(l - 0.2) c h);
    --orange-500: oklch(from var(--orange) calc(l - 0.25) c h);
    --orange-600: oklch(from var(--orange) calc(l - 0.3) c h);
    --orange-700: oklch(from var(--orange) calc(l - 0.35) c h);
    --orange-800: oklch(from var(--orange) calc(l - 0.4) c h);

    --pink: oklch(from var(--blue) l c calc(h + 120));

    --pink-100: oklch(from var(--pink) l c h);
    --pink-200: oklch(from var(--pink) calc(l - 0.1) c h);
    --pink-300: oklch(from var(--pink) calc(l - 0.15) c h);
    --pink-400: oklch(from var(--pink) calc(l - 0.2) c h);
    --pink-500: oklch(from var(--pink) calc(l - 0.25) c h);
    --pink-600: oklch(from var(--pink) calc(l - 0.3) c h);
    --pink-700: oklch(from var(--pink) calc(l - 0.35) c h);
    --pink-800: oklch(from var(--pink) calc(l - 0.4) c h);

    --yellow: oklch(from var(--blue) l c calc(h + 240));

    --yellow-100: oklch(from var(--yellow) l c h);
    --yellow-200: oklch(from var(--yellow) calc(l - 0.1) c h);
    --yellow-300: oklch(from var(--yellow) calc(l - 0.15) c h);
    --yellow-400: oklch(from var(--yellow) calc(l - 0.2) c h);
    --yellow-500: oklch(from var(--yellow) calc(l - 0.25) c h);
    --yellow-600: oklch(from var(--yellow) calc(l - 0.3) c h);
    --yellow-700: oklch(from var(--yellow) calc(l - 0.35) c h);
    --yellow-800: oklch(from var(--yellow) calc(l - 0.4) c h);

    --green: oklch(from var(--blue) l c calc(h + 300));

    --green-100: oklch(from var(--green) l c h);
    --green-200: oklch(from var(--green) calc(l - 0.1) c h);
    --green-300: oklch(from var(--green) calc(l - 0.15) c h);
    --green-400: oklch(from var(--green) calc(l - 0.2) c h);
    --green-500: oklch(from var(--green) calc(l - 0.25) c h);
    --green-600: oklch(from var(--green) calc(l - 0.3) c h);
    --green-700: oklch(from var(--green) calc(l - 0.35) c h);
    --green-800: oklch(from var(--green) calc(l - 0.4) c h);

    --purple: oklch(from var(--blue) l c calc(h + 60));

    --purple-100: oklch(from var(--purple) l c h);
    --purple-200: oklch(from var(--purple) calc(l - 0.1) c h);
    --purple-300: oklch(from var(--purple) calc(l - 0.15) c h);
    --purple-400: oklch(from var(--purple) calc(l - 0.2) c h);
    --purple-500: oklch(from var(--purple) calc(l - 0.25) c h);
    --purple-600: oklch(from var(--purple) calc(l - 0.3) c h);
    --purple-700: oklch(from var(--purple) calc(l - 0.35) c h);
    --purple-800: oklch(from var(--purple) calc(l - 0.4) c h);

    --red: oklch(from var(--blue) l c calc(h + 155));

    --red-100: oklch(from var(--red) l c h);
    --red-200: oklch(from var(--red) calc(l - 0.1) c h);
    --red-300: oklch(from var(--red) calc(l - 0.15) c h);
    --red-400: oklch(from var(--red) calc(l - 0.2) c h);
    --red-500: oklch(from var(--red) calc(l - 0.25) c h);
    --red-600: oklch(from var(--red) calc(l - 0.3) c h);
    --red-700: oklch(from var(--red) calc(l - 0.35) c h);
    --red-800: oklch(from var(--red) calc(l - 0.4) c h);
}

.swatch{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    span{
        --bg: red;
        height: 50px;
        display: inline-block;
        background: var(--bg);
    }
}