Curated colors in context.
Not sure what colors to use in your designs or where to use them? Web Palette is a color palette inspiration site that acts as a real world example as to how the colors could be used in your design projects.
← Try changing the palette!
Section palette:
hsl(49, 35%, 82%)
hsl(192, 20%, 25%)
hsl(5, 99%, 51%)
hsl(150, 4%, 11%)
hsl(0, 0%, 100%)
hsl(357, 83%, 51%)
hsl(242, 84%, 45%)
hsl(240, 100%, 5%)
hsl(0, 0%, 100%)
hsl(245, 67%, 24%)
hsl(349, 96%, 78%)
hsl(60, 92%, 60%)
hsl(192, 33%, 36%)
hsl(29, 58%, 62%)
hsl(231, 29%, 91%)
hsl(0, 0%, 100%)
hsl(0, 0%, 100%)
hsl(49, 100%, 50%)
hsl(177, 100%, 45%)
hsl(284, 56%, 53%)
hsl(240, 4%, 10%)
hsl(6, 11%, 65%)
hsl(139, 36%, 44%)
hsl(335, 22%, 53%)
hsl(235, 85%, 35%)
hsl(0, 0%, 100%)
hsl(42, 64%, 69%)
hsl(234, 84%, 19%)
hsl(158, 82%, 47%)
hsl(164, 100%, 50%)
hsl(227, 24%, 7%)
hsl(338, 81%, 69%)
hsl(51, 91%, 66%)
hsl(180, 18%, 87%)
hsl(0, 0%, 0%)
hsl(0, 0%, 25%)
hsl(0, 0%, 50%)
hsl(0, 0%, 75%)
hsl(0, 0%, 100%)
Color Terminology
Let’s learn the terminology of color. You can think of each of these as ‘levers’ that you pull to create different colors.
Hue
Hue is basically a fancy name for color... Sort of. Hue refers to the parent color, or rather the fully saturated color that doesn’t have any white (tint) or black (shade) added to it.
tint
A tint is created when you add white to a hue. When working in Figma, Sketch or any of the adobe programs, you can create a tint by lowering the saturation value of your hue.
Shade
A shade is created when you add black to a hue. Again, when working in Figma, Sketch or any of the adobe programs, you can create a shade by lowering the brightness value of your hue.
tone
A tone is in between a tint and a shade. Basically you're adding grey, aka both white & black, to your hue.
value
Value refers to the measurement of brightness of a hue. Basically it's how light or dark the color is and how much light it emits.
saturation
Saturation refers to the purity of the color. High saturated colors are very vibrant and bright, while low saturated colors are kinda dull.
Section palette:
hsl(49, 35%, 82%)
hsl(192, 20%, 25%)
hsl(5, 99%, 51%)
hsl(192, 19%, 15%)
hsl(150, 4%, 11%)
hsl(0, 0%, 100%)
hsl(357, 83%, 51%)
hsl(242, 84%, 45%)
hsl(240, 100%, 5%)
hsl(0, 0%, 100%)
hsl(240, 97%, 14%)
hsl(245, 67%, 24%)
hsl(349, 96%, 78%)
hsl(60, 92%, 60%)
hsl(335, 84%, 68%)
hsl(192, 33%, 36%)
hsl(29, 58%, 62%)
hsl(231, 29%, 91%)
hsl(0, 0%, 100%)
hsl(0, 0%, 100%)
hsl(49, 100%, 50%)
hsl(177, 100%, 45%)
hsl(284, 56%, 53%)
hsl(240, 4%, 10%)
hsl(6, 11%, 65%)
hsl(139, 36%, 44%)
hsl(335, 22%, 53%)
hsl(235, 85%, 35%)
hsl(0, 0%, 100%)
hsl(42, 64%, 69%)
hsl(234, 84%, 19%)
hsl(158, 82%, 47%)
hsl(164, 100%, 50%)
hsl(227, 24%, 7%)
hsl(338, 81%, 69%)
hsl(51, 91%, 66%)
hsl(180, 18%, 87%)
hsl(0, 0%, 0%)
hsl(0, 0%, 25%)
hsl(0, 0%, 50%)
hsl(0, 0%, 75%)
hsl(0, 0%, 100%)
The psychology of color
Each color portrays a different feeling or emotion, and by understanding the psychology of color, you can choose a color that will resonate with your target audience and give off the vibe & emotion you want.
Red
Primary Colour
Red is a very emotionally & visually intense color that can actually have a physical effect on people by raising their metabolism, respiration, heart rate, as well as making them hungry. That combined by with the fact that red is very attention grabbing, you see red used in the branding of pretty much all fast food chains.
Often associated with
Yellow
Primary Colour
It's all about the sun, baby! Yellow is a bright & energizing color that evokes feelings of happiness & positivity. It also grabs your attention, so it makes for a great call to action, and it's why you'll see it used as warning signs or combined with red in basically all fast food logos.
Often associated with
Blue
Primary Colour
Blue is a very calming color and can actually slow your metabolism (notice how there's little to no food brands that use blue in their branding). It's a broadly appealing color, which is why global companies like Facebook & Twitter use it for their logos.
Often associated with
White
Neutral color
White is the blank canvas color that has all sorts of meanings to it. White pairs great with basically any color on the spectrum. It has high contrast with pretty much all other colors and allows other colors to shine through, so it's a great choice for background colors.
Often associated with
Black
Neutral color
Black is a very powerful color... Well kind of. Black is the absence of color (ie light), which means it is not really a color itself. It has very high contrast, especially with white, so it's a popular color to use on the web.
Often associated with
Section palette:
hsl(49, 35%, 82%)
hsl(192, 20%, 25%)
hsl(5, 99%, 51%)
hsl(150, 4%, 11%)
hsl(0, 0%, 100%)
hsl(357, 83%, 51%)
hsl(242, 84%, 45%)
hsl(240, 100%, 5%)
hsl(0, 0%, 100%)
hsl(245, 67%, 24%)
hsl(349, 96%, 78%)
hsl(60, 92%, 60%)
hsl(192, 33%, 36%)
hsl(29, 58%, 62%)
hsl(231, 29%, 91%)
hsl(0, 0%, 100%)
hsl(0, 0%, 100%)
hsl(49, 100%, 50%)
hsl(177, 100%, 45%)
hsl(284, 56%, 53%)
hsl(240, 4%, 10%)
hsl(6, 11%, 65%)
hsl(139, 36%, 44%)
hsl(335, 22%, 53%)
hsl(235, 85%, 35%)
hsl(0, 0%, 100%)
hsl(42, 64%, 69%)
hsl(234, 84%, 19%)
hsl(158, 82%, 47%)
hsl(164, 100%, 50%)
hsl(227, 24%, 7%)
hsl(338, 81%, 69%)
hsl(51, 91%, 66%)
hsl(180, 18%, 87%)
hsl(0, 0%, 0%)
hsl(0, 0%, 25%)
hsl(0, 0%, 50%)
hsl(0, 0%, 75%)
hsl(0, 0%, 100%)