Loading tools...
Loading tools...
Generate complementary, analogous, triadic, and monochromatic palettes. Click any swatch to copy HEX. Export as CSS variables. All browser-side.
Two colors opposite on the color wheel — maximum contrast and visual energy.
Colors adjacent on the wheel — low contrast, natural and harmonious.
Three evenly spaced colors — vibrant, balanced, and versatile.
Same hue, different lightness — elegant, minimal, and always cohesive.
HSL color math, instant updates, CSS export — all running in your browser.
Two colors 180° apart on the wheel — bold, high-contrast combinations perfect for CTAs, landing pages, and brand identities that demand attention.
Colors within 60° of each other — natural, low-contrast palettes that feel cohesive. Ideal for backgrounds, gradients, and calm UI components.
Three colors equidistant on the wheel — vibrant and balanced. Great for illustrations, infographics, and designs that need variety without chaos.
One hue, five lightness levels — elegant, minimal, always cohesive. Perfect for dark modes, minimal UIs, and color-consistent brand applications.
Click any color swatch to instantly copy its HEX value to your clipboard. A confirmation appears right on the swatch for immediate feedback.
Copy all palette colors as CSS custom properties (--color-type-n) with one click. Ready to paste into your :root block and use across your stylesheet.
Color harmony refers to aesthetically pleasing color combinations based on their positions on the color wheel. Harmonious colors feel balanced and cohesive. Complementary colors create high contrast, analogous colors are gentle and unified, triadic is vibrant and energetic, and monochromatic is elegant and minimal. Designers use these relationships to build color systems for brands, UI kits, and websites.
HEX (#FF5733) is a hexadecimal shorthand for RGB. RGB (rgb(255, 87, 51)) uses decimal values 0–255 for red, green, and blue channels. HSL (hsl(11, 100%, 60%)) uses Hue (0–360 degrees on the color wheel), Saturation (0–100%), and Lightness (0–100%). HSL is the most intuitive for designers — hue is the color, saturation is intensity, and lightness is brightness.
All calculations use HSL math in the browser. The base color is converted from HEX to HSL. Then: Complementary adds 180° to the hue. Analogous uses ±30° and ±60° offsets. Triadic uses ±120° offsets. Monochromatic keeps the same hue/saturation and varies lightness from 20% to 88%. Results are converted back to HEX and RGB.
Disclaimer: This tool is provided for informational and educational purposes only. Preview renderings are approximations and may differ from actual platform displays due to platform updates, caching, or rendering differences. We fetch publicly available metadata and do not store or share your URLs. Platforms may cache old data even after you update your content—use their official debug tools to refresh caches. ZIRA Software is not liable for any decisions made based on this tool's output.