#7C9180 + #9DBFA4 + #BEC2A5 + #E0C4AF + #FFCEA6 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#7C9180

Celadon · Gray · Warm Gray

HEX

#7C9180

RGB

rgb(124, 145, 128)

HSL

hsl(131, 9%, 53%)

HSB

hsb(131, 14%, 57%)

CMYK

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

Oklch

oklch(63.5% 0.035 150.8)

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

#9DBFA4

Celadon · DarkSeaGreen · Apple Green

HEX

#9DBFA4

RGB

rgb(157, 191, 164)

HSL

hsl(132, 21%, 68%)

HSB

hsb(132, 18%, 75%)

CMYK

cmyk(18%, 0%, 14%, 25%)

Oklch

oklch(77.2% 0.053 151.1)

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

#BEC2A5

Fresh Green · Silver · Sunflower

HEX

#BEC2A5

RGB

rgb(190, 194, 165)

HSL

hsl(68, 19%, 70%)

HSB

hsb(68, 15%, 76%)

CMYK

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

Oklch

oklch(80.3% 0.040 113.7)

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

#E0C4AF

Apricot · Wheat · Peach Orange

HEX

#E0C4AF

RGB

rgb(224, 196, 175)

HSL

hsl(26, 44%, 78%)

HSB

hsb(26, 22%, 88%)

CMYK

cmyk(0%, 12%, 22%, 12%)

Oklch

oklch(83.9% 0.043 59.0)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#FFCEA6

Apricot · Wheat · Peach Orange

HEX

#FFCEA6

RGB

rgb(255, 206, 166)

HSL

hsl(27, 100%, 83%)

HSB

hsb(27, 35%, 100%)

CMYK

cmyk(0%, 19%, 35%, 0%)

Oklch

oklch(88.5% 0.076 60.8)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7C9180

927C8E

Analogous

83927C

7C9180

7C928B

Triadic

7C9180

807C92

92807C

Split-Comp.

7C9180

8B7C92

927C83

Tetradic

7C9180

7C8392

927C8E

928B7C

Contrast Matrix WCAG 2.1 Contrast

7C9180	9DBFA4	BEC2A5	E0C4AF	FFCEA6
—	1.7 Fail	1.8 Fail	2.0 Fail	2.4 Fail
1.7 Fail	—	1.1 Fail	1.2 Fail	1.4 Fail
1.8 Fail	1.1 Fail	—	1.1 Fail	1.3 Fail
2.0 Fail	1.2 Fail	1.1 Fail	—	1.2 Fail
2.4 Fail	1.4 Fail	1.3 Fail	1.2 Fail	—

White BG

3.4AA Large

2.0Fail

1.8Fail

1.7Fail

1.4Fail

Black BG

6.2AA

10.4AAA

11.4AAA

12.7AAA

14.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

858584

ACACAB

C0C0AC

D4D4B4

EAE9B0

Deuteranopia

848285

AAA7AC

C0BFAE

D6D8B5

EDF0B2

Tritanopia

7D8788

9FB0B1

BEB2B3

DFB8B9

FDB7B9

Achromatopsia

898989

B2B2B2

BDBDBD

CACACA

D8D8D8

Shades & Tints Shades & Tints

#7C9180

Dark

Light

#9DBFA4

Dark

Light

#BEC2A5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7c9180;
  --color-2: #9dbfa4;
  --color-3: #bec2a5;
  --color-4: #e0c4af;
  --color-5: #ffcea6;
}

SCSS

$color-1: #7c9180;
$color-2: #9dbfa4;
$color-3: #bec2a5;
$color-4: #e0c4af;
$color-5: #ffcea6;

TAILWIND

colors: {
  'brand-1': '#7c9180',
  'brand-2': '#9dbfa4',
  'brand-3': '#bec2a5',
  'brand-4': '#e0c4af',
  'brand-5': '#ffcea6',
}

RGB Array

[124, 145, 128], [157, 191, 164], [190, 194, 165], [224, 196, 175], [255, 206, 166]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7C9180, #9DBFA4, #BEC2A5, #E0C4AF, #FFCEA6 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: #7c9180; --color-2: #9dbfa4; --color-3: #bec2a5; --color-4: #e0c4af; --color-5: #ffcea6. 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