Complementary Color Generator

How the calculation works

The base RGB color is retained as uppercase HEX. To calculate the second color, the tool rounds HSL hue, saturation and lightness to integers, adds 180° to the rounded hue, wraps it around the color wheel, and converts back to RGB. The angle is fixed. This is HSL hue opposition, rather than subtracting each RGB channel from 255.

Checkable examples

#FF0000 produces #FF0000 and #00FFFF. The default #3B82F6 produces #3B82F6 and #F6AF3C. Integer HSL rounding can change nearly gray colors: #010101 produces #000000 as the second color. Results therefore need not match an unrounded HSL calculation.

Controls and limits

RGB controls use 0–255; hue uses 0–360°; saturation, HSV value and HSL lightness use 0–100%. HSV value and HSL lightness describe different quantities. Use solid colors without alpha. Editing a result does not preserve its relationship with the other color automatically. Generate again from the base panel to restore the calculated pair.

Using the colors

The tool calculates locally in your browser. It does not sample an image or measure contrast. A complementary pair does not guarantee readable text, equal perceived brightness or accessibility compliance; test foreground and background contrast separately.