#8F898B + #E677A7 + #FF99A8 + #DABB97 + #D3E6B8 · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8F898B

Ash · Gray · Warm Gray

HEX

#8F898B

RGB

rgb(143, 137, 139)

HSL

hsl(340, 3%, 55%)

HSB

hsb(340, 4%, 56%)

CMYK

cmyk(0%, 4%, 3%, 44%)

Oklch

oklch(63.6% 0.008 354.9)

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

#E677A7

Rouge · LightCoral · Rose Pink

HEX

#E677A7

RGB

rgb(230, 119, 167)

HSL

hsl(334, 69%, 68%)

HSB

hsb(334, 48%, 90%)

CMYK

cmyk(0%, 48%, 27%, 10%)

Oklch

oklch(70.9% 0.147 354.2)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#FF99A8

Peach Pink · LightPink · Coral Red

HEX

#FF99A8

RGB

rgb(255, 153, 168)

HSL

hsl(351, 100%, 80%)

HSB

hsb(351, 40%, 100%)

CMYK

cmyk(0%, 40%, 34%, 0%)

Oklch

oklch(79.2% 0.123 10.8)

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

#DABB97

Goose Yellow · Tan · Warm Sun

HEX

#DABB97

RGB

rgb(218, 187, 151)

HSL

hsl(32, 48%, 72%)

HSB

hsb(32, 31%, 85%)

CMYK

cmyk(0%, 14%, 31%, 15%)

Oklch

oklch(81.0% 0.060 71.0)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#D3E6B8

Willow Green · LightGray · Mint Green

HEX

#D3E6B8

RGB

rgb(211, 230, 184)

HSL

hsl(85, 48%, 81%)

HSB

hsb(85, 20%, 90%)

CMYK

cmyk(8%, 0%, 20%, 10%)

Oklch

oklch(89.9% 0.064 125.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8F898B

89908D

Analogous

90898F

8F898B

908A89

Triadic

8F898B

8B9089

898B90

Split-Comp.

8F898B

89908A

898F90

Tetradic

8F898B

8F9089

89908D

8A8990

Contrast Matrix WCAG 2.1 Contrast

8F898B	E677A7	FF99A8	DABB97	D3E6B8
—	1.2 Fail	1.7 Fail	1.9 Fail	2.6 Fail
1.2 Fail	—	1.4 Fail	1.5 Fail	2.1 Fail
1.7 Fail	1.4 Fail	—	1.1 Fail	1.5 Fail
1.9 Fail	1.5 Fail	1.1 Fail	—	1.4 Fail
2.6 Fail	2.1 Fail	1.5 Fail	1.4 Fail	—

White BG

3.4AA Large

2.8Fail

2.0Fail

1.8Fail

1.3Fail

Black BG

6.1AA

7.6AAA

10.4AAA

11.5AAA

15.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8C8C8B

B6B59B

D3D2A4

CDCCA0

DBDBC3

Deuteranopia

8D8D8A

BCC599

D9E0A4

CED1A2

DAD9C6

Tritanopia

8F8A8A

E09290

FAA2A1

D8A7A8

D4CCCE

Achromatopsia

8B8B8B

9E9E9E

B9B9B9

C0C0C0

DBDBDB

Shades & Tints Shades & Tints

#8F898B

Dark

Light

#E677A7

Dark

Light

#FF99A8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8f898b;
  --color-2: #e677a7;
  --color-3: #ff99a8;
  --color-4: #dabb97;
  --color-5: #d3e6b8;
}

SCSS

$color-1: #8f898b;
$color-2: #e677a7;
$color-3: #ff99a8;
$color-4: #dabb97;
$color-5: #d3e6b8;

TAILWIND

colors: {
  'brand-1': '#8f898b',
  'brand-2': '#e677a7',
  'brand-3': '#ff99a8',
  'brand-4': '#dabb97',
  'brand-5': '#d3e6b8',
}

RGB Array

[143, 137, 139], [230, 119, 167], [255, 153, 168], [218, 187, 151], [211, 230, 184]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #8F898B, #E677A7, #FF99A8, #DABB97, #D3E6B8 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: #8f898b; --color-2: #e677a7; --color-3: #ff99a8; --color-4: #dabb97; --color-5: #d3e6b8. 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 warm-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