Analogous Color Scheme Generator

Analogous Color Scheme Generator

The default base color is #3B82F6. One angle-gap slider defaults to 30 degrees and is constrained to 1..90 degrees. The generated order is left analogous color at base hue minus the gap, the exact original base color, and right analogous color at base hue plus the gap.

The implementation converts the base RGB to integer-rounded HSL, preserves that rounded saturation and lightness for the two shifted swatches, wraps hue around 360 degrees, and converts back to RGB/HEX. The middle swatch bypasses the round trip so its HEX value remains byte-for-byte equal to the selected base color.

Verified default example: #3B82F6 converts internally to approximately HSL(217, 91%, 60%). At a 30-degree gap the three HEX values are #3CE0F6, #3B82F6 and #523CF6. At 90 degrees they are #3CF652, #3B82F6 and #F63CE0.

The base and each generated swatch use editable advanced panels with HEX, RGB, HSV and HSL fields. Editing a result swatch changes that swatch in the displayed/copyable result; it does not recalculate the other two. There is no automatic contrast score, color-blind simulation, gamut warning, brand-palette lock or export-file format on this tool.

Choose or type a base color, set the hue gap, press Generate color scheme, then inspect all three colors in the intended UI context before copying. The calculation is browser-local. Analogous hue spacing does not guarantee readable text or accessible contrast, so verify foreground/background pairs separately against the relevant accessibility target.