Color converter + palette
Convert between hex, rgb() and hsl(), and generate a shade/tint/complementary/analogous/triadic palette in HSL space. OKLCH is not supported. It needs chroma.js/culori, a dependency this build does not add. Runs on your device.
Runs on your device. The file is never uploaded.
Color converter + palette reads a hex, rgb() or hsl() value and prints all three forms. The palette option defaults to shades and also offers tints, complementary, analogous and triadic, each built in HSL space with saturation held fixed. oklch() is refused by name, since a hand-rolled sRGB to OKLab matrix would give plausible but wrong colours.
Questions
Which color formats does it accept?
Six-digit hex with or without the leading #, rgb() or rgba() with whole-number channels, and hsl() or hsla() with a hue plus two percentages. Three-digit shorthand such as #f70 is not accepted, so write it out in full. An alpha channel is parsed off and ignored: only the first three values are read.
Does it support oklch?
No, and it says so rather than guessing. Anything it cannot read is refused with a message naming hex, rgb() and hsl() as the formats it knows. OKLCH needs an sRGB to OKLab matrix, and a subtly wrong hand-rolled version would produce plausible but wrong colors, so it was left out instead of shipped half right.
What do the palette options do?
They build variants in HSL space around your color, holding saturation fixed. shades multiplies lightness by 0.2, 0.4, 0.6, 0.8 and 1. tints moves lightness toward 100 by those same fractions. complementary rotates the hue by 180 degrees. analogous gives the hue minus 30, the base, and plus 30. triadic gives the base plus 120 and plus 240. Choose none for the conversion on its own.
Why did my hex shift after a round trip?
Because the HSL numbers are rounded before they are printed and reused. Hue lands on a whole degree, saturation and lightness on a whole percent, so going hex to hsl and back can move a channel by one. The hex and rgb lines are exact; only the hsl line carries that rounding.
What is in the output?
Three lines for the color itself, labeled hex, rgb and hsl, followed by the palette block if you asked for one. Each palette row carries a name, a hex value and the matching hsl(), so you can paste whichever form your stylesheet uses.