🛸👽 Create SVGs using JavaScript

your friendly color palette generator


select a primary color ↓

Generated Color Palettes

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 →

pppalette v2 - Your friendly color palette generator | Product Hunt

A video course

Make an SVG App

Learn how to create and manipulate SVGs using JavaScript

🛸 Check out the course

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.

SVG generators, tools & design resources

HEX, RGB & HSL color picker

curated color palettes

SVG blob generator

SVG line generator

AI-generated 3D shapes

SVG reference

SVG Spinners
How to make them

fluid SVG gradients

grunge textures

noise texture generator

abstract backgrounds

repeating SVG shapes

watercolor backgrounds

holographic backgrounds

SVG patterns with a 3D feel

grainy gradient generator

mesh-like gradient generator

glowing SVG shapes

emoji maker

isometric design builder

SVG wave generator

generative patterns

freehand SVG drawing tool

SVG arrow maker

cloud SVGs

star SVGs

heart SVGs

blurry background shapes

make some SVG ripples

wild wavy SVG shapes

curvy line patterns

make it rain, SVG-style

SVG spiral waves

SVG spiral patterns

SVG gradient circle patterns

SVG line pattern generator

bursting line patterns

gradient SVG patterns

colorful background patterns

10 Print-inspired pattern generator

make SVG scribbles

pixel art patterns

wavy line patterns

SVG grid patterns

spinning circle patterns

spinning geometric patterns

organic SVG backgrounds

glitchy shapes

shapes that vanish

SVG circles that feel 3D

Cyberpunk-style backgrounds

make funky SVG shapes

generate melting SVGs

organic speck patterns

twisting line patterns

SVG circle patterns

confetti generator

decorative SVG shapes

split SVG shapes

fun line icons

hand-drawn doodles

psychedelic backgrounds

convert SVG to PNG

encode SVG to Base64

support chart for web features

CSS Selectors
A Visual Guide

Do you have a sad landing page?

Let me take a look at your landing page and tell you how it can be improved.

👀 Let me take a look

landing page that's sad