#8DD9B5 + #FFECB3 + #D1B8BF + #96878B + #ED7496 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8DD9B5

Jade · MediumAquaMarine · Apple Green

HEX

#8DD9B5

RGB

rgb(141, 217, 181)

HSL

hsl(152, 50%, 70%)

HSB

hsb(152, 35%, 85%)

CMYK

cmyk(35%, 0%, 17%, 15%)

Oklch

oklch(82.6% 0.092 163.0)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#FFECB3

Goose Yellow · Wheat · Lemon Cream

HEX

#FFECB3

RGB

rgb(255, 236, 179)

HSL

hsl(45, 100%, 85%)

HSB

hsb(45, 30%, 100%)

CMYK

cmyk(0%, 7%, 30%, 0%)

Oklch

oklch(94.5% 0.076 91.8)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#D1B8BF

Rouge · Silver · Cherry Blossom

HEX

#D1B8BF

RGB

rgb(209, 184, 191)

HSL

hsl(343, 21%, 77%)

HSB

hsb(343, 12%, 82%)

CMYK

cmyk(0%, 12%, 9%, 18%)

Oklch

oklch(80.6% 0.030 359.0)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#96878B

Ash · Gray · Silver Sand

HEX

#96878B

RGB

rgb(150, 135, 139)

HSL

hsl(344, 7%, 56%)

HSB

hsb(344, 10%, 59%)

CMYK

cmyk(0%, 10%, 7%, 41%)

Oklch

oklch(63.8% 0.019 359.6)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#ED7496

Rouge · LightCoral · Rose Pink

HEX

#ED7496

RGB

rgb(237, 116, 150)

HSL

hsl(343, 77%, 69%)

HSB

hsb(343, 51%, 93%)

CMYK

cmyk(0%, 51%, 37%, 7%)

Oklch

oklch(70.9% 0.152 4.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8DD9B5

D98CB0

Analogous

8CD98F

8DD9B5

8CD6D9

Triadic

8DD9B5

B58CD9

D9B58C

Split-Comp.

8DD9B5

D98CD6

D98F8C

Tetradic

8DD9B5

8F8CD9

D98CB0

D6D98C

Contrast Matrix WCAG 2.1 Contrast

8DD9B5	FFECB3	D1B8BF	96878B	ED7496
—	1.4 Fail	1.1 Fail	2.1 Fail	1.7 Fail
1.4 Fail	—	1.6 Fail	2.9 Fail	2.4 Fail
1.1 Fail	1.6 Fail	—	1.8 Fail	1.5 Fail
2.1 Fail	2.9 Fail	1.8 Fail	—	1.2 Fail
1.7 Fail	2.4 Fail	1.5 Fail	1.2 Fail	—

White BG

1.7Fail

1.2Fail

1.9Fail

3.4AA Large

2.8Fail

Black BG

12.7AAA

17.9AAA

11.3AAA

6.1AA

7.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AEAFBE

F7F7C1

C6C6BD

908F8A

B9B88E

Deuteranopia

AAA4C0

F8F9C4

C8C9BD

90928A

C0C98C

Tritanopia

91C5C6

FECCCE

D0BCBC

958989

E78786

Achromatopsia

BEBEBE

EBEBEB

C0C0C0

8C8C8C

9C9C9C

Shades & Tints Shades & Tints

#8DD9B5

Dark

Light

#FFECB3

Dark

Light

#D1B8BF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8dd9b5;
  --color-2: #ffecb3;
  --color-3: #d1b8bf;
  --color-4: #96878b;
  --color-5: #ed7496;
}

SCSS

$color-1: #8dd9b5;
$color-2: #ffecb3;
$color-3: #d1b8bf;
$color-4: #96878b;
$color-5: #ed7496;

TAILWIND

colors: {
  'brand-1': '#8dd9b5',
  'brand-2': '#ffecb3',
  'brand-3': '#d1b8bf',
  'brand-4': '#96878b',
  'brand-5': '#ed7496',
}

RGB Array

[141, 217, 181], [255, 236, 179], [209, 184, 191], [150, 135, 139], [237, 116, 150]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8DD9B5, #FFECB3, #D1B8BF, #96878B, #ED7496 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: #8dd9b5; --color-2: #ffecb3; --color-3: #d1b8bf; --color-4: #96878b; --color-5: #ed7496. 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