My Tool Studio
Color

Color Palette Generator

This color palette generator works two ways. Press Generate or the space bar to get a fresh palette of 2 to 10 colors, lock the ones you like, and generate again until the set feels right. Pick a rule such as analogous or triadic, or let it choose, then edit, reorder, undo or adjust hue, saturation, brightness and temperature for the whole set. Check the palette as people with color blindness see it, read the contrast between every pair, and preview it on a sample page. Export as CSS, SCSS, Tailwind, JSON, SVG, PNG, ASE or PDF, or share a link. Below, enter one base color to see eight harmonies at once on an RGB or painter's RYB wheel.

Always freeNo sign upRuns in your browser

Generate a palette

Press Generate or the space bar for a new set. Lock, edit, reorder, adjust, check contrast, then export or share.

5 colors

Lock the colors you like, then generate again. With a rule selected, the first locked color is the base. Ctrl+Z or Cmd+Z undoes.

Adjust the whole palette

Hue shift0°
Saturation0%
Brightness0%
Temperature (cool to warm)0

View as

Readable pairs (4.5:1 or more)

Aa 6.0:1 AAAa 4.9:1 AA
Contrast grid for every pair
#264653#2A9D8F#E9C46A#F4A261#E76F51
#264653-3.0AA large6.0AA4.9AA3.3AA large
#2A9D8F3.0AA large-2.0Fail1.6Fail1.1Fail
#E9C46A6.0AA2.0Fail-1.2Fail1.9Fail
#F4A2614.9AA1.6Fail1.2Fail-1.5Fail
#E76F513.3AA large1.1Fail1.9Fail1.5Fail-

Preview on a sample page

BrandHome · Pricing · Blog

A heading in your first color

Body text stays dark for reading. Buttons and accents use the rest of the palette.

PrimarySecondaryBadge

Export this palette

:root {
  --my-palette-1: #264653;
  --my-palette-2: #2A9D8F;
  --my-palette-3: #E9C46A;
  --my-palette-4: #F4A261;
  --my-palette-5: #E76F51;
}

Harmonies from one base color

Color wheel
Copy format

Complementary

Base plus the hue opposite it (180°).

#6366F1
#F1EE63

Analogous

Neighbors 30° either side of the base.

#63ADF1
#6366F1
#A763F1

Triadic

Three hues 120° apart.

#6366F1
#F16366
#66F163

Split complementary

Base plus the two hues beside its opposite (150° and 210°).

#6366F1
#F1A763
#ADF163

Tetradic (rectangle)

Two complementary pairs: 0°, 60°, 180°, 240°.

#6366F1
#EE63F1
#F1EE63
#66F163

Square

Four hues 90° apart.

#6366F1
#F163AD
#F1EE63
#63F1A7

Monochromatic

One hue, lighter and darker versions.

#D1C4FF
#9B94FF
#6366F1
#1D3BBD
#00168C

Shades

One hue and saturation, five brightness levels.

#696CFF
#5456CC
#3F4199
#2A2B66
#1A1B40

Want colors taken from a photo or logo instead? Use the color palette from image tool.

How to use

01

Generate and lock

Press Generate or the space bar. Click the lock on any color you want to keep, then generate again. Choose a Rule to control how new colors relate to the first locked color, and use the arrows to reorder.

02

Adjust and check

Use the sliders to shift hue, saturation, brightness or temperature, then Apply. Switch View as to a color blindness type, read the readable pairs, and look at the sample page preview.

03

Export or explore harmonies

Pick a format in the export panel and copy or download it, or copy a share link. Further down, enter one base color to compare eight harmonies and send any of them back to the generator.

Why Color Palette Generator

Color harmonies explained, and a 60-30-10 website example

Each harmony is a fixed pattern of hue angles. The table shows the angles this tool uses, measured from your base color. Saturation and lightness stay the same, except in the monochromatic set.

To turn a harmony into a website palette, start with the base as your brand color for about 30% of the page: headers, key sections and links. Pick one harmony color as the 10% accent for buttons and highlights. The remaining 60% should be a light or dark neutral for backgrounds. For example, from #6366F1 the complementary color is a warm yellow, which works as a small accent on a white page but would be tiring as a background. Check text colors in the Color Contrast Checker before you ship.

HarmonyHue angles from baseFeel
Complementary0°, 180°High contrast, energetic
Analogous-30°, 0°, 30°Calm, cohesive
Triadic0°, 120°, 240°Balanced, playful
Split complementary0°, 150°, 210°Contrast with less tension
Tetradic (rectangle)0°, 60°, 180°, 240°Rich, needs one lead color
Square0°, 90°, 180°, 270°Bold, even spacing
Monochromatic0° with lighter and darker stepsClean, minimal

Common questions

How do I create a color palette from one color?
Enter that color as the base. The generator rotates its hue on the color wheel by fixed angles, such as 180 degrees for complementary or 120 and 240 for triadic, while keeping saturation and lightness the same. Monochromatic keeps the hue and changes lightness instead.
What colors go well together in a palette?
Colors with a clear relationship on the wheel usually work: neighbors (analogous) feel calm, opposites (complementary) feel lively, and evenly spaced sets (triadic) feel balanced. Contrast in lightness matters as much as hue, so pair a light and a dark color for text.
How many colors should a website palette have?
Most sites work well with one main brand color, one accent, and a set of neutrals for text and backgrounds, plus success, warning and error colors. More than three or four brand hues tends to look busy.
What is the 60-30-10 color rule?
It is a guideline from interior design: about 60% of a layout uses a dominant color, 30% a secondary color and 10% an accent. On a website the 60% is usually a neutral background, the 30% your brand color and the 10% buttons and highlights.
What is a monochromatic color scheme?
It uses one hue in several lighter and darker versions. This tool builds it by brightening and darkening your base color twice each, giving five swatches. It is a safe choice for simple interfaces and charts with one data series.
What is the difference between tetradic and square palettes?
Both use four hues made of two complementary pairs. Square spaces them evenly at 90 degrees. Tetradic, also called rectangle, uses 0, 60, 180 and 240 degrees, so two hues sit closer together. Both are lively, so let one color lead.
Can I export a generated palette as CSS variables or Tailwind colors?
Yes. The export panel under the generator offers CSS variables, SCSS, Tailwind v4 @theme, a Tailwind v3 colors block, JSON, a JS array, SVG and GIMP palettes, plus PNG, ASE and PDF downloads. For the harmony cards, pick a Copy format and press Copy all. Colors are numbered 1, 2 and so on, which you can rename.
Why do some palette colors look washed out or too dark?
The rotated hues keep your base color's saturation and lightness. Hues such as yellow look brighter than blue at the same HSL lightness, so a rotated palette can feel uneven. Adjust individual colors afterward in the Color Picker if needed.
Can I get a color palette from a photo with this generator?
Not directly. The generator makes colors from rules and randomness, and the harmonies start from one color you enter or pick from your screen. To pull colors from a photo or logo, use the Color Palette from Image tool linked below the harmonies.
How do I keep a color while generating new palettes?
Click the lock icon on that swatch. Locked colors stay in place every time you press Generate or the space bar. When a rule such as triadic is selected, the first locked color is the base the other colors are built from.

More Color tools

View all

Color Picker

Pick colors and copy HEX, RGB, HSL, CMYK, OKLCH

Color

HEX to RGB Converter

Convert HEX color codes to RGB and RGBA

Color

RGB to HEX Converter

Convert RGB and RGBA values to HEX

Color

HEX to HSL Converter

Convert HEX color codes to CSS HSL

Color