Analogous Color Scheme

An analogous color scheme uses colors that sit next to each other on the color wheel, usually within 30 to 60 degrees of a base hue. Because the hues are close together, these palettes feel harmonious and cohesive rather than high-contrast.

Your base color is converted to HSL, then new colors are generated by shifting the hue up and down by the angle step you choose, while keeping the same saturation and lightness as the base color, so every color in the palette feels like part of the same family.

30 degrees is the traditional choice for analogous schemes and works well for most designs. Use 15 degrees for a subtler, more tightly clustered palette, or 45 degrees for a wider spread that starts to introduce more contrast.

Yes, use "Copy as CSS Variables" to copy a ready-to-paste :root block with each color as a custom property, or "Copy as HEX List" to copy just the hex codes, one per line.

Complementary schemes pair a color with its opposite on the wheel (180 degrees apart) for high contrast, and triadic schemes use three colors evenly spaced 120 degrees apart. Analogous schemes keep all colors close together instead, favoring harmony over contrast.