Select a color to see its harmonies displayed on the wheel. Click any harmony point to copy its color code. If you are experiencing a problem on an older phone with a small touch screen, please send an email to my AI assistant at ava@xcaliburmoon.net. This will automatically prioritize the context for this page, and I will work on the issue. This should not occur, but rendering differences could cause problems. Refreshing the screen should resolve it in most cases on very old devices.
Click any color to copy its code to clipboard.
All color codes for the selected color and its harmonies. Click any field to copy.
Color theory is the foundation of visual design. Understanding how colors relate to each other helps create visually appealing and effective designs.
The color wheel is a circular diagram that shows the relationships between colors. It was first developed by Sir Isaac Newton in 1666 and has been refined over centuries. The wheel arranges colors by their chromatic relationship, with primary colors evenly spaced, secondary colors between them, and tertiary colors filling the gaps.
Modern color wheels typically display 12 main colors: three primary (red, yellow, blue), three secondary (orange, green, violet), and six tertiary colors created by mixing adjacent primary and secondary colors.
Primary colors are the foundation of all other colors. In traditional color theory (subtractive color mixing used in painting), these are red, yellow, and blue. These colors cannot be created by mixing other colors together.
In digital design (additive color mixing), the primary colors are red, green, and blue (RGB). When combined at full intensity, they create white light.
Secondary colors are created by mixing two primary colors in equal amounts:
Secondary colors sit between their parent primaries on the color wheel.
Tertiary colors are created by mixing a primary color with an adjacent secondary color. They are typically named using both parent colors:
Color harmonies are combinations of colors that are aesthetically pleasing and create visual balance. Here are the main types:
Complementary colors sit directly opposite each other on the color wheel (180 degrees apart). This creates the highest contrast and most vibrant combinations. When placed next to each other, they make each color appear more intense.
Best used for: Creating visual impact, call-to-action buttons, highlighting important elements. Use one color as dominant and the other as an accent to avoid visual tension.
Examples: Blue and Orange, Red and Green, Yellow and Purple
Analogous colors are adjacent to each other on the color wheel, typically using three colors that are 30 degrees apart. These combinations are found frequently in nature and create serene, comfortable designs.
Best used for: Creating cohesive, harmonious designs. Works well for backgrounds, gradients, and designs that need to feel natural and calming.
Examples: Blue, Blue-Green, Green; Red, Red-Orange, Orange; Yellow, Yellow-Green, Green
Triadic colors are evenly spaced around the color wheel, forming an equilateral triangle (120 degrees apart). This creates a balanced yet vibrant color scheme with strong visual contrast while retaining harmony.
Best used for: Designs that need to be colorful and lively while maintaining balance. Popular in children's products, playful branding, and creative projects.
Examples: Red, Yellow, Blue (primary triad); Orange, Green, Purple (secondary triad)
Split complementary uses a base color plus the two colors adjacent to its complement (150 and 210 degrees). This provides high contrast like complementary colors but with less tension, making it more versatile and easier to balance.
Best used for: Beginners to color theory, as it offers strong visual contrast while being harder to mess up than pure complementary. Great for websites and branding.
Examples: Blue with Yellow-Orange and Red-Orange; Green with Red-Violet and Red-Orange
Tetradic colors form a square on the color wheel, using four colors that are 90 degrees apart. This rich color scheme offers plenty of possibilities for variation but requires careful balancing to avoid visual chaos.
Best used for: Complex designs that need multiple colors. Works best when one color is dominant and others are used as accents. Common in illustration and detailed graphics.
Examples: Blue, Yellow-Green, Orange, Red-Violet
Every color can be described using three fundamental properties:
Hue is the pure color itself - what we typically mean when we say "color." It's the position on the color wheel, measured in degrees from 0 to 360. Red is at 0 degrees, green at 120 degrees, and blue at 240 degrees.
Hue is independent of how light or dark a color is, or how vivid it appears.
Saturation (also called chroma or intensity) describes how pure or vivid a color is. A fully saturated color contains no gray and appears at its most vibrant. As saturation decreases, colors become more muted and eventually become gray.
Saturation is measured as a percentage from 0% (gray) to 100% (fully vivid).
Lightness (or value) describes how light or dark a color is. Adding white creates tints (lighter versions), while adding black creates shades (darker versions). Tones are created by adding gray.
Lightness is measured from 0% (black) to 100% (white), with pure hues typically at 50%.
Colors are often described as warm or cool. Warm colors (red, orange, yellow) tend to advance visually and create feelings of energy and excitement. Cool colors (blue, green, violet) recede and evoke calm and professionalism.
Temperature is relative - a blue-red appears cooler than an orange-red, even though both are warm colors.
Practical tips for using color effectively in your designs:
A classic design principle: use your dominant color for 60% of the design, secondary color for 30%, and accent color for 10%. This creates visual hierarchy and balance.
Ensure sufficient contrast between text and background colors for readability. WCAG guidelines recommend a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
Colors evoke emotions: red signals urgency and passion, blue conveys trust and calm, green represents nature and growth, yellow suggests optimism, and purple implies luxury and creativity.
Color meanings vary across cultures. White represents purity in Western cultures but mourning in some Eastern cultures. Always research your target audience's cultural associations.
About 8% of men and 0.5% of women have some form of color blindness. Never rely on color alone to convey information - use patterns, labels, or icons as additional indicators.
Always test your color combinations in context. Colors can appear different based on surrounding colors, screen calibration, and lighting conditions.