#98776F + #A57C80 + #DC8981 + #FDAB97 + #FBBA94 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#98776F

Crimson · Gray · Passion Red

HEX

#98776F

RGB

rgb(152, 119, 111)

HSL

hsl(12, 17%, 52%)

HSB

hsb(12, 27%, 60%)

CMYK

cmyk(0%, 22%, 27%, 40%)

Oklch

oklch(59.9% 0.043 33.9)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#A57C80

Crimson · Gray · Passion Red

HEX

#A57C80

RGB

rgb(165, 124, 128)

HSL

hsl(354, 19%, 57%)

HSB

hsb(354, 25%, 65%)

CMYK

cmyk(0%, 25%, 22%, 35%)

Oklch

oklch(62.8% 0.051 12.1)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#DC8981

Peach Pink · DarkSalmon · Coral Red

HEX

#DC8981

RGB

rgb(220, 137, 129)

HSL

hsl(5, 57%, 68%)

HSB

hsb(5, 41%, 86%)

CMYK

cmyk(0%, 38%, 41%, 14%)

Oklch

oklch(71.4% 0.103 25.9)

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

#FDAB97

Peach Pink · LightSalmon · Coral Red

HEX

#FDAB97

RGB

rgb(253, 171, 151)

HSL

hsl(12, 96%, 79%)

HSB

hsb(12, 40%, 99%)

CMYK

cmyk(0%, 32%, 40%, 1%)

Oklch

oklch(81.6% 0.101 34.3)

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

#FBBA94

Apricot · BurlyWood · Peach Orange

HEX

#FBBA94

RGB

rgb(251, 186, 148)

HSL

hsl(22, 93%, 78%)

HSB

hsb(22, 41%, 98%)

CMYK

cmyk(0%, 26%, 41%, 2%)

Oklch

oklch(84.0% 0.091 51.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

98776F

709199

Analogous

99707C

98776F

998D70

Triadic

98776F

709978

787099

Split-Comp.

98776F

70998D

707C99

Tetradic

98776F

7C9970

709199

8D7099

Contrast Matrix WCAG 2.1 Contrast

98776F	A57C80	DC8981	FDAB97	FBBA94
—	1.1 Fail	1.5 Fail	2.2 Fail	2.4 Fail
1.1 Fail	—	1.4 Fail	2.0 Fail	2.2 Fail
1.5 Fail	1.4 Fail	—	1.4 Fail	1.6 Fail
2.2 Fail	2.0 Fail	1.4 Fail	—	1.1 Fail
2.4 Fail	2.2 Fail	1.6 Fail	1.1 Fail	—

White BG

4.0AA Large

3.6AA Large

2.6Fail

1.8Fail

1.7Fail

Black BG

5.2AA

5.8AA

7.9AAA

11.4AAA

12.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8A8971

93937F

B8B783

D9D99C

DFDE9D

Deuteranopia

8C8E71

96997F

BDC383

DEE49D

E3E89F

Tritanopia

967273

A37E7E

D88485

F9A0A1

F8A4A6

Achromatopsia

808080

898989

A1A1A1

C1C1C1

C9C9C9

Shades & Tints Shades & Tints

#98776F

Dark

Light

#A57C80

Dark

Light

#DC8981

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #98776f;
  --color-2: #a57c80;
  --color-3: #dc8981;
  --color-4: #fdab97;
  --color-5: #fbba94;
}

SCSS

$color-1: #98776f;
$color-2: #a57c80;
$color-3: #dc8981;
$color-4: #fdab97;
$color-5: #fbba94;

TAILWIND

colors: {
  'brand-1': '#98776f',
  'brand-2': '#a57c80',
  'brand-3': '#dc8981',
  'brand-4': '#fdab97',
  'brand-5': '#fbba94',
}

RGB Array

[152, 119, 111], [165, 124, 128], [220, 137, 129], [253, 171, 151], [251, 186, 148]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #98776F, #A57C80, #DC8981, #FDAB97, #FBBA94 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: #98776f; --color-2: #a57c80; --color-3: #dc8981; --color-4: #fdab97; --color-5: #fbba94. 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