www.happyhues.co Open in urlscan Pro
52.17.119.105  Public Scan

Form analysis
1 forms found in the DOM

Name: email-form — POST https://mackenziechild.us4.list-manage.com/subscribe/post?u=61611e85b3dea4dc53532e51e&id=d7bd8b0ce3

<form method="post" name="email-form" data-name="Email Form" style="opacity: 0;" data-w-id="7c9cdc53-0ee2-6b73-f31e-a1d2cecc16a2" action="https://mackenziechild.us4.list-manage.com/subscribe/post?u=61611e85b3dea4dc53532e51e&amp;amp;id=d7bd8b0ce3"
  id="email-form" class="newsletter" data-wf-page-id="5dd40aa8049df8776e72d0ef" data-wf-element-id="7c9cdc53-0ee2-6b73-f31e-a1d2cecc16a2">
  <div class="form-input-wrap"><label for="name" class="form-label">First name</label><input class="form-input w-input" maxlength="256" name="name" data-name="Name" placeholder="Jane" type="text" id="name" required=""></div>
  <div class="form-input-wrap"><label for="email" class="form-label">Email Address</label><input class="form-input w-input" maxlength="256" name="email" data-name="Email" placeholder="jane@example.com" type="email" id="email" required=""></div><input
    type="submit" data-wait="Please wait..." class="form-submit w-button" value="Subscribe">
</form>

Text Content

Toggle palettesToggle section colors


CURATED COLORS IN CONTEXT.

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



THIS SECTIONS HUES

Click to copy the hex code to your clipboard

ELEMENTS

Background
#FFFFFF
Headline
#1f1235
Sub headline
#1b1425
Button
#ff6e6c
Button text
#1f1235

ILLUSTRATION

Stroke
#1f1235
Main
#FFFFFF
Highlight
#ff6e6c
Secondary
#67568c
Tertiary
#fbdd74


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

Background
#f4effc
Headline
#1f1135
Sub headline
#1b1325
Card background
#e2daeb
Card headline
#1f1135
Card paragraph
#1b1325

ICONS

Stroke
#1f1235
Main
#FFFFFF
Highlight
#ff6e6c
Secondary
#67568c
Tertiary
#fbdd74


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

Background
#FFFFFF
Headline
#1f1235
Sub headline
#1b1425
Card background
#301e4e
Card headline
#ffffff
Card paragraph
#f4f0fc
Card text highlight
#ff6e6c
Card tag background
#4c346b
Card tag text
#FFFFFF


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

COLORABLES

Free printable coloring pages for adults & kids alike.

ACME LOGOS

Professional placeholder logos for your designs projects.

BLOCKS WIREFRAME

Makes wireframing as simple as drag & drop.


WANT TO HEAR ABOUT WHAT I BUILD NEXT? 

First name
Email Address
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

Background
#301e4e
Headline
#FFFFFF
Paragraph
#c9bae2
Link
#ff6e6c
Card backgroud
#463366
Card headline
#FFFFFF
Card paragraph
#cabae2

NEWSLETTER

Background
#463366
Input
#FFFFFF
Label
#FFFFFF
Placeholder
#1f1135
Button
#FFFFFF
Button text
#1f1135

Happy Hues, plus the majority of my side-projects, are designed & built visually
(without code) using Webflow 🙌🚀


FIND ME

WebYouTubeInstagramTwitterWebflow
©2021 Mackenzie Child. All Rights Reserved.


THIS SECTIONS HUES

Click to copy the hex code to your clipboard

Background
#FFFFFF
Headline
#1f1235
Paragraph
#1b1425
Links
#ff6e6c