Syntax - Web Development Podcast

pppalette
your friendly color palette generator

primary:

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

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

cccolor
HEX, RGB & HSL color picker

hhhue
curated color palettes

ssshape
SVG blob generator

llline
SVG line generator

dddepth
AI-generated 3D shapes

sssvg
SVG reference

SVG Spinners
How to make them

ffflux
fluid SVG gradients

tttexture
grunge textures

nnnoise
noise texture generator

aaabstract
abstract backgrounds

rrrepeat
repeating SVG shapes

wwwatercolor
watercolor backgrounds

hhholographic
holographic backgrounds

mmmotif
SVG patterns with a 3D feel

gggrain
grainy gradient generator

uuunion
mesh-like gradient generator

nnneon
glowing SVG shapes

ccclaymoji
emoji maker

iiisometric
isometric design builder

sssurf
SVG wave generator

qqquad
generative patterns

dddraw
freehand SVG drawing tool

pppointed
SVG arrow maker

cccloud
cloud SVGs

ssstar
star SVGs

lllove
heart SVGs

bbblurry
blurry background shapes

uuundulate
make some SVG ripples

ccchaos
wild wavy SVG shapes

oooscillate
curvy line patterns

ffflurry
make it rain, SVG-style

cccoil
SVG spiral waves

ssspiral
SVG spiral patterns

cccircular
SVG gradient circle patterns

rrreplicate
SVG line pattern generator

tttwinkle
bursting line patterns

ssscales
gradient SVG patterns

rrrainbow
colorful background patterns

ttten
10 Print-inspired pattern generator

ssscribble
make SVG scribbles

pppixelate
pixel art patterns

sssquiggly
wavy line patterns

ooorganize
SVG grid patterns

vvvortex
spinning circle patterns

gggyrate
spinning geometric patterns

llleaves
organic SVG backgrounds

ggglitch
glitchy shapes

ppperspective
shapes that vanish

sssurface
SVG circles that feel 3D

hhhorizon
Cyberpunk-style backgrounds

sssplatter
make funky SVG shapes

ssspill
generate melting SVGs

ssspot
organic speck patterns

wwwhirl
twisting line patterns

rrreflection
SVG circle patterns

bbburst
confetti generator

dddynamite
decorative SVG shapes

dddivided
split SVG shapes

lllook
fun line icons

dddoodle
hand-drawn doodles

pppsychedelic
psychedelic backgrounds

rrrasterize
convert SVG to PNG

eeencode
encode SVG to Base64

rrready?
support chart for web features

CSS Selectors
A Visual Guide

Pick + Convert colors

CCCOLOR

A simple color picker app for Mac, Windows & Linux

Get it here