← Back to Editor

#BAB6A9 · #CCABC8 · #F1A4E7 · #F4BCD5 · #F4DFBC

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#BAB6A9

Ginger · DarkGray · Sunflower

HEX
#BAB6A9
RGB
rgb(186, 182, 169)
HSL
hsl(46, 11%, 70%)
HSB
hsb(46, 9%, 73%)
CMYK
cmyk(0%, 2%, 9%, 27%)
Oklch
oklch(77.6% 0.019 92.7)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#CCABC8

Mauve · Silver · Lilac Purple

HEX
#CCABC8
RGB
rgb(204, 171, 200)
HSL
hsl(307, 24%, 74%)
HSB
hsb(307, 16%, 80%)
CMYK
cmyk(0%, 16%, 2%, 20%)
Oklch
oklch(77.9% 0.055 330.1)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#F1A4E7

Mauve · Violet · Lilac Purple

HEX
#F1A4E7
RGB
rgb(241, 164, 231)
HSL
hsl(308, 73%, 79%)
HSB
hsb(308, 32%, 95%)
CMYK
cmyk(0%, 32%, 4%, 5%)
Oklch
oklch(81.4% 0.124 331.3)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#F4BCD5

Rouge · Pink · Cherry Blossom

HEX
#F4BCD5
RGB
rgb(244, 188, 213)
HSL
hsl(333, 72%, 85%)
HSB
hsb(333, 23%, 96%)
CMYK
cmyk(0%, 23%, 13%, 4%)
Oklch
oklch(85.3% 0.072 350.2)

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

#F4DFBC

Goose Yellow · Wheat · Peach Orange

HEX
#F4DFBC
RGB
rgb(244, 223, 188)
HSL
hsl(37, 72%, 85%)
HSB
hsb(37, 23%, 96%)
CMYK
cmyk(0%, 9%, 23%, 4%)
Oklch
oklch(91.2% 0.051 80.5)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BAB6A9
AAAEBB

Analogous

BBAFAA
BAB6A9
B6BBAA

Triadic

BAB6A9
AABBB7
B7AABB

Split-Comp.

BAB6A9
AAB6BB
AFAABB

Tetradic

BAB6A9
AABBAF
AAAEBB
BBAAB6

Contrast Matrix WCAG 2.1 Contrast

BAB6A9
CCABC8
F1A4E7
F4BCD5
F4DFBC
—
1.0
Fail
1.1
Fail
1.3
Fail
1.6
Fail
1.0
Fail
—
1.1
Fail
1.3
Fail
1.6
Fail
1.1
Fail
1.1
Fail
—
1.2
Fail
1.4
Fail
1.3
Fail
1.3
Fail
1.2
Fail
—
1.2
Fail
1.6
Fail
1.6
Fail
1.4
Fail
1.2
Fail
—
White BG
2.0Fail
2.1Fail
1.9Fail
1.6Fail
1.3Fail
Black BG
10.4AAA
10.2AAA
11.2AAA
13.0AAA
16.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B8B8AC
BEBDC1
D0CFD7
DCDBCF
EBEBC4

Deuteranopia

B9B9AD
C0C2BF
D4DAD3
DFE3CE
ECEEC7

Tritanopia

BAAFAF
CABBBA
EDCAC7
F1CAC9
F3CBCD

Achromatopsia

B6B6B6
B8B8B8
C3C3C3
D0D0D0
E1E1E1

Shades & Tints Shades & Tints

#BAB6A9

Dark
Light

#CCABC8

Dark
Light

#F1A4E7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bab6a9;
  --color-2: #ccabc8;
  --color-3: #f1a4e7;
  --color-4: #f4bcd5;
  --color-5: #f4dfbc;
}

SCSS

$color-1: #bab6a9;
$color-2: #ccabc8;
$color-3: #f1a4e7;
$color-4: #f4bcd5;
$color-5: #f4dfbc;

TAILWIND

colors: {
  'brand-1': '#bab6a9',
  'brand-2': '#ccabc8',
  'brand-3': '#f1a4e7',
  'brand-4': '#f4bcd5',
  'brand-5': '#f4dfbc',
}

RGB Array

[186, 182, 169], [204, 171, 200], [241, 164, 231], [244, 188, 213], [244, 223, 188]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BAB6A9, #CCABC8, #F1A4E7, #F4BCD5, #F4DFBC 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: #bab6a9; --color-2: #ccabc8; --color-3: #f1a4e7; --color-4: #f4bcd5; --color-5: #f4dfbc. 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