#4DB1BC + #9D9584 + #CBAFAB + #DFC4D7 + #F8E5D9 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#4DB1BC

Slate Blue · MediumTurquoise · Lake Green

HEX

#4DB1BC

RGB

rgb(77, 177, 188)

HSL

hsl(186, 45%, 52%)

HSB

hsb(186, 59%, 74%)

CMYK

cmyk(59%, 6%, 0%, 26%)

Oklch

oklch(70.6% 0.094 205.2)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#9D9584

Ginger · Gray · Sunflower

HEX

#9D9584

RGB

rgb(157, 149, 132)

HSL

hsl(41, 11%, 57%)

HSB

hsb(41, 16%, 62%)

CMYK

cmyk(0%, 5%, 16%, 38%)

Oklch

oklch(67.2% 0.026 85.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#CBAFAB

Peach Pink · Silver · Coral Red

HEX

#CBAFAB

RGB

rgb(203, 175, 171)

HSL

hsl(8, 24%, 73%)

HSB

hsb(8, 16%, 80%)

CMYK

cmyk(0%, 14%, 16%, 20%)

Oklch

oklch(77.7% 0.033 27.5)

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

#DFC4D7

Mauve · LightGray · Lavender

HEX

#DFC4D7

RGB

rgb(223, 196, 215)

HSL

hsl(318, 30%, 82%)

HSB

hsb(318, 12%, 87%)

CMYK

cmyk(0%, 12%, 4%, 13%)

Oklch

oklch(84.9% 0.040 336.6)

Traditional「Mauve」· Paint「Lavender」· Creative Rose Petal

#F8E5D9

Apricot · Beige · Peach Orange

HEX

#F8E5D9

RGB

rgb(248, 229, 217)

HSL

hsl(23, 69%, 91%)

HSB

hsb(23, 13%, 97%)

CMYK

cmyk(0%, 8%, 13%, 3%)

Oklch

oklch(93.4% 0.026 54.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4DB1BC

BC594E

Analogous

4EBC90

4DB1BC

4E7ABC

Triadic

4DB1BC

BC4EB1

B1BC4E

Split-Comp.

4DB1BC

BC4E7A

BC904E

Tetradic

4DB1BC

904EBC

BC594E

7ABC4E

Contrast Matrix WCAG 2.1 Contrast

4DB1BC	9D9584	CBAFAB	DFC4D7	F8E5D9
—	1.2 Fail	1.2 Fail	1.6 Fail	2.1 Fail
1.2 Fail	—	1.5 Fail	1.8 Fail	2.4 Fail
1.2 Fail	1.5 Fail	—	1.3 Fail	1.7 Fail
1.6 Fail	1.8 Fail	1.3 Fail	—	1.3 Fail
2.1 Fail	2.4 Fail	1.7 Fail	1.3 Fail	—

White BG

2.5Fail

3.0Fail

2.0Fail

1.6Fail

1.2Fail

Black BG

8.3AAA

7.1AAA

10.3AAA

13.0AAA

17.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7879B9

9A9988

BFBFAC

D3D3D2

F0F0DC

Deuteranopia

736BB9

9A9B89

C1C3AC

D5D7D1

F1F2DD

Tritanopia

52B7B7

9D8B8C

CAADAD

DECFCE

F7DEDF

Achromatopsia

949494

959595

B7B7B7

CECECE

E9E9E9

Shades & Tints Shades & Tints

#4DB1BC

Dark

Light

#9D9584

Dark

Light

#CBAFAB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4db1bc;
  --color-2: #9d9584;
  --color-3: #cbafab;
  --color-4: #dfc4d7;
  --color-5: #f8e5d9;
}

SCSS

$color-1: #4db1bc;
$color-2: #9d9584;
$color-3: #cbafab;
$color-4: #dfc4d7;
$color-5: #f8e5d9;

TAILWIND

colors: {
  'brand-1': '#4db1bc',
  'brand-2': '#9d9584',
  'brand-3': '#cbafab',
  'brand-4': '#dfc4d7',
  'brand-5': '#f8e5d9',
}

RGB Array

[77, 177, 188], [157, 149, 132], [203, 175, 171], [223, 196, 215], [248, 229, 217]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4DB1BC, #9D9584, #CBAFAB, #DFC4D7, #F8E5D9 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: #4db1bc; --color-2: #9d9584; --color-3: #cbafab; --color-4: #dfc4d7; --color-5: #f8e5d9. 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