#E97B32 + #E4E6AE + #BAD6B1 + #96BEB8 + #528CB3 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E97B32

Tangerine · Chocolate · Warm Sun

HEX

#E97B32

RGB

rgb(233, 123, 50)

HSL

hsl(24, 81%, 55%)

HSB

hsb(24, 79%, 91%)

CMYK

cmyk(0%, 47%, 79%, 9%)

Oklch

oklch(69.6% 0.159 50.3)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#E4E6AE

Fresh Green · Wheat · Lemon Cream

HEX

#E4E6AE

RGB

rgb(228, 230, 174)

HSL

hsl(62, 53%, 79%)

HSB

hsb(62, 24%, 90%)

CMYK

cmyk(1%, 0%, 24%, 10%)

Oklch

oklch(91.0% 0.073 109.5)

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

#BAD6B1

Celadon · Silver · Apple Green

HEX

#BAD6B1

RGB

rgb(186, 214, 177)

HSL

hsl(105, 31%, 77%)

HSB

hsb(105, 17%, 84%)

CMYK

cmyk(13%, 0%, 17%, 16%)

Oklch

oklch(84.6% 0.059 138.1)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#96BEB8

Jade · DarkGray · Lake Green

HEX

#96BEB8

RGB

rgb(150, 190, 184)

HSL

hsl(171, 24%, 67%)

HSB

hsb(171, 21%, 75%)

CMYK

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

Oklch

oklch(77.1% 0.044 185.1)

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

#528CB3

Slate Blue · SteelBlue · Navy Blue

HEX

#528CB3

RGB

rgb(82, 140, 179)

HSL

hsl(204, 39%, 51%)

HSB

hsb(204, 54%, 70%)

CMYK

cmyk(54%, 22%, 0%, 30%)

Oklch

oklch(61.6% 0.085 239.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E97B32

2F9FE9

Analogous

E92F42

E97B32

E9D72F

Triadic

E97B32

2FE97A

7A2FE9

Split-Comp.

E97B32

2FE9D7

2F42E9

Tetradic

E97B32

42E92F

2F9FE9

D72FE9

Contrast Matrix WCAG 2.1 Contrast

E97B32	E4E6AE	BAD6B1	96BEB8	528CB3
—	2.2 Fail	1.8 Fail	1.4 Fail	1.3 Fail
2.2 Fail	—	1.2 Fail	1.6 Fail	2.8 Fail
1.8 Fail	1.2 Fail	—	1.3 Fail	2.3 Fail
1.4 Fail	1.6 Fail	1.3 Fail	—	1.8 Fail
1.3 Fail	2.8 Fail	2.3 Fail	1.8 Fail	—

White BG

2.9Fail

1.3Fail

1.6Fail

2.0Fail

3.6AA Large

Black BG

7.3AAA

16.2AAA

13.3AAA

10.4AAA

5.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B9B844

E5E5BC

C6C6BA

A7A8B9

6B6CAA

Deuteranopia

C0C848

E5E5BF

C5C2BC

A5A2BA

6863A7

Tritanopia

E45255

E4C6C9

BBC1C3

98BBBB

55A2A0

Achromatopsia

949494

DFDFDF

C9C9C9

B1B1B1

7F7F7F

Shades & Tints Shades & Tints

#E97B32

Dark

Light

#E4E6AE

Dark

Light

#BAD6B1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e97b32;
  --color-2: #e4e6ae;
  --color-3: #bad6b1;
  --color-4: #96beb8;
  --color-5: #528cb3;
}

SCSS

$color-1: #e97b32;
$color-2: #e4e6ae;
$color-3: #bad6b1;
$color-4: #96beb8;
$color-5: #528cb3;

TAILWIND

colors: {
  'brand-1': '#e97b32',
  'brand-2': '#e4e6ae',
  'brand-3': '#bad6b1',
  'brand-4': '#96beb8',
  'brand-5': '#528cb3',
}

RGB Array

[233, 123, 50], [228, 230, 174], [186, 214, 177], [150, 190, 184], [82, 140, 179]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E97B32, #E4E6AE, #BAD6B1, #96BEB8, #528CB3 is ideal for: health products, baby brands, fresh-style blogs. 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: #e97b32; --color-2: #e4e6ae; --color-3: #bad6b1; --color-4: #96beb8; --color-5: #528cb3. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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