Duotone Color Palette Generator

Create striking duotone color combinations using two colors of your choice. Perfect for bold graphic design, posters, and modern web aesthetics.

Primary Color

Secondary Color

Export Format

Duotone Color Palette

#3b82f6

Primary

#346cc7

75% Primary

#2d5699

50% Mix

#253f6a

25% Primary

#1e293b

Secondary

Quick Export

Preset Primary Colors

Preset Secondary Colors

What Is a Duotone Color Palette

Duotone uses two base colors to create a cohesive palette with smooth transitions between them. Unlike full-spectrum gradients, duotone restricts the color range to mixes of just two hues — creating a modern, minimalist aesthetic that works well for branding, posters, and UI design.

How the Duotone Generator Works

The tool takes your primary and secondary colors, then calculates three intermediate mixes at 25%, 50%, and 75% ratios. This gives you a 5-color palette that transitions smoothly from one hue to the other.

The Math Behind the Mix

Each mixed color is calculated by blending the RGB values of your two colors. For a 50% mix of #3b82f6 (blue) and #1e293b (slate):

R: (59 × 0.5) + (30 × 0.5) = 44.5 → 44
G: (130 × 0.5) + (41 × 0.5) = 85.5 → 85
B: (246 × 0.5) + (59 × 0.5) = 152.5 → 152
Result: #2c5598

Where Duotone Palettes Work Best

Brand Identity Systems

A startup picks their brand blue and a contrasting dark slate. The duotone palette becomes their visual signature — used across their website gradients, presentation decks, and social media templates. The restricted palette feels cohesive and professional.

Music and Event Posters

A designer creates a festival poster using vibrant pink and deep purple. The duotone gradient background makes typography pop while keeping the design unified. Print costs stay low since the palette is limited.

SaaS Landing Pages

A B2B company uses a teal-to-indigo gradient for their hero section. The intermediate mix colors become button states, badge backgrounds, and progress indicators. Everything feels connected because all colors come from the same two-source palette.

Social Media Templates

A content creator builds Instagram story templates using their brand's duotone palette. They use the primary color for text, the secondary for backgrounds, and the mixed colors for decorative elements. Their feed looks consistent without being repetitive.

Data Visualization

A data analyst creates a choropleth map using the five duotone steps. Each shade represents a different value range. The gradient feels natural because all colors share the same underlying hue transition.

App Icon Design

An indie developer designs their iOS app icon using a duotone gradient. The restricted palette stands out in the App Store while maintaining visual clarity at small sizes.

Choosing Primary and Secondary Colors

High Contrast Combinations

Pair a vibrant color with a dark neutral for maximum impact:

• Bright blue + charcoal gray
• Hot pink + deep navy
• Electric green + black
• Orange + dark brown

Analogous Harmony

Use adjacent colors for a softer, more blended look:

• Teal + blue
• Coral + orange
• Purple + magenta
• Yellow + lime green

Complementary Tension

Opposite colors create energy through the middle mixes:

• Blue + orange
• Red + cyan
• Purple + yellow
• Magenta + green

What to Avoid

Two equally dark colors produce muddy midtones. Two equally light colors lack contrast. Aim for one vibrant or light color paired with one darker anchor color.

Export Formats and How to Use Them

CSS Variables

:root {
  --duotone-primary: #3b82f6;
  --duotone-secondary: #1e293b;
  --duotone-mix-1: #5a6fa8;
  --duotone-mix-2: #7a89b5;
  --duotone-mix-3: #99a3c2;
}

Import into your global stylesheet. Use as background: var(--duotone-primary);. Works with any CSS framework.

JSON

{
  "primary": "#3b82f6",
  "secondary": "#1e293b",
  "mix1": "#5a6fa8",
  "mix2": "#7a89b5",
  "mix3": "#99a3c2"
}

Import into design token systems, build tools, or JavaScript projects. Programmatically accessible.

PNG Image

Downloads a visual preview of your gradient. Use for:

• Quick mockups and presentations
• Sharing with clients or teammates
• Reference images for design tools
• Social media previews

Frequently Asked Questions

What makes a good duotone combination?

Good duotone pairs have clear contrast — either in lightness (one light, one dark) or in hue (distinctly different colors). Test combinations using the preset colors, then fine-tune with the color picker. If the gradient looks muddy in the middle, try increasing the contrast between your two base colors.

Can I use duotone for accessibility?

Duotone itself is a stylistic choice, not an accessibility feature. You still need to verify that text has sufficient contrast against background colors. Use the Contrast Checker tool to test your specific combinations. Generally, use the darkest color for text on light backgrounds, or the lightest color for text on dark backgrounds.

How is duotone different from a gradient?

A gradient is the visual transition effect. Duotone refers to the restricted color palette — only two base hues. This tool generates both: a duotone palette (5 discrete colors) and gradient previews showing how they blend. You can use the discrete colors for UI elements or the gradient for backgrounds.

Why are there exactly 5 colors in the palette?

Five colors give you the two endpoints plus three evenly-spaced intermediate mixes. This provides enough variety for most design systems (primary, secondary, hover states, active states, backgrounds) without overwhelming complexity. For more steps, use the Color Scale Generator tool.

Can I create tritone or multitone palettes?

This tool is specifically for duotone (two-color) palettes. For three-color gradients, try the Gradient Step Generator. For full palettes with multiple independent colors, use the Color Palette Generator or Custom Color Palette Generator.

How do I use duotone in Tailwind CSS?

Copy the CSS variables export and add them to your global CSS file. Then reference them using arbitrary values like bg-[var(--duotone-primary)]. For a cleaner setup, extend your tailwind.config.js theme with your duotone colors as named utilities.

What's the best way to pick colors if I'm not a designer?

Start with the preset combinations — click through the primary and secondary preset grids to see instant previews. Look for combinations where you can clearly distinguish all five steps in the gradient. If in doubt, pick a bright color you like and pair it with a dark gray or navy.

Can I save my duotone palette for later?

This tool doesn't have built-in save functionality. Export as JSON to keep a digital copy, or bookmark the page with your colors in the URL if that feature is available. For palette management, use the Favorite Colors Manager or Palette Export Tool.

Duotone vs. Other Color Palette Approaches

Use this duotone generator when you want a cohesive gradient-based palette from exactly two colors. Ideal for modern branding, hero sections, and anywhere you need smooth color transitions.

Use the Color Harmony Generator when you need multiple independent colors based on color theory rules (complementary, triadic, analogous). Better for full UI palettes with distinct semantic colors.

Use the Gradient Step Generator when you need more control over the number of steps between two colors, or when you want to generate gradients between multiple color stops.

Use the Complementary Color Finder when you have one color and just need to find its opposite on the color wheel — without the intermediate mixes.

Other Free Color Tools

Search tools