Color Palette Generator
Generate tints, shades, and harmonious color palettes from any base color.
How to Use
- Click the color picker or type a hex code in the input.
- The palette updates instantly with tints, shades, and harmonic colors.
- Click any swatch to copy its value.
- Toggle between HEX, RGB, and HSL copy formats using the buttons.
When to Use This
- Deriving hover, border and disabled states from a single brand color, so a component library gets consistent steps instead of hand-picked near-misses.
- Finding an accent that reads as deliberate beside a primary color, reaching for the split-complementary pair when a straight complement looks too harsh.
- Converting a hex value a designer sent into the hsl() notation your stylesheet already uses, without opening a design application.
- Building a chart series from one base hue, taking evenly spaced shades so the categories stay distinguishable when the page is printed in grayscale.
Frequently Asked Questions
About This Tool
HSL describes a color as a hue angle on a wheel plus a saturation and a lightness percentage. Classical harmony schemes are rotations of that angle: the complement sits 180 degrees opposite, a triad splits the wheel into thirds, analogous colors sit 30 degrees to either side, and a split complement takes its two neighbors at 150 and 210 degrees. Tints and shades move along a different axis, mixing toward white or black while leaving the hue in place.
Type a six-digit hex value or use the picker. The tool converts to RGB and interpolates ten tints toward white and ten shades toward black in even steps, then works in HSL to rotate out complementary, triadic, analogous and split-complementary swatches at the base saturation and lightness. Clicking a swatch copies it as HEX, RGB or HSL. The math runs in the page, with no library and no network requests.
Notes & Limits
- Tints and shades interpolate in sRGB rather than a perceptual space such as OKLCH, so numerically even steps can look unevenly spaced in lightness, particularly through yellows and cyans.
- Nothing here checks contrast. Before putting text on a swatch, run the pair through a WCAG contrast checker, since a mid tint will often miss the 4.5:1 threshold for body copy.
- Hue rotation holds saturation and lightness fixed, so a muted base yields an equally muted complement, and a gray input with zero saturation returns identical swatches for every harmony.
- Only six-digit hex is read. Three-digit shorthand, named colors, rgb() strings and any alpha channel are ignored by the input field.