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