Color Harmony Palette Generator
Generate complementary and analogous HSL colors from a hex base.
Tool inputs stay in your browser · optional AI search sends your query
Good to know: Rotates HSL hue while holding saturation and lightness constant. Achromatic bases stay achromatic. Palette harmony is a starting point, not an accessibility contrast guarantee; use the contrast checker on actual foreground/background pairs.
How to use it (step by step)
- 1Fill in the boxes: “Base #RRGGBB”. Example numbers are already there so you can see how it works; replace them with yours.
- 2The result updates instantly as you type (on a phone it is below the boxes).
- 3The bold line is the main answer. Tap Copy next to any value to copy it.
Words to know
- Hex / binary
- Other ways of writing numbers. Binary uses only 0 and 1; hex uses 0–9 and A–F.
- RGB / HSL
- Ways to describe a color: RGB mixes red, green and blue light; HSL uses hue (color), saturation (strength) and lightness.
- Contrast ratio
- How different two colors look. Text needs enough contrast against its background to be easy to read.
More in Design & Color
Print Size & DPI CalculatorFind print dimensions from pixel size and desired DPI.Screen Pixel Density CalculatorCalculate PPI and physical size from resolution and diagonal.CSS Border Radius GeneratorSet independent corner radii and copy the CSS declaration.Sprite Sheet MakerCombine icons or game frames into a PNG atlas with exact JSON coordinates.Photo Contact SheetMake a numbered proof sheet of photos with filenames, without cropping.Transparent PNG TrimmerRemove empty transparent edges from logos and PNG artwork.