🛈To begin, click either the "New Colors" or "New Monochrome Colors" button and continue until you find a color you like. Hover over the color and click the lock icon to secure it. Repeat this process until you're satisfied with your selections. Adjust brightness by hovering over a color and clicking the up or down arrows. To reorder colors, use the left or right arrows. You can copy individual colors by clicking the clipboard icon or save your palette by clicking the save button. Below the palette creation section, you'll find information on color contrast, variations of your chosen palette and your saved palettes.
Palette Fine Tuning
Select a color
Hue 180
Saturation 50%
Lightness 50%
Red 127
Green 127
Blue 127
Color Pairings
Contrast 1.71
ABCDEFGH
Contrast 2.05
ABCDEFGH
Contrast 1.63
ABCDEFGH
Contrast 2.79
ABCDEFGH
Contrast 1.71
ABCDEFGH
Contrast 3.5
ABCDEFGH
Contrast 2.78
ABCDEFGH
Contrast 4.77🔥
ABCDEFGH
Contrast 2.05
ABCDEFGH
Contrast 3.5
ABCDEFGH
Contrast 1.26
ABCDEFGH
Contrast 1.36
ABCDEFGH
Contrast 1.63
ABCDEFGH
Contrast 2.78
ABCDEFGH
Contrast 1.26
ABCDEFGH
Contrast 1.71
ABCDEFGH
Contrast 2.79
ABCDEFGH
Contrast 4.77🔥
ABCDEFGH
Contrast 1.36
ABCDEFGH
Contrast 1.71
ABCDEFGH
🛈 Contrast levels range from 1 to 21, with 21 providing the highest readability for users. To ensure text remains easily readable, aim to maintain a contrast level of at least 4 or higher. The best contrast pairs will have a 🔥 emoji next to them.
Color Palette Variations
Current Palette
70C3DE
CFFD7E
5973F1
F152A2
9826E8
🛈 This section displays your color palette with variations in saturation, hue, and lightness. Click on any color to set it as your new selection.
Example Landing Page
Lorem
Lorem ipsum dolor
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Text Color
Background Color
🛈 This section previews your color palette on a sample website. Click the switch colors button to shuffle color placements.