#51806D + #66B4AD + #AF9D78 + #EFCCA6 + #F1EA9B - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#51806D

Mineral Blue · DimGray · Olive Green

HEX

#51806D

RGB

rgb(81, 128, 109)

HSL

hsl(156, 22%, 41%)

HSB

hsb(156, 37%, 50%)

CMYK

cmyk(37%, 0%, 15%, 50%)

Oklch

oklch(56.0% 0.060 166.8)

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

#66B4AD

Mineral Blue · MediumAquaMarine · Lake Green

HEX

#66B4AD

RGB

rgb(102, 180, 173)

HSL

hsl(175, 34%, 55%)

HSB

hsb(175, 43%, 71%)

CMYK

cmyk(43%, 0%, 4%, 29%)

Oklch

oklch(71.8% 0.078 188.1)

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

#AF9D78

Ginger · Tan · Sunflower

HEX

#AF9D78

RGB

rgb(175, 157, 120)

HSL

hsl(40, 26%, 58%)

HSB

hsb(40, 31%, 69%)

CMYK

cmyk(0%, 10%, 31%, 31%)

Oklch

oklch(70.2% 0.055 85.0)

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

#EFCCA6

Goose Yellow · Wheat · Peach Orange

HEX

#EFCCA6

RGB

rgb(239, 204, 166)

HSL

hsl(31, 70%, 79%)

HSB

hsb(31, 31%, 94%)

CMYK

cmyk(0%, 15%, 31%, 6%)

Oklch

oklch(86.6% 0.064 69.1)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#F1EA9B

Fresh Green · Khaki · Lemon Cream

HEX

#F1EA9B

RGB

rgb(241, 234, 155)

HSL

hsl(55, 75%, 78%)

HSB

hsb(55, 36%, 95%)

CMYK

cmyk(0%, 3%, 36%, 5%)

Oklch

oklch(92.5% 0.100 103.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

51806D

805264

Analogous

528056

51806D

527B80

Triadic

51806D

6D5280

806D52

Split-Comp.

51806D

80527B

805652

Tetradic

51806D

565280

805264

7B8052

Contrast Matrix WCAG 2.1 Contrast

51806D	66B4AD	AF9D78	EFCCA6	F1EA9B
—	1.9 Fail	1.7 Fail	3.0 Fail	3.6 AA Large
1.9 Fail	—	1.1 Fail	1.6 Fail	2.0 Fail
1.7 Fail	1.1 Fail	—	1.8 Fail	2.1 Fail
3.0 Fail	1.6 Fail	1.8 Fail	—	1.2 Fail
3.6 AA Large	2.0 Fail	2.1 Fail	1.2 Fail	—

White BG

4.5AA

2.4Fail

2.7Fail

1.5Fail

1.2Fail

Black BG

4.7AA

8.7AAA

7.9AAA

13.9AAA

17.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

656672

8888AF

A7A781

E0E0AF

EEEEAE

Deuteranopia

635F73

837DAF

A8AA83

E2E4B1

EEEFB3

Tritanopia

537576

6AB0B0

AE888A

EDB6B8

F1BDC1

Achromatopsia

707070

9C9C9C

9E9E9E

D2D2D2

E3E3E3

Shades & Tints Shades & Tints

#51806D

Dark

Light

#66B4AD

Dark

Light

#AF9D78

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #51806d;
  --color-2: #66b4ad;
  --color-3: #af9d78;
  --color-4: #efcca6;
  --color-5: #f1ea9b;
}

SCSS

$color-1: #51806d;
$color-2: #66b4ad;
$color-3: #af9d78;
$color-4: #efcca6;
$color-5: #f1ea9b;

TAILWIND

colors: {
  'brand-1': '#51806d',
  'brand-2': '#66b4ad',
  'brand-3': '#af9d78',
  'brand-4': '#efcca6',
  'brand-5': '#f1ea9b',
}

RGB Array

[81, 128, 109], [102, 180, 173], [175, 157, 120], [239, 204, 166], [241, 234, 155]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #51806D, #66B4AD, #AF9D78, #EFCCA6, #F1EA9B 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: #51806d; --color-2: #66b4ad; --color-3: #af9d78; --color-4: #efcca6; --color-5: #f1ea9b. 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 general-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