#7C888C + #B5B596 + #EEE29F + #F6BD8E + #FFA091 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#7C888C

Ash · LightSlateGray · Warm Gray

HEX

#7C888C

RGB

rgb(124, 136, 140)

HSL

hsl(195, 7%, 52%)

HSB

hsb(195, 11%, 55%)

CMYK

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

Oklch

oklch(61.8% 0.015 219.7)

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

#B5B596

Fresh Green · DarkGray · Sunflower

HEX

#B5B596

RGB

rgb(181, 181, 150)

HSL

hsl(60, 17%, 65%)

HSB

hsb(60, 17%, 71%)

CMYK

cmyk(0%, 0%, 17%, 29%)

Oklch

oklch(76.5% 0.043 107.4)

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

#EEE29F

Fresh Green · Khaki · Lemon Cream

HEX

#EEE29F

RGB

rgb(238, 226, 159)

HSL

hsl(51, 70%, 78%)

HSB

hsb(51, 33%, 93%)

CMYK

cmyk(0%, 5%, 33%, 7%)

Oklch

oklch(90.7% 0.086 99.2)

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

#F6BD8E

Apricot · BurlyWood · Peach Orange

HEX

#F6BD8E

RGB

rgb(246, 189, 142)

HSL

hsl(27, 85%, 76%)

HSB

hsb(27, 42%, 96%)

CMYK

cmyk(0%, 23%, 42%, 4%)

Oklch

oklch(83.9% 0.090 60.6)

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

#FFA091

Peach Pink · LightSalmon · Coral Red

HEX

#FFA091

RGB

rgb(255, 160, 145)

HSL

hsl(8, 100%, 78%)

HSB

hsb(8, 43%, 100%)

CMYK

cmyk(0%, 37%, 43%, 0%)

Oklch

oklch(79.8% 0.116 29.6)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7C888C

8D807C

Analogous

7C8D89

7C888C

7C808D

Triadic

7C888C

8D7C89

898D7C

Split-Comp.

7C888C

8D7C80

8D897C

Tetradic

7C888C

897C8D

8D807C

808D7C

Contrast Matrix WCAG 2.1 Contrast

7C888C	B5B596	EEE29F	F6BD8E	FFA091
—	1.7 Fail	2.8 Fail	2.2 Fail	1.9 Fail
1.7 Fail	—	1.6 Fail	1.3 Fail	1.1 Fail
2.8 Fail	1.6 Fail	—	1.3 Fail	1.5 Fail
2.2 Fail	1.3 Fail	1.3 Fail	—	1.2 Fail
1.9 Fail	1.1 Fail	1.5 Fail	1.2 Fail	—

White BG

3.6AA Large

2.1Fail

1.3Fail

1.7Fail

2.0Fail

Black BG

5.8AA

10.0AAA

16.0AAA

12.6AAA

10.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

81818B

B5B59E

E9E9AF

DDDD99

D6D595

Deuteranopia

81808B

B5B59F

EAEAB3

E1E59C

DBE396

Tritanopia

7D8A8A

B5A3A5

EDBCBF

F3A2A4

FA9798

Achromatopsia

858585

B1B1B1

DEDEDE

C9C9C9

BBBBBB

Shades & Tints Shades & Tints

#7C888C

Dark

Light

#B5B596

Dark

Light

#EEE29F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7c888c;
  --color-2: #b5b596;
  --color-3: #eee29f;
  --color-4: #f6bd8e;
  --color-5: #ffa091;
}

SCSS

$color-1: #7c888c;
$color-2: #b5b596;
$color-3: #eee29f;
$color-4: #f6bd8e;
$color-5: #ffa091;

TAILWIND

colors: {
  'brand-1': '#7c888c',
  'brand-2': '#b5b596',
  'brand-3': '#eee29f',
  'brand-4': '#f6bd8e',
  'brand-5': '#ffa091',
}

RGB Array

[124, 136, 140], [181, 181, 150], [238, 226, 159], [246, 189, 142], [255, 160, 145]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7C888C, #B5B596, #EEE29F, #F6BD8E, #FFA091 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: #7c888c; --color-2: #b5b596; --color-3: #eee29f; --color-4: #f6bd8e; --color-5: #ffa091. 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