How to Create a Color Palette from Scratch

The biggest mistake beginners make is trying to pick multiple colors simultaneously. Instead, start with a single color — your "seed" color. This could be your brand color, a color from a photo that inspires you, or simply a color that matches the mood you want to create.

Your seed color sets the emotional tone for the entire palette. A deep navy suggests trust and professionalism. A bright coral says playful and modern. An earthy green implies natural and sustainable. Choose based on what your design needs to communicate, not just what looks nice in isolation.

Once you have your seed color, everything else is derived from it using color theory relationships. This approach guarantees coherence because every color in the palette has a mathematical relationship to the seed. Random color picking almost never produces a palette as harmonious as one built from a single starting point.

If you don't have a seed color in mind, look at the context: what does the audience expect? Financial services skew toward blues and grays. Health and wellness use greens and soft tones. Creative agencies use bold, saturated colors. Let the context guide your starting point.

The 60-30-10 rule is the most reliable formula for applying a color palette to a real design. It ensures visual hierarchy and prevents the "paint factory explosion" look of too many competing colors.

60% — Dominant color. This is the background, the large surfaces, the general canvas of your design. It's usually a neutral or muted tone: white, off-white, light gray, or a very desaturated version of your seed color. It shouldn't compete for attention — it should provide a calm foundation.

30% — Secondary color. This creates visual interest and supports the dominant color. It's used for headers, sidebars, cards, and secondary backgrounds. It's often a medium-toned complement or analogous shade to your seed color. This is where most of your "brand color" lives.

10% — Accent color. This is your attention-grabber: call-to-action buttons, links, important icons, notification badges. It should contrast clearly with both the dominant and secondary colors. Because it's used sparingly, it can be vibrant and bold without overwhelming the design.

Most great designs follow this ratio even if the designer didn't consciously apply the rule. Look at any well-designed website or app, and you'll see the pattern: lots of one color, a moderate amount of another, and small pops of a third.

You don't need to calculate color relationships by hand. Modern palette tools do the color theory math and let you explore options visually:

Palette generators like Guten's Palette Generator create random harmonious palettes with a single click. Lock the colors you like, randomize the rest. This is the fastest way to explore possibilities when you're not sure where to start.

Harmony explorers take your seed color and show complementary, analogous, triadic, and other harmonies. Guten's Color Harmonies tool does this — enter one color, see all the harmonies derived from it. This is the method to use when you have a brand color and need to find colors that work with it.

Image extractors pull palettes from photographs. If you have a photo that captures the mood you want — a sunset, a forest, an interior design — upload it to a palette extractor and it will identify the dominant colors. This is especially useful for creating mood-specific palettes.

Contrast checkers validate that your palette actually works for real content. A beautiful palette that fails accessibility contrast requirements isn't usable for text-heavy designs. Always test text/background combinations before finalizing.

The best workflow: generate options with a palette tool, explore harmonies for your seed color, then validate every text combination with a contrast checker. It takes 5 minutes and saves hours of redesign later.

A palette that looks great on a swatch card can fall apart in a real design. Always test your colors in realistic contexts before committing:

Test on different backgrounds. Colors look different on white, dark, and colored backgrounds. That soft purple accent might pop beautifully on white but disappear on your light gray card backgrounds.

Test with real content. Use actual text, not Lorem Ipsum. Real headlines and body text show you whether your color combinations are readable at actual sizes. Pay attention to body text readability — headers are large enough to forgive low contrast, but 14px body text is not.

Test in dark mode. If your product supports dark mode, your palette needs to work on dark backgrounds too. This usually means creating lighter/desaturated variants of your colors rather than using the same values on a dark background.

Test for color blindness. About 8% of men have some form of color vision deficiency. Run your palette through a color blindness simulator (like Guten's) to ensure your design is distinguishable under protanopia, deuteranopia, and tritanopia.

Test on real screens. Laptop screens, phone screens, and external monitors all render colors differently. A color that looks subtle on a well-calibrated desktop monitor might look invisible on a low-contrast laptop panel. Test on the devices your audience actually uses.