Color Tools

Analogous Color Generator

Generate analogous color palettes from any base color. Instantly find neighboring hues on the color wheel with hex, RGB, and HSL values. Free and browser-based.

Color Palette Generator

Extract color palettes from any image. Upload photos to automatically generate color schemes with hex and RGB values. Perfect for designers and developers.

Complementary Color Generator

Find the perfect complementary color for any hex or picker color. Instantly generates the 180° opposite hue with hex, RGB, and HSL values. Free, no signup required.

Eye Shadow Palette Generator

Quick and easy blended color palette generator

Split Complementary Color Generator

Generate split complementary color palettes: a base color plus two hues flanking its complement. High contrast, lower tension than strict complementary. Free and browser-based.

Tetradic Color Generator

Generate tetradic (double complementary) color palettes: four colors spaced 90° apart on the color wheel. Free browser tool with hex, RGB, and HSL values.

Triadic Color Generator

Generate triadic color palettes: three colors evenly spaced 120° apart on the color wheel. Free browser-based tool with hex, RGB, and HSL values.

About Color Harmonies

Color harmony refers to combinations of colors that feel visually balanced and pleasing to the eye. These relationships are defined by the positions of colors on the color wheel — a circular diagram that arranges hues in the order they appear in the visible light spectrum (red, orange, yellow, green, cyan, blue, violet, and back to red).

Understanding color harmony is foundational to design: whether you're choosing a color palette for a website, painting a room, selecting an outfit, or creating makeup looks, the principles below help you pick colors that work together reliably. All of the tools in this category use HSL (Hue, Saturation, Lightness) math to calculate harmonies — meaning the relationships hold regardless of which specific colors you choose.

Color Harmony Types

Complementary: Two colors directly opposite each other on the wheel (180° apart). High contrast; works well for bold, attention-grabbing designs.
Analogous: Three to five colors that sit adjacent to each other on the wheel (within a 60°–90° arc). Low contrast; naturally harmonious and soothing.
Triadic: Three colors evenly spaced 120° apart. Vibrant and balanced; works well when one color dominates and the others accent.
Tetradic (Double Complementary): Four colors arranged as two complementary pairs, 90° apart (forming a square or rectangle on the wheel). Rich variety; works best when one color dominates.
Split Complementary: A base color plus the two colors on either side of its complement (150° and 210° away). High contrast like complementary, but with more nuance and less tension.

Frequently Asked Questions

Do these tools upload my data anywhere?: No. All color calculations happen entirely in your browser using JavaScript. Nothing is sent to a server.
What color model do these tools use?: The harmony calculations use HSL (Hue, Saturation, Lightness). Results are displayed as Hex, RGB, and HSL so you can copy the format you need.
Are the generated colors exact?: The hue relationships are mathematically exact. Saturation and lightness are preserved from your base color, so the palette will always feel cohesive in tone.
What's the difference between tetradic and split complementary?: Tetradic uses four colors at 90° intervals (two complementary pairs). Split complementary uses three colors: a base plus two colors flanking its complement at ±30°. Both produce high-contrast palettes, but split complementary is generally easier to balance.
Which harmony should I use?: Complementary for bold contrast; analogous for calm, natural palettes; triadic for vibrant, energetic designs; split complementary for contrast with more flexibility than a strict two-color scheme.

Tool Categories