#977E68 + #FE9695 + #E0A7B0 + #D6B4B5 + #C3C9C7 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#977E68

Tangerine · Gray · Amber Brown

HEX

#977E68

RGB

rgb(151, 126, 104)

HSL

hsl(28, 18%, 50%)

HSB

hsb(28, 31%, 59%)

CMYK

cmyk(0%, 17%, 31%, 41%)

Oklch

oklch(61.1% 0.044 63.2)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#FE9695

Peach Pink · LightSalmon · Coral Red

HEX

#FE9695

RGB

rgb(254, 150, 149)

HSL

hsl(1, 98%, 79%)

HSB

hsb(1, 41%, 100%)

CMYK

cmyk(0%, 41%, 41%, 0%)

Oklch

oklch(78.1% 0.125 20.9)

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

#E0A7B0

Peach Pink · LightPink · Coral Red

HEX

#E0A7B0

RGB

rgb(224, 167, 176)

HSL

hsl(351, 48%, 77%)

HSB

hsb(351, 25%, 88%)

CMYK

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

Oklch

oklch(78.4% 0.068 8.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#D6B4B5

Peach Pink · Silver · Coral Red

HEX

#D6B4B5

RGB

rgb(214, 180, 181)

HSL

hsl(358, 29%, 77%)

HSB

hsb(358, 16%, 84%)

CMYK

cmyk(0%, 16%, 15%, 16%)

Oklch

oklch(80.0% 0.039 16.0)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#C3C9C7

Silver Gray · Silver · Pearl Gray

HEX

#C3C9C7

RGB

rgb(195, 201, 199)

HSL

hsl(160, 5%, 78%)

HSB

hsb(160, 3%, 79%)

CMYK

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

Oklch

oklch(83.1% 0.007 174.3)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

977E68

698196

Analogous

96696A

977E68

969569

Triadic

977E68

69967E

7E6996

Split-Comp.

977E68

699695

696A96

Tetradic

977E68

6A9669

698196

956996

Contrast Matrix WCAG 2.1 Contrast

977E68	FE9695	E0A7B0	D6B4B5	C3C9C7
—	1.8 Fail	1.9 Fail	2.0 Fail	2.3 Fail
1.8 Fail	—	1.0 Fail	1.1 Fail	1.2 Fail
1.9 Fail	1.0 Fail	—	1.1 Fail	1.2 Fail
2.0 Fail	1.1 Fail	1.1 Fail	—	1.1 Fail
2.3 Fail	1.2 Fail	1.2 Fail	1.1 Fail	—

White BG

3.8AA Large

2.1Fail

2.0Fail

1.9Fail

1.7Fail

Black BG

5.5AA

10.0AAA

10.3AAA

11.1AAA

12.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8C8C6D

D1D095

C7C7AE

C7C7B5

C6C6C7

Deuteranopia

8E906F

D7DF95

CBCFAD

C9CCB5

C5C5C8

Tritanopia

967272

F99595

DDACAC

D4B5B5

C3C8C8

Achromatopsia

838383

B5B5B5

B9B9B9

BEBEBE

C7C7C7

Shades & Tints Shades & Tints

#977E68

Dark

Light

#FE9695

Dark

Light

#E0A7B0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #977e68;
  --color-2: #fe9695;
  --color-3: #e0a7b0;
  --color-4: #d6b4b5;
  --color-5: #c3c9c7;
}

SCSS

$color-1: #977e68;
$color-2: #fe9695;
$color-3: #e0a7b0;
$color-4: #d6b4b5;
$color-5: #c3c9c7;

TAILWIND

colors: {
  'brand-1': '#977e68',
  'brand-2': '#fe9695',
  'brand-3': '#e0a7b0',
  'brand-4': '#d6b4b5',
  'brand-5': '#c3c9c7',
}

RGB Array

[151, 126, 104], [254, 150, 149], [224, 167, 176], [214, 180, 181], [195, 201, 199]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #977E68, #FE9695, #E0A7B0, #D6B4B5, #C3C9C7 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: #977e68; --color-2: #fe9695; --color-3: #e0a7b0; --color-4: #d6b4b5; --color-5: #c3c9c7. 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