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#F1EE63Analogous
#63ADF1#6366F1#A763F1Triadic
#6366F1#F16366#66F163Split Complement
#6366F1#F1A763#ADF163Tetradic
#6366F1#F163AD#F1EE63#63F1A7Monochromatic
#0F13AC#1D21EB#6366F1#A1A3F7#D0D1FBHow to use this tool
- 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
Watch the six scheme rows update instantly as you change the base color.
- 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?▼
Does this check color contrast for accessibility?▼
Why are the monochromatic swatches not evenly spaced?▼
What color format does it output?▼
Is my color data uploaded anywhere?▼
Why does my palette look muted or washed out?▼
Can I get more than the shown number of colors per scheme?▼
Related tools
Color Converter (HEX/RGB/HSL)
Convert colors between HEX, RGB, HSL, OKLCH.
CSS Box Shadow Generator
Build CSS box-shadow visually.
CSS Gradient Generator
Build linear and radial CSS gradients.
Cubic Bezier Generator
Build CSS easing curves visually.
CSS Border Radius Generator
Build complex CSS border-radius visually.
CSS Clamp Generator
Generate responsive CSS clamp() functions.