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 Contrast Checker
Check color contrast ratios for WCAG AA and AAA accessibility compliance. Test foreground and background color combinations instantly. Free, browser-based contrast analyzer.
Color Converter – Hex, RGB, HSL, HSB & CMYK
Convert any color between Hex, RGB, HSL, HSB/HSV, and CMYK instantly in your browser. Pick a color or type a value in any format and get all others at once. Free, private, no data sent to any server.
Color Gradient Generator
Generate CSS gradients between any two colors. Customize steps, direction, and gradient type. Copy ready-to-use CSS code instantly. Free and browser-based.
Color Name Finder
Find the name of any color from a hex code or color picker. Instantly matches your color to the nearest named CSS color and a curated list of closest matches. 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
Create custom eye shadow color palettes by picking four anchor colors. The generator automatically blends the spaces between them to create a cohesive 9-color palette. Free and browser-based.
Image Color Picker
Upload any image and click to pick colors instantly. Get the exact hex, RGB, and HSL values of any pixel. Free, runs in your browser — no uploads.
Monochromatic Color Generator
Generate monochromatic color palettes from any base color. Instantly create tints, shades, and tones with hex, RGB, and HSL values. Free and browser-based.
Random Color Generator
Generate random colors instantly with hex, RGB, and HSL values. Create random color palettes of 1–10 colors. Free browser-based tool, no signup required.
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.