Design Works

Homepoint Color Palette

Develop a flexible yet robust color system that enables both impactful marketing campaigns and versatile digital products.

  • UX/UI
  • identity
0 claps earned
Homepoint Color Palette

employer

Homepoint

roles

Design, development

challenge

As a critical component of the corporate rebrand, marketing department needed a punchy and vibrant set of colors for its campaign needs, yet UX/product teams needed a reliable and predictable palette that maintains consistency. How to bridge the differing needs?

solution

Curate a vivid and vibrant main palette for all things branding and marketing, and craft a standardized set of variant tints to allow for consistent and accessible digital product development.

tools

Figma, React

Identity Colors

The identity-defining colors of Homepoint brand. Since they are core part of brand identity, one should not create a lighter or darker tint out of them.

Light Blue

#0D9BD5RGB: 13/155/213CMYK: 76/24/2/0PMS: 299C

Navy

#0C3258RGB: 12/50/88CMYK: 100/84/39/32PMS: 648C

Green

#23D58CRGB: 35/213/140CMYK: 67/0/64/0PMS: 7479C

Support Colors

A complementary set of colors for visual accents and contrast. Each swatch can be used in ten different lightness with 500 being the standard primary tint of each hue. Warm hues are mostly reserved for charts, graphs, and otherwise UI distinctions,

Sky 500

#33A1CERGB: 51/161/206CMYK: 75/22/0/19PMS: TBD

Grass 500

#40BF8BRGB: 64/191/139CMYK: 66/0/27/25PMS: TBD

Turquoise 500

#46B7B2RGB: 70/183/178CMYK: 62/0/3/28PMS: TBD

Eggplant 500

#A54AB5RGB: 165/74/181CMYK: 9/59/0/29PMS: TBD

Plum 500

#7842BDRGB: 120/66/189CMYK: 37/65/0/26PMS: TBD

Lemon 500

#FFB000RGB: 255/176/0CMYK: 0/31/100/0PMS: TBD

Orange 500

#E4711ERGB: 228/113/30CMYK: 0/50/87/11PMS: TBD

Berry 500

#C23F6BRGB: 194/63/107CMYK: 0/68/45/24PMS: TBD

Cool Gray 500

#628C9DRGB: 98/140/157CMYK: 38/11/0/38PMS: TBD

Neutral Gray 500

#808080RGB: 128/128/128CMYK: 0/0/0/50PMS: TBD

Every support color swatch can be used in ten different lightness, each marked by a unique number: 50 being the lightest and 900 the darkest. Developed primarily for UI/UX needs, this system enables a wide variety of color combinations while ensuring proper contrast for accessbility and maintaining consistency.

T indicates that it passes WCAG AA and thus can be used as text color on white background.

Sky • HSL(197,61,50)• #33A1CE

900
800
T
700
600
500
400
300
200
100
50

Grass • HSL(155,50,50)• #40BF8B

900
800
T
700
600
500
400
300
200
100
50

Turquoise • HSL(177,45,50)• #46B7B2

900
800
T
700
600
500
400
300
200
100
50

Eggplant • HSL(291,42,50)• #A54AB5

900
800
700
600
T
500
400
300
200
100
50

Plum • HSL(266,48,50)• #7842BD

900
800
700
600
T
500
400
300
200
100
50

Lemon • HSL(41,100,50)• #FFB000

900
800
T
700
600
500
400
300
200
100
50

Orange • HSL(25,79,51)• #E4711E

900
800
700
T
600
500
400
300
200
100
50

Berry • HSL(340,52,50)• #C23F6B

900
800
700
600
T
500
400
300
200
100
50

Cool Gray • HSL(197,23,50)• #628C9D

900
800
700
T
600
500
400
300
200
100
50

Neutral Gray • HSL(0,0,50)• #808080

900
800
700
T
600
500
400
300
200
100
50

Creating combinations

Multiple lightness of a given hue enables a variety of impactful combinations, which can be especially useful in UI/UX design context.

Single-color examples

Sky
Plum
Grass
Turquoise
Eggplant
Berry
Lemon
Orange
Cool Gray
Neutral Gray

Two-color examples

Sky
Plum
Grass
Turquoise
Eggplant
Berry
Lemon
Orange
Cool Gray
Neutral Gray

Color in typography

When presenting written content, it's imperative to maintain proper contrast between background and text color. This standard lightness system makes it easy to ensure accessibility and keep brand consistency.

Basic color examples

White BG

Heading
HP Navy
HP Light Blue
Body text

Neutral Gray 900

Cool Gray 900

Off-White BG (Neutral Gray 50)

Heading
HP Navy
HP Light Blue
Body text

Neutral Gray 900

Cool Gray 900

HP Navy BG

Heading
White
HP Light Blue
HP Green
Body text

White

HP Light Blue BG

Heading
White
HP Navy
Body text

Neutral Gray 900

Cool Gray 900

Legible combination examples

The foreground/background combinations below can be used as body text (unless marked otherwise), as they pass WCAG Level AA requirements.

700 over white(7.0:1)
700 over 50(6.3:1)
White over 700(7.0:1)
900 over 500(5.6:1)
700 over white(5.8:1)
800 over 50(9.0:1)
White over 700(5.8:1)
900 over 500(6.9:1)
700 over white(5.9:1)
800 over 50(9.1:1)
White over 700(5.9:1)
900 over 500(6.7:1)
700 over white(9.9:1)
600 over 50(6.1:1)
White over 700(9.9:1)
White over 500(4.9:1)
700 over white(12.3:1)
500 over 50(5.9:1)
White over 700(12.3:1)
White over 500(6.9:1)
700 over white(4.8:1)
800 over 50(8.0:1)
White over 700(4.8:1)
900 over 500(8.3:1)
700 over white(7.1:1)
700 over 50(6.4:1)
White over 700(7.1:1)
900 over 500(5.6:1)
700 over white(10.0:1)
700 over 50(8.6:1)
White over 700(10.0:1)
White over 500(4.9:1)
700 over white(8.0:1)
700 over 50(7.2:1)
White over 700(8.0:1)
900 over 500(4.7:1)
700 over white(8.5:1)
600 over 50(5.1:1)
White over 700(8.5:1)
NOT SUITABLE AS TEXT BG
+0
Clap a few times
if you liked it
© 2023 by Bumhan Yu