#BAB3A8 + #C4ADB9 + #DEADC6 + #F7C8C3 + #EBD7CC - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#BAB3A8

Ginger · DarkGray · Warm Sun

HEX

#BAB3A8

RGB

rgb(186, 179, 168)

HSL

hsl(37, 12%, 69%)

HSB

hsb(37, 10%, 73%)

CMYK

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

Oklch

oklch(76.9% 0.017 79.3)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#C4ADB9

Mauve · Silver · Rose Pink

HEX

#C4ADB9

RGB

rgb(196, 173, 185)

HSL

hsl(329, 16%, 72%)

HSB

hsb(329, 12%, 77%)

CMYK

cmyk(0%, 12%, 6%, 23%)

Oklch

oklch(77.1% 0.031 345.0)

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

#DEADC6

Mauve · LightPink · Cherry Blossom

HEX

#DEADC6

RGB

rgb(222, 173, 198)

HSL

hsl(329, 43%, 77%)

HSB

hsb(329, 22%, 87%)

CMYK

cmyk(0%, 22%, 11%, 13%)

Oklch

oklch(79.9% 0.066 346.6)

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

#F7C8C3

Peach Pink · Pink · Cherry Blossom

HEX

#F7C8C3

RGB

rgb(247, 200, 195)

HSL

hsl(6, 76%, 87%)

HSB

hsb(6, 21%, 97%)

CMYK

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

Oklch

oklch(87.2% 0.054 25.3)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#EBD7CC

Apricot · Bisque · Peach Orange

HEX

#EBD7CC

RGB

rgb(235, 215, 204)

HSL

hsl(21, 44%, 86%)

HSB

hsb(21, 13%, 92%)

CMYK

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

Oklch

oklch(89.2% 0.027 50.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BAB3A8

A6AEB9

Analogous

B9A9A6

BAB3A8

B7B9A6

Triadic

BAB3A8

A6B9B2

B2A6B9

Split-Comp.

BAB3A8

A6B7B9

A9A6B9

Tetradic

BAB3A8

A6B9A9

A6AEB9

B9A6B7

Contrast Matrix WCAG 2.1 Contrast

BAB3A8	C4ADB9	DEADC6	F7C8C3	EBD7CC
—	1.0 Fail	1.1 Fail	1.4 Fail	1.5 Fail
1.0 Fail	—	1.1 Fail	1.4 Fail	1.5 Fail
1.1 Fail	1.1 Fail	—	1.3 Fail	1.4 Fail
1.4 Fail	1.4 Fail	1.3 Fail	—	1.1 Fail
1.5 Fail	1.5 Fail	1.4 Fail	1.1 Fail	—

White BG

2.1Fail

1.9Fail

1.5Fail

1.4Fail

Black BG

10.1AAA

10.0AAA

10.9AAA

14.0AAA

15.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B7B7AB

BABAB6

C9C8C0

E3E2C4

E2E2CF

Deuteranopia

B7B8AB

BBBDB5

CCCFBF

E5E9C5

E4E5CF

Tritanopia

BAADAD

C3B4B3

DCBBBA

F5C5C5

EAD1D1

Achromatopsia

B4B4B4

B5B5B5

BFBFBF

D5D5D5

DCDCDC

Shades & Tints Shades & Tints

#BAB3A8

Dark

Light

#C4ADB9

Dark

Light

#DEADC6

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bab3a8;
  --color-2: #c4adb9;
  --color-3: #deadc6;
  --color-4: #f7c8c3;
  --color-5: #ebd7cc;
}

SCSS

$color-1: #bab3a8;
$color-2: #c4adb9;
$color-3: #deadc6;
$color-4: #f7c8c3;
$color-5: #ebd7cc;

TAILWIND

colors: {
  'brand-1': '#bab3a8',
  'brand-2': '#c4adb9',
  'brand-3': '#deadc6',
  'brand-4': '#f7c8c3',
  'brand-5': '#ebd7cc',
}

RGB Array

[186, 179, 168], [196, 173, 185], [222, 173, 198], [247, 200, 195], [235, 215, 204]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BAB3A8, #C4ADB9, #DEADC6, #F7C8C3, #EBD7CC 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: #bab3a8; --color-2: #c4adb9; --color-3: #deadc6; --color-4: #f7c8c3; --color-5: #ebd7cc. 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