#E5E983 + #C1D9A3 + #B0C2BB + #98A0B8 + #7A8091 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E5E983

Fresh Green · Khaki · Sunflower

HEX

#E5E983

RGB

rgb(229, 233, 131)

HSL

hsl(62, 70%, 71%)

HSB

hsb(62, 44%, 91%)

CMYK

cmyk(2%, 0%, 44%, 9%)

Oklch

oklch(90.9% 0.126 110.6)

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

#C1D9A3

Willow Green · Silver · Apple Green

HEX

#C1D9A3

RGB

rgb(193, 217, 163)

HSL

hsl(87, 42%, 75%)

HSB

hsb(87, 25%, 85%)

CMYK

cmyk(11%, 0%, 25%, 15%)

Oklch

oklch(85.4% 0.077 127.4)

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

#B0C2BB

Jade · Silver · Apple Green

HEX

#B0C2BB

RGB

rgb(176, 194, 187)

HSL

hsl(157, 13%, 73%)

HSB

hsb(157, 9%, 76%)

CMYK

cmyk(9%, 0%, 4%, 24%)

Oklch

oklch(79.8% 0.022 170.5)

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

#98A0B8

Azure · DarkGray · Cobalt Blue

HEX

#98A0B8

RGB

rgb(152, 160, 184)

HSL

hsl(225, 18%, 66%)

HSB

hsb(225, 17%, 72%)

CMYK

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

Oklch

oklch(70.7% 0.036 270.9)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#7A8091

Azure · SlateGray · Warm Gray

HEX

#7A8091

RGB

rgb(122, 128, 145)

HSL

hsl(224, 9%, 52%)

HSB

hsb(224, 16%, 57%)

CMYK

cmyk(16%, 12%, 0%, 43%)

Oklch

oklch(60.1% 0.027 270.1)

Traditional「Azure」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E5E983

8581E9

Analogous

E9B981

E5E983

B2E981

Triadic

E5E983

81E5E9

E981E5

Split-Comp.

E5E983

81B2E9

B981E9

Tetradic

E5E983

81E9B9

8581E9

E981B2

Contrast Matrix WCAG 2.1 Contrast

E5E983	C1D9A3	B0C2BB	98A0B8	7A8091
—	1.2 Fail	1.4 Fail	2.0 Fail	3.1 AA Large
1.2 Fail	—	1.2 Fail	1.7 Fail	2.6 Fail
1.4 Fail	1.2 Fail	—	1.4 Fail	2.1 Fail
2.0 Fail	1.7 Fail	1.4 Fail	—	1.5 Fail
3.1 AA Large	2.6 Fail	2.1 Fail	1.5 Fail	—

White BG

1.3Fail

1.5Fail

1.9Fail

2.6Fail

3.9AA Large

Black BG

16.3AAA

13.7AAA

11.3AAA

8.1AAA

5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E7E79C

CBCCB0

B8B8BD

9B9CB2

7D7D8D

Deuteranopia

E7E6A2

CAC8B3

B7B5BD

9B9AB1

7C7C8C

Tritanopia

E5AFB3

C2BABD

B1BEBE

98AEAD

7A8A89

Achromatopsia

DCDCDC

CCCCCC

BCBCBC

A0A0A0

808080

Shades & Tints Shades & Tints

#E5E983

Dark

Light

#C1D9A3

Dark

Light

#B0C2BB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e5e983;
  --color-2: #c1d9a3;
  --color-3: #b0c2bb;
  --color-4: #98a0b8;
  --color-5: #7a8091;
}

SCSS

$color-1: #e5e983;
$color-2: #c1d9a3;
$color-3: #b0c2bb;
$color-4: #98a0b8;
$color-5: #7a8091;

TAILWIND

colors: {
  'brand-1': '#e5e983',
  'brand-2': '#c1d9a3',
  'brand-3': '#b0c2bb',
  'brand-4': '#98a0b8',
  'brand-5': '#7a8091',
}

RGB Array

[229, 233, 131], [193, 217, 163], [176, 194, 187], [152, 160, 184], [122, 128, 145]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E5E983, #C1D9A3, #B0C2BB, #98A0B8, #7A8091 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: #e5e983; --color-2: #c1d9a3; --color-3: #b0c2bb; --color-4: #98a0b8; --color-5: #7a8091. 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