DevBolt
Processed in your browser. Your data never leaves your device.

How do I generate a color palette online?

Pick a base color and choose a harmony rule — complementary, analogous, triadic, tetradic, split-complementary, or monochromatic — to instantly generate a cohesive color palette. Each color shows HEX, RGB, and HSL values. Copy any value with one click. Everything runs in your browser.

Generate from base color
Input
Base: #3B82F6
Output
50:  #EFF6FF
100: #DBEAFE
200: #BFDBFE
300: #93C5FD
400: #60A5FA
500: #3B82F6
600: #2563EB
700: #1D4ED8
800: #1E40AF
900: #1E3A8A
← Back to tools

Color Palette Generator

Generate harmonious color palettes from any base color using color theory algorithms.

RGB(99, 102, 241)HSL(239, 84%, 67%)

Color Harmony

Palette

Shades & Tints

Export

:root {
  --color-1: #64adf2;
  --color-2: #6366f1;
  --color-3: #a864f2;
}
About Color Harmonies

Complementary uses two colors opposite each other on the color wheel (180° apart). Creates high contrast and visual tension.

Analogous uses colors adjacent on the color wheel (30° apart). Creates harmonious, natural-feeling palettes.

Triadic uses three colors equally spaced (120° apart). Offers vibrant variety while maintaining balance.

Tetradic (Square) uses four colors at 90° intervals. Rich color schemes — best when one color dominates.

Split-Complementary uses one base plus two colors adjacent to its complement (150° and 210°). Less tension than complementary, still vibrant.

Monochromatic varies lightness of a single hue. Clean, elegant, and easy to implement.

WCAG Contrast — AA requires 4.5:1 ratio for normal text. “AA Large” means it passes the 3:1 threshold for large text (18px+ bold or 24px+).

Tips & Best Practices

Pro Tip

Use the 60-30-10 rule for balanced color schemes

Allocate 60% to your dominant/neutral color, 30% to your secondary color, and 10% to an accent color. This interior design principle works perfectly for UI: 60% background, 30% cards/containers, 10% buttons/CTAs. It creates visual hierarchy without requiring design expertise.

Common Pitfall

Colors that look great together can fail accessibility

A beautiful palette doesn't guarantee readability. Blue text on purple background may be aesthetically pleasing but fail WCAG contrast requirements (4.5:1 for normal text, 3:1 for large text). Always check contrast ratios between text and background colors — use DevBolt's Contrast Checker tool.

Real-World Example

Generate palettes from a single brand color using HSL manipulation

Start with your brand color in HSL. Create variants by adjusting lightness: 95% for backgrounds, 85% for borders, 50% for primary, 30% for hover, 15% for dark text. Adjust saturation: lower for neutrals, higher for accents. This systematic approach creates cohesive design tokens from one color choice.

Security Note

Color alone should never convey critical information

8% of men have color vision deficiency. A form that marks invalid fields only with red color is unusable for colorblind users. Always pair color with a second indicator: icons, text labels, patterns, or borders. WCAG 1.4.1 requires that color is not the sole means of conveying information.

Frequently Asked Questions

How do I generate a color palette from a single base color?
Enter a base color in HEX, RGB, or HSL format and DevBolt generates harmonious palettes using color theory algorithms. The tool creates complementary, analogous, triadic, split-complementary, and monochromatic palettes by calculating mathematically related hues on the color wheel. Each palette includes colors with their HEX, RGB, and HSL values ready to copy. Monochromatic palettes vary the saturation and lightness of your base color, producing tints and shades ideal for UI design. The calculations happen entirely in your browser using HSL color space transformations ensuring colors follow established color theory principles for visual harmony.
What is the difference between complementary, analogous, and triadic color schemes?
Complementary schemes pair two colors opposite each other on the color wheel (180 degrees apart), like blue and orange, creating high visual contrast ideal for call-to-action buttons. Analogous schemes use colors adjacent on the wheel (within 30 degrees), like blue, blue-green, and green, producing harmonious, cohesive palettes suited for calm professional designs. Triadic schemes use three colors spaced at 120-degree intervals, like red, blue, and yellow, providing vibrant variety while maintaining balance. Choose complementary for impact, analogous for subtlety, and triadic for dynamic energy. Each scheme serves different design goals and emotional responses.
How do I create an accessible color palette for web design?
Start by generating a palette from your brand color, then verify that every text-to-background combination meets WCAG 2.1 contrast requirements: at least 4.5:1 for normal text (Level AA) and 7:1 for enhanced compliance (Level AAA). Large text (18px bold or 24px regular) requires a minimum 3:1 ratio. Ensure your palette includes at least one very dark color for body text and one very light color for backgrounds. Test interactive elements like links and buttons separately. Avoid conveying meaning through color alone, as this excludes colorblind users. Use DevBolt's Contrast Checker alongside the palette generator to test each combination.

Related Generate Tools

GIT

Git Command Builder

Build git commands visually with an interactive builder — branching, merging, rebasing, stashing, tags, and 80+ cheat sheet entries

CSP

CSP Header Builder

Build Content Security Policy headers visually with framework presets, security analysis, and multi-format output for Nginx, Apache, Vercel, Netlify

CAM

Code Screenshot Generator

Create beautiful code screenshots with 8 themes, syntax highlighting, customizable backgrounds, and window chrome — free Carbon/Ray.so alternative

AI

AI Prompt Builder

Build structured AI prompts with templates, variables, and multi-format output for OpenAI, Anthropic, and Gemini APIs