Generate color palettes using harmony modes: random, monochromatic, analogous, complementary, triadic, and tetradic. Lock colors, export as CSS variables, Tailwind config, or SCSS. Download PNG swatches.
#2A7AC0
rgb(42, 122, 192)
hsl(208, 64%, 46%)
#1551C1
rgb(21, 81, 193)
hsl(219, 80%, 42%)
#8325D0
rgb(131, 37, 208)
hsl(273, 70%, 48%)
#E7745F
rgb(231, 116, 95)
hsl(9, 74%, 64%)
#D89C88
rgb(216, 156, 136)
hsl(15, 51%, 69%)
:root {
--color-1: #2a7ac0;
--color-2: #1551c1;
--color-3: #8325d0;
--color-4: #e7745f;
--color-5: #d89c88;
}Pick colors visually and convert between HEX, RGB, HSL, CMYK.
Convert colors between HEX, RGB, HSL, CMYK, and HSB.
Check color contrast for WCAG accessibility compliance.
Resize images with custom dimensions, percentage, or social media presets.
Generate favicons from text or emoji instantly.
Six modes: Random generates unrelated colors; Monochromatic uses one hue at different lightness levels; Analogous picks neighboring hues; Complementary uses opposite hues; Triadic picks three equally spaced hues; Tetradic picks four hues at 90-degree intervals.
Clicking the lock icon on a color swatch keeps that color fixed when you regenerate. All other unlocked colors will change. This is useful when you have found a color you like and want to build around it.
Yes. The page URL is automatically updated with the current palette colors in the hash fragment. Copy the URL and share it — anyone who opens it will see the same palette.
You can export as CSS custom properties (:root variables), Tailwind CSS config object, or SCSS variables. You can also download a PNG swatch image of the palette.
Yes, press the Spacebar key to instantly regenerate all unlocked colors. This is the fastest way to browse through palette options.