Color
Palettes, ramps and gradients, worked out in a perceptual color space so the results hold together rather than having one swatch that glares and one that sinks.
- Color Palette GeneratorHarmonies that are balanced, not just rotated.
- Color Shades and TintsOne color into a ten step ramp.
- CSS Gradient GeneratorTwo colors, an angle, one line of CSS.
About color
Every tool in this family does its arithmetic in OKLCH rather than HSL, and that single choice is the difference between a palette you can use and one you have to fix by hand.
HSL is convenient and its lightness is not lightness. Pure yellow and pure blue are both fifty percent lightness in HSL, and nobody looking at them would say they are equally bright. Rotate a hue at a fixed HSL lightness, which is what a color wheel generator does, and some of what comes back is far brighter than the rest. That is the reason so many generated palettes have a weak link in them.
OKLCH is the perceptual space CSS Color 4 added and browsers now support natively. A step in its lightness looks like a step. Two hues at the same lightness read as the same weight. Harmony and ramps computed in it come out balanced without anyone nudging them.
The other half is what happens when a color will not fit on a screen. Rotating a saturated hue very often lands outside sRGB, and clipping each channel at that point moves both the hue and the lightness, so the color that comes back is not the one that was asked for. These tools give up chroma instead and hold the hue, which is what CSS Color 4 specifies and what keeps a rotated set recognisable.
Everything runs in the page. No color you enter is sent anywhere, and there is no cap on how many palettes you generate.