Curated colors in context.

Not sure what colors to use in your designs or where to use them? Happy Colors 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.

This sections hues

Click to copy the hex code to your clipboard

Elements

Illustration

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.

This sections hues

Click to copy the hex code to your clipboard

Elements

Icons

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 color

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
Courage
Power
Strength
Danger
Love
Passion
Romance

Yellow

Primary color

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.

But just a heads up, studies have shown that the color yellow can trigger the anxiety centers of the brain, so don't go painting your walls a saturated yellow unless you want a short temper and crying babies.

Often associated with
Sunshine
Childish
Fun
Happiness
Optimism
Positivity
Caution
Anxiety
Cowardice

Blue

Primary color

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. Although it is a broadly appealing color, it tends to be favored by men, with over 50% of men studied saying blue was their favorite color.

Often associated with
Calmness
Tranquility
Stability
Loyalty
Faith
Heaven
Loneliness
Sadness

Green

Secondary color

Green is the color of nature. It's soothing on the eyes and can promote healing... Seriously, it can lower your blood pressure, calm your mind and also suppress your appetite. Green is a great choice is your brand is associated with nature, health or money.

Often associated with
Nature
Health
Environment
Cleanliness
Safety
Growth
Money
Greed
Envy

Orange

Secondary color

Orange is the less aggressive baby brother of red. It's highly visible (though less so than red) which is why you'll see it used in construction and safety hunting equipment. It makes for a great call to action.

Often associated with
Friendliness
Energy
Adventure
Enthusiasm
Creativity
Fun
DIY

Purple

Primary color

Purple thinks it's better than all the other peasant colors. Lol, just kidding ;) Purple just has a history of being the color of superiority, being used by royalty to flaunt their position & power. It's associated with power, nobility, prestige & luxury. Purple can fall on both the warm and the cool side of the color wheel depending on how much red vs blue is added.

Often associated with
Royalty
Luxury
Sophistication
Magic
Spirituality
Moodiness
Superiority

White

Neutral color

White is the blank canvas color that has all sorts of meanings to it. It's connected to cleanliness, virtue, purity, innocence... In North American cultures that is. In other parts of the world it can have an opposite meaning.

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
Innocence
Purity
Cleanliness
Virtue
Sterile
Plain
Emptiness

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
Power
Elegance
Sophistication
Mystery
Fear
Death
Sadness
Evil

This sections hues

Click to copy the hex code to your clipboard

Who's behind Happy Hues?

Hi there πŸ‘‹ My name is Mackenzie Child, I'm the maker of Happy Hues. One of my favorite things to do is launch fun, useful and sometimes silly side-projects that I think should exist outside my headΒ :)

My goal with Happy Hues was to try to remove the issue where you know you like a color palette, but you're unsure about how to apply it to your design or illustration. I built this site to not only give you color inspiration, but also give you an example as to how and where you could use the colors.

Some of my other projects

Want to hear about what I build next?Β 

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

This sections hues

Click to copy the hex code to your clipboard

Elements

Newsletter

This sections hues

Click to copy the hex code to your clipboard