#437A98 + #7B9B96 + #B2AE95 + #ECC87C + #E3DDC3 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#437A98

Slate Blue · SteelBlue · Navy Blue

HEX

#437A98

RGB

rgb(67, 122, 152)

HSL

hsl(201, 39%, 43%)

HSB

hsb(201, 56%, 60%)

CMYK

cmyk(56%, 20%, 0%, 40%)

Oklch

oklch(55.4% 0.075 234.2)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#7B9B96

Mineral Blue · LightSlateGray · Lake Green

HEX

#7B9B96

RGB

rgb(123, 155, 150)

HSL

hsl(171, 14%, 55%)

HSB

hsb(171, 21%, 61%)

CMYK

cmyk(21%, 0%, 3%, 39%)

Oklch

oklch(66.4% 0.036 184.7)

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

#B2AE95

Fresh Green · DarkGray · Sunflower

HEX

#B2AE95

RGB

rgb(178, 174, 149)

HSL

hsl(52, 16%, 64%)

HSB

hsb(52, 16%, 70%)

CMYK

cmyk(0%, 2%, 16%, 30%)

Oklch

oklch(74.7% 0.035 99.7)

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

#ECC87C

Goose Yellow · BurlyWood · Sunflower

HEX

#ECC87C

RGB

rgb(236, 200, 124)

HSL

hsl(41, 75%, 71%)

HSB

hsb(41, 47%, 93%)

CMYK

cmyk(0%, 15%, 47%, 7%)

Oklch

oklch(84.7% 0.103 84.9)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#E3DDC3

Goose Yellow · Wheat · Lemon Cream

HEX

#E3DDC3

RGB

rgb(227, 221, 195)

HSL

hsl(49, 36%, 83%)

HSB

hsb(49, 14%, 89%)

CMYK

cmyk(0%, 3%, 14%, 11%)

Oklch

oklch(89.5% 0.035 96.3)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

437A98

986143

Analogous

43988C

437A98

435098

Triadic

437A98

98437A

7A9843

Split-Comp.

437A98

984350

988C43

Tetradic

437A98

8C4398

986143

509843

Contrast Matrix WCAG 2.1 Contrast

437A98	7B9B96	B2AE95	ECC87C	E3DDC3
—	1.6 Fail	2.1 Fail	2.9 Fail	3.4 AA Large
1.6 Fail	—	1.3 Fail	1.9 Fail	2.2 Fail
2.1 Fail	1.3 Fail	—	1.4 Fail	1.6 Fail
2.9 Fail	1.9 Fail	1.4 Fail	—	1.2 Fail
3.4 AA Large	2.2 Fail	1.6 Fail	1.2 Fail	—

White BG

4.7AA

3.0AA Large

2.2Fail

1.6Fail

1.4Fail

Black BG

4.5AA Large

7.0AA

9.4AAA

13.1AAA

15.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5B5B91

898997

B0B09B

DCDC8E

E0E0C9

Deuteranopia

58548F

878598

B1B19D

DFE193

E1E1CB

Tritanopia

468B8A

7D9898

B2A0A1

EA9DA0

E3CECF

Achromatopsia

6D6D6D

919191

ACACAC

CACACA

DCDCDC

Shades & Tints Shades & Tints

#437A98

Dark

Light

#7B9B96

Dark

Light

#B2AE95

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #437a98;
  --color-2: #7b9b96;
  --color-3: #b2ae95;
  --color-4: #ecc87c;
  --color-5: #e3ddc3;
}

SCSS

$color-1: #437a98;
$color-2: #7b9b96;
$color-3: #b2ae95;
$color-4: #ecc87c;
$color-5: #e3ddc3;

TAILWIND

colors: {
  'brand-1': '#437a98',
  'brand-2': '#7b9b96',
  'brand-3': '#b2ae95',
  'brand-4': '#ecc87c',
  'brand-5': '#e3ddc3',
}

RGB Array

[67, 122, 152], [123, 155, 150], [178, 174, 149], [236, 200, 124], [227, 221, 195]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #437A98, #7B9B96, #B2AE95, #ECC87C, #E3DDC3 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: #437a98; --color-2: #7b9b96; --color-3: #b2ae95; --color-4: #ecc87c; --color-5: #e3ddc3. 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