pppalette
your friendly color palette generator
format:
select a primary color ↓
Generated Color Palettes
with analogous
with analogous 2
analogous shift
with neutrals
complementary…
dark compl…
light compl…
dark split comp…
light split…
dark triadic
light triadic
complementary
complementary 2
complementary 3
split complementary
bright split comp.
analogous
narrow analogous
triadic palette
bright triadic palette
tint palette
shade palette
tone palette
pastel palette
neutral palette
neon palette
earth palette
jewel palette
pastel analogous
neutral ana…
neon analogous
earth analogous
jewel analogous
warmer palette
cooler palette
Blended color palettes
A very useful technique to create cohesive color palettes it to blend/mix a color over all the colors of the palette, therefore adding unity to all the colors. Here you can select a blending color, a blending intensity and a blend mode to apply to the different palettes.
blend mode →
blended analogous
blended analogous 2
blended analogous shift
blended primary with neutrals
blended with complementary neutrals
blended dark complementary
blended light complementary
blended dark split complementary
blended light split complementary
blended dark triadic
blended light triadic
blended complementary
blended dark complementary
blended bright complementary
blended split complementary
blended bright split complementary
blended analogous
blended narrow analogous
blended triadic
blended bright triadic
blended pastel analogous palette
blended neutral analogous palette
blended neon analogous palette
blended earth analogous palette
blended jewel analogous palette
about this color palette generator
🎨 Picking colors that go well together can be challenging. This color scheme generator tool aims to make the process easier.
Simply pick a starter/primary color, and the tool will automatically generate a number of beautiful color palettes composed of colors that work well together. You can then copy the individual color values from a palette or copy the color values for the whole color palette at once. You also have a choice to copy the color values as HEX, HSL or RGB, for your convenience.
The generator uses different methods of color harmony to craft the different color palettes. The harmonies available with this tool are complementary colors, split complementary, analogous, triadic, tints, tones, shades, warm and cool. On top of that you'll find a few variations like bright and dark complementary colors. All add more information and context about how color harmonies work soon, so stay tuned for that.
Quick tips: Hit the 'r' key on your keyboard to pick a random primary color and generate a whole new set of color palettes. Select different background colors to see how the colors look like on light or dark backgrounds.
I hope this color tool will prove very helpful for your design and art projects! If you'd like a collection of pre-selected and curated color palettes, have a look at hhhue. And if you're looking for a color picker and color code conversion tool, try out cccolor.
🙌 This tool is made possible thanks to iro.js and Chroma.js.
Learning about color harmonies
Color harmony is the arrangement of multiple colors together to achieve a desired visual effect. This is done by picking colors that are placed at specific positions on a color/hue wheel in relation to the position of a primary color. The most popular color harmonies are complementary colors, split complementary colors, triadic colors, analogous colors and monochromatic colors (tints, shades & tones).
Complementary Colors
Complementary colors are opposite from each other on the hue wheel and are colors that go well together while offering a maximum amount of contrast between the two colors. This works well when we want to use colors that should stand out on their own. Complementary colors are often used for color grading in movies, to give that nice contrasty effect.
Split Complementary Colors
With split complementary colors we get 3 main hues instead of the 2 that we get with complementary colors. They consist of the primary hue, along with 2 hues that are a few degrees before and after the opposite point on the color wheel.
Analogous Colors
The analogous color harmony consists of a series of hues that are close to each other on the color wheel, creating a palette that has a low amount of contrast between the different colors. This make for a more subtle and conservative color palette. Normally we see analogous colors that are separated in hue by 30 degrees from each other, but here you'll also find a narrow analogous palette where colors are separated by 15 degrees.
Triadic Colors
Triadic colors are a set of 3 colors placed at equal distance from each other on the hue wheel. These offer a good middle ground between analogous and complementary colors.
Monochromatic Colors
Monochromatic colors share a same hue, but their saturation and lightness can vary. This color palette generator tool presents 3 types of monochromatic color palettes: tints, shades and tones. Tints consist of the base hue mixed-in with various amounts of white, shades are the base hue mixed-in with various amounts of black and tones are the base hue mixed-in with various amount of gray.
Color Tone Categories
Color tone categories are groups of colors that are within a certain narrow range of saturation and lightness from each other, creating cohesion between them. These colors can have different hues, but the cohesive range of saturation and lightness places them in a group that tends to fit well together. In this tool you'll find palettes for 5 such color categories: pastel colors, neutral colors, earth colors, neon/fluorescent colors, and jewel colors. Note that in this tool the palettes for these color categories won't change until a different hue is picked. You can however click to randomize these palettes and a different saturation and lightness will be picked for the palette within the range of that color category.
Pastel Colors
Pastels are subtle, bright and subdued colors that recede in the background easily. Pastels are usually low in saturation and high in lightness.
Neutral Colors
Neutrals tones are, as their name implies, quite neutral in their effect and don't usually register to our eyes as a distinct color. Neutrals include all grays as well as unsaturated colors that are close to gray, and they work well in places where a vibrant would distract from the rest of the design.
Earth Colors
Earth tones are often seen with organic materials in the real world and are found everywhere in nature. They have a low to medium level of saturation and a medium level of brightness.
Jewel Colors
Jewel tones, as the name implies, are colors that remind of gems and crystals like rubies, sapphires, amethyst and citrine. These colors have a medium to medium-high saturation and medium lightness.
Neon/fluorescent Colors
Neon/fluorescent tones are bright and highly saturated colors. These really catch the eye and command attention and often pair well with a dark background.
To learn more about these color categories and how they work, I recommend this video by DesignerUp.