Find happy color palettes with clear yellows, corals, blues, and greens for friendly products, celebrations, onboarding, and expressive campaign work.
Happy palettes combine saturated, mostly light colors in contrasting hues: yellow with pink, orange with blue, lime with violet. Yellow, orange, and red make up almost half of this collection. The energy comes from hue contrast, which means text contrast has to be planned separately.
Happy palettes get their energy from contrasting hues: orange with blue, yellow with pink, lime with violet. The collection is very saturated (about 79% HSL on average) and mostly light, and only about a quarter of the palettes include a pair at 4.5:1.
The catch is that opposite hues can share almost the same luminance. In #ff9843, #ffdd95, #86a7fc, #3468c0, the orange #ff9843 and the periwinkle #86a7fc look strongly different, yet they measure 1.10:1. Put text on one over the other and it becomes hard to read, however bright both colors look.
The same palette works well once each color has a role based on lightness:
Not every happy palette is multicolored. #f3f8ff, #e26ee5, #7e30e1, #49108b is a bright purple ramp that suits a success or onboarding screen. Deep violet #49108b on the near-white measures 11.38:1 for text, and #7e30e1 holds white button labels at 6.18:1.
.success {
background: #f3f8ff;
color: #49108b;
}
.success .cta {
background: #7e30e1;
color: #ffffff;
}
.success .confetti {
color: #e26ee5; /* decorative only */
}Choose one bright color to lead and one opposite hue to support it, then add a dark blue, purple, or green for text and buttons. Keep the third and fourth bright colors for illustration and confetti rather than for interface roles.
Only about a quarter of happy palettes contain a pair at 4.5:1. Bright orange #ff8911 holds dark text (8.84:1 with black) but not white (2.38:1). Some sets include their own dark: in #fff67e, #bfea7c, #9bcf53, #416d19, the green #416d19 gives 5.47:1 on the yellow and holds white labels at 6.13:1.
Updated