👉 Color

Color picker

<html data-color="viridian-green">

--tetradic-left:
--analogous-left:
--color:
--analogous-right:
--tetradic-right:

--triad-left:
--complementary-left:
--complementary:
--complementary-right:
--triad-right:

--background:
--surface:
--neutral-color:
--invalid-color:
--valid-color:

--on-background:
--on-surface:
---disabled-on-background:
--invalid-border-color:
--valid-border-color:

Vars 👇

[data-theme] {
    --color-sat: 100;
}

[data-theme=light] {
    --color-lig: 20;
}

[data-theme=dark] {
    --color-lig: 80;
}

[data-color="red"] {
    --color-hue: 0;
}

[data-color="orange"] {
    --color-hue: 30;
}

[data-color="yellow"] {
    --color-hue: 60;
}

[data-color="lime"] {
    --color-hue: 90;
}

[data-color="green"] {
    --color-hue: 120;
}

[data-color="jade"] {
    --color-hue: 150;
}

[data-color="cyan"] {
    --color-hue: 180;
}

[data-color="sky"] {
    --color-hue: 210;
}

[data-color="blue"] {
    --color-hue: 240;
}

[data-color="violet"] {
    --color-hue: 270;
}

[data-color="magenta"] {
    --color-hue: 300;
}

[data-color="rose"] {
    --color-hue: 330;
}