RevealTheme logo

Color Palette Generator

Pick one base color and instantly see six harmony schemes built from it: complementary, analogous, triadic, split-complement, tetradic, and monochromatic. Everything is computed live in your browser as hex codes.

Complementary

#6366F1
#F1EE63

Analogous

#63ADF1
#6366F1
#A763F1

Triadic

#6366F1
#F16366
#66F163

Split Complement

#6366F1
#F1A763
#ADF163

Tetradic

#6366F1
#F163AD
#F1EE63
#63F1A7

Monochromatic

#0F13AC
#1D21EB
#6366F1
#A1A3F7
#D0D1FB

How to use this tool

  1. 1

    Click the color swatch to open your system color picker, or type a 6-digit hex code like #6366F1 into the text field next to it.

  2. 2

    Watch the six scheme rows update instantly as you change the base color.

  3. 3

    Read the uppercase hex code shown in the bottom-left corner of each swatch and copy the ones you want into your design tool or stylesheet.

How does a color palette generator build harmonies from one color?

This tool treats your base color as a point on the HSL color wheel and rotates its hue to find related colors. It first converts your hex input to HSL (hue 0-360 degrees, saturation and lightness as percentages), then offsets the hue by fixed angles for each scheme: complementary is +180 degrees, analogous is plus or minus 30 degrees, triadic is +120 and +240, split-complement is +150 and +210, and tetradic is +90, +180, and +270. The monochromatic scheme is the exception: it keeps the hue and saturation fixed and instead steps lightness up and down, clamping the result between 15% and 90% so the lightest and darkest swatches never collapse into pure black or white. Saturation is carried over unchanged from your base, so a muted base produces a muted palette. Because the picker uses the native HTML color input, every value is an sRGB hex code (no alpha, no wide-gamut P3 or LAB). These angle-based relationships come from traditional color-wheel theory and are a strong starting point, but they are a mathematical suggestion, not a guarantee of accessible contrast or perceptual evenness.

Common use cases

  • Picking a primary plus accent color for a website by reading the complementary pair off your brand color.

  • Building a calm, unified UI background-and-card scheme from the analogous row.

  • Generating a 5-step monochromatic tint and shade ramp for hover, active, and disabled button states.

  • Sketching a data-visualization palette where triadic or tetradic colors keep series visually distinct.

  • Exploring logo or illustration color combinations before committing in Figma or Illustrator.

  • Quickly grabbing hex codes for a CSS variable set without leaving the browser.

Frequently asked questions

Which scheme is best for websites?▼
Analogous hues feel calm and unified, complementary creates strong contrast for call-to-action elements, and monochromatic is the safest professional choice. Most UIs use a monochromatic ramp for neutrals plus one complementary accent.
Does this check color contrast for accessibility?▼
No. It only computes hue and lightness relationships and does not measure WCAG contrast ratios. Always verify text-on-background pairs with a dedicated contrast checker before shipping, since a harmonious pair can still fail the 4.5:1 minimum for body text.
Why are the monochromatic swatches not evenly spaced?▼
The lightness steps are clamped between 15% and 90%. If your base is already very light or very dark, several steps hit that floor or ceiling and look bunched together. Start from a mid-lightness base for an even ramp.
What color format does it output?▼
6-digit sRGB hex codes shown in uppercase, for example #6366F1. There is no alpha channel and no support for wide-gamut formats like Display P3, OKLCH, or LAB, because it relies on the browser's standard color input.
Is my color data uploaded anywhere?▼
No. All conversion and hue math runs entirely in your browser with JavaScript. Nothing is sent to a server, so you can use it offline once the page has loaded.
Why does my palette look muted or washed out?▼
Saturation is inherited from your base color and never boosted. If your base has low saturation, every derived color will too. Pick a more vivid base if you want a punchier palette.
Can I get more than the shown number of colors per scheme?▼
Not directly. Each scheme has a fixed count (complementary gives 2, triadic 3, tetradic 4, monochromatic 5). For larger sets, use the monochromatic ramp around several different base hues, or move to a full design-token tool.

Related tools