Happy Hues - Curated colors in context._Home & Family

Toggle palettesToggle section colorsCurated 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! .section-hues-row:hover {background-color: #ff6e6c !important; color: #1f1135 !important;}.section-hues-row:hover .hue-hex, .section-hues-row:hover .hue-title { color: #1f1135 !important;}This sections huesClick to copy the hex code to your clipboardElements Background #FFFFFF Headline #1f1235 Sub headline #1b1425 Button #ff6e6c Button text #1f1235 Illustration Stroke #1f1235 Main #FFFFFF Highlight #ff6e6c Secondary #67568c Tertiary #fbdd74 Color terminologyLet’s learn the terminology of color. You can think of each of these as ‘levers’ that you pull to create different colors.HueHue 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.TintA 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.ShadeA 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.ToneA tone is in between a tint and a shade. Basically you're adding grey, aka both white & black, to your hue.ValueValue 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.SaturationSaturation refers to the purity of the color. High saturated colors are very vibrant and bright, while low saturated colors are kinda dull..section-hues-row:hover {background-color: #ff6e6c !important; color: #1f1135 !important;}.section-hues-row:hover .hue-hex, .section-hues-row:hover .hue-title { color: #1f1135 !important;}This sections huesClick to copy the hex code to your clipboardElements 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 colorEach 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.RedPrimary colorRed 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 withCouragePowerStrengthDangerLovePassionRomanceYellowPrimary colorIt'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 withSunshineChildishFunHappinessOptimismPositivityCautionAnxietyCowardiceBluePrimary colorBlue 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 withCalmnessTranquilityStabilityLoyaltyFaithHeavenLonelinessSadnessGreenSecondary colorGreen 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 withNatureHealthEnvironmentCleanlinessSafetyGrowthMoneyGreedEnvyOrangeSecondary colorOrange 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 withFriendlinessEnergyAdventureEnthusiasmCreativityFunDIYPurplePrimary colorPurple 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 withRoyaltyLuxurySophisticationMagicSpiritualityMoodinessSuperiorityWhiteNeutral colorWhite 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 withInnocencePurityCleanlinessVirtueSterilePlainEmptinessBlackNeutral colorBlack 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 withPowerEleganceSophisticationMysteryFearDeathSadnessEvil.section-hues-row:hover {background-color: #ff6e6c !important; color: #1f1135 !important;}.section-hues-row:hover .hue-hex, .section-hues-row:hover .hue-title { color: #1f1135 !important;}This sections huesClick 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 projectsColorablesFree printable coloring pages for adults & kids alike.Acme LogosProfessional placeholder logos for your designs projects.Blocks wireframeMakes wireframing as simple as drag & drop.Want to hear about what I build next? Thank you! Your submission has been received!Oops! Something went wrong while submitting the form..section-hues-row:hover {background-color: #ff6e6c !important; color: #1f1135 !important;}.section-hues-row:hover .hue-hex, .section-hues-row:hover .hue-title { color: #1f1135 !important;}This sections huesClick to copy the hex code to your clipboardElements 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 meWebYouTubeInstagramTwitterWebflow©2021 Mackenzie Child. All Rights Reserved..section-hues-row:hover {background-color: #ff6e6c !important; color: #1f1135 !important;}.section-hues-row:hover .hue-hex, .section-hues-row:hover .hue-title { color: #1f1135 !important;}This sections huesClick to copy the hex code to your clipboard Background #FFFFFF Headline #1f1235 Paragraph #1b1425 Links #ff6e6c body{ padding:0; margin:0; box-sizing: border-box;}