#50ABB0 + #6DBAB2 + #9BD4C3 + #D5DAB1 + #F2C433 · coffee - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#50ABB0

Slate Blue · CadetBlue · Mint Ice

HEX

#50ABB0

RGB

rgb(80, 171, 176)

HSL

hsl(183, 38%, 50%)

HSB

hsb(183, 55%, 69%)

CMYK

cmyk(55%, 3%, 0%, 31%)

Oklch

oklch(68.8% 0.087 200.2)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#6DBAB2

Mineral Blue · MediumAquaMarine · Lake Green

HEX

#6DBAB2

RGB

rgb(109, 186, 178)

HSL

hsl(174, 36%, 58%)

HSB

hsb(174, 41%, 73%)

CMYK

cmyk(41%, 0%, 4%, 27%)

Oklch

oklch(73.7% 0.078 187.1)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#9BD4C3

Jade · LightSteelBlue · Lake Green

HEX

#9BD4C3

RGB

rgb(155, 212, 195)

HSL

hsl(162, 40%, 72%)

HSB

hsb(162, 27%, 83%)

CMYK

cmyk(27%, 0%, 8%, 17%)

Oklch

oklch(82.6% 0.063 174.3)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#D5DAB1

Fresh Green · Wheat · Lemon Cream

HEX

#D5DAB1

RGB

rgb(213, 218, 177)

HSL

hsl(67, 36%, 77%)

HSB

hsb(67, 19%, 85%)

CMYK

cmyk(2%, 0%, 19%, 15%)

Oklch

oklch(87.4% 0.055 113.2)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#F2C433

Ginger · GoldenRod · Sunflower

HEX

#F2C433

RGB

rgb(242, 196, 51)

HSL

hsl(46, 88%, 57%)

HSB

hsb(46, 79%, 95%)

CMYK

cmyk(0%, 19%, 79%, 5%)

Oklch

oklch(83.8% 0.158 89.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

50ABB0

B0544F

Analogous

4FB084

50ABB0

4F7BB0

Triadic

50ABB0

B04FAB

ABB04F

Split-Comp.

50ABB0

B04F7B

B0844F

Tetradic

50ABB0

844FB0

B0544F

7BB04F

Contrast Matrix WCAG 2.1 Contrast

50ABB0	6DBAB2	9BD4C3	D5DAB1	F2C433
—	1.2 Fail	1.6 Fail	1.9 Fail	1.6 Fail
1.2 Fail	—	1.4 Fail	1.6 Fail	1.4 Fail
1.6 Fail	1.4 Fail	—	1.2 Fail	1.0 Fail
1.9 Fail	1.6 Fail	1.2 Fail	—	1.1 Fail
1.6 Fail	1.4 Fail	1.0 Fail	1.1 Fail	—

White BG

2.7Fail

2.3Fail

1.7Fail

1.4Fail

1.7Fail

Black BG

7.8AAA

9.3AAA

12.6AAA

14.5AAA

12.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7778AF

8E8FB4

B4B4C7

D7D7BB

DEDE56

Deuteranopia

726BAF

8A84B4

B0ACC8

D7D7BD

E1E45F

Tritanopia

55AEAE

71B5B6

9ECACB

D5C3C4

F07278

Achromatopsia

909090

A2A2A2

C1C1C1

D4D4D4

C1C1C1

Shades & Tints Shades & Tints

#50ABB0

Dark

Light

#6DBAB2

Dark

Light

#9BD4C3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #50abb0;
  --color-2: #6dbab2;
  --color-3: #9bd4c3;
  --color-4: #d5dab1;
  --color-5: #f2c433;
}

SCSS

$color-1: #50abb0;
$color-2: #6dbab2;
$color-3: #9bd4c3;
$color-4: #d5dab1;
$color-5: #f2c433;

TAILWIND

colors: {
  'brand-1': '#50abb0',
  'brand-2': '#6dbab2',
  'brand-3': '#9bd4c3',
  'brand-4': '#d5dab1',
  'brand-5': '#f2c433',
}

RGB Array

[80, 171, 176], [109, 186, 178], [155, 212, 195], [213, 218, 177], [242, 196, 51]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #50ABB0, #6DBAB2, #9BD4C3, #D5DAB1, #F2C433 is ideal for: corporate websites, product showcases, portfolios. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #50abb0; --color-2: #6dbab2; --color-3: #9bd4c3; --color-4: #d5dab1; --color-5: #f2c433. LangColor editor supports one-click export to CSS, SCSS, Tailwind, JSON and more. Click the "Export" button to choose your format.

What UI/UX design tips apply to this palette?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. Use the "Contrast Matrix" tool in LangColor editor to check WCAG accessibility levels for every color pair.

Which industries or brands suit this palette?

This coffee-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. Click "AI Analysis" in the editor for more detailed brand color suggestions.

🎨 Open this palette in Editor →

Generated by LangColor online color tool · Breaking the barrier between language and color