rgb(124, 58, 237)hsl(262, 83%, 58%)Generated palette
Color Wheel
Want to know what colors look good together? Our Color Wheel makes color combinations easy. Master color theory with interactive tools and learn the science behind harmonious color schemes for your design projects.
Color theory and the color wheel
Ever wondered how designers and artists find the perfect color combination? They use color theory. Color theory is a practical combination of art and science that's used to determine what colors look good together.
The color wheel was invented in 1666 by Isaac Newton, who mapped the color spectrum onto a circle. The color wheel is the basis of color theory, because it shows the relationship between colors. Colors that look good together are called a color harmony.
Artists and designers use these to create a particular look or feel. You can use a color wheel to find color harmonies by using the rules of color combinations. Color combinations determine the relative positions of different colors in order to find colors that create a pleasing effect.
Primary Colors
Red, Yellow, and Blue cannot be created by mixing other colors and form the foundation of all other hues.
Secondary Colors
Orange, Green, and Purple are created by mixing two primary colors in equal proportions.
Tertiary Colors
Six colors created by mixing primary and secondary colors: Red-Orange, Yellow-Orange, etc.
Color harmony types
There are six main types of color harmonies. Each creates different moods and visual effects for your designs.
Complementary Colors
Colors that are directly opposite each other on the color wheel. This creates the highest contrast and most vibrant effect.
How it works
Take your base hue and add 180° to get the complement. For example: Red (0°) + 180° = Cyan (180°)
Advantages
- Maximum contrast
- Very vibrant
- Eye-catching
Considerations
- Can be jarring
- Hard to read text
- Use sparingly
Best for
Perfect for creating bold, high-energy designs. Use sparingly as the high contrast can be overwhelming.
Examples: Red & Green, Blue & Orange, Yellow & Purple
Analogous Colors
Colors that are next to each other on the color wheel. They match well and create serene and comfortable designs.
How it works
Take your base hue and select colors within ±30° on either side. Usually 3-5 colors work best.
Advantages
- Very harmonious
- Pleasing to eye
- Easy to use
Considerations
- Low contrast
- Can lack vibrancy
- May appear monotonous
Best for
Ideal for natural, harmonious designs. Often found in nature and very pleasing to the eye.
Examples: Yellow-Orange, Yellow, Yellow-Green
Triadic Colors
Three colors evenly spaced around the color wheel. Offers strong visual contrast while retaining harmony and color richness.
How it works
Take your base hue and add 120° and 240° to create a perfect triangle on the color wheel.
Advantages
- Vibrant yet balanced
- Rich contrast
- Versatile
Considerations
- Can be overwhelming
- Needs careful balance
- Hard to master
Best for
Great for vibrant designs that need balance. Use one color as dominant and others as accents.
Examples: Red, Yellow, Blue (Primary colors)
Tetradic (Square)
Four colors evenly spaced around the color wheel, forming a square. This is the richest of all color schemes.
How it works
Take your base hue and add 90°, 180°, and 270° to create a perfect square on the color wheel.
Advantages
- Maximum variety
- Very rich
- Lots of possibilities
Considerations
- Hardest to balance
- Can be chaotic
- Requires skill
Best for
Best for designs needing variety. Choose one dominant color and use others as accents.
Examples: Red, Yellow-Green, Cyan, Blue-Violet
Split-Complementary
Uses a base color and the two colors adjacent to its complement. Provides high contrast without the tension of complementary.
How it works
Take your base hue, find its complement (+180°), then use the colors ±30° from the complement.
Advantages
- High contrast
- Less tension
- More versatile
Considerations
- Can be complex
- Needs careful handling
- Medium difficulty
Best for
Easier to use than complementary while still providing strong visual interest.
Examples: Blue with Red-Orange and Yellow-Orange
Monochromatic Colors
Different shades, tints, and tones of a single hue. Creates a harmonious and elegant appearance.
How it works
Take one hue and vary its saturation and lightness. Keep the hue constant while changing S and L values.
Advantages
- Very harmonious
- Sophisticated
- Easy to use
Considerations
- Can be boring
- Lacks contrast
- Limited variety
Best for
Perfect for sophisticated, professional designs. Creates unity and cohesion.
Examples: Light Blue, Medium Blue, Dark Blue, Navy
Understanding color values
Hue
The pure color itself, measured in degrees (0-360°) around the color wheel. Red is 0°, green is 120°, and blue is 240°.
Saturation
The intensity or purity of the color, measured as a percentage (0-100%). 100% is fully saturated, 0% is grayscale.
Lightness
How light or dark the color is, measured as a percentage (0-100%). 0% is black, 100% is white.
Professional design tips
60-30-10 Rule
Use 60% dominant color, 30% secondary color, and 10% accent color for balanced designs. This creates visual hierarchy and prevents color overwhelm.
Color Temperature
Warm colors (reds, oranges, yellows) create energy and excitement. Cool colors (blues, greens, purples) feel calm and professional.
Brand Consistency
Maintain consistent color usage across all touchpoints. Document your palette with specific hex codes and usage guidelines.
Accessibility
Ensure sufficient contrast for readability. WCAG recommends 4.5:1 for normal text. Consider that 8% of men have some form of color blindness.
Cultural Context
Colors have different meanings across cultures. Red means luck in China but danger in Western cultures. Consider your global audience.
Testing
Test your palette in different lighting and on various devices. Use tools like Color Oracle to simulate color vision deficiencies.