← Back to Editor

#BFB5A9 · #C4A890 · #C99D80 · #D87B5A · #DDC1A9

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

#BFB5A9

Goose Yellow · DarkGray · Warm Sun

HEX
#BFB5A9
RGB
rgb(191, 181, 169)
HSL
hsl(33, 15%, 71%)
HSB
hsb(33, 12%, 75%)
CMYK
cmyk(0%, 5%, 12%, 25%)
Oklch
oklch(77.8% 0.020 72.5)

TraditionalGoose Yellow」· PaintWarm Sun」· Creative Honey Glow

#C4A890

Apricot · Tan · Warm Sun

HEX
#C4A890
RGB
rgb(196, 168, 144)
HSL
hsl(28, 31%, 67%)
HSB
hsb(28, 27%, 77%)
CMYK
cmyk(0%, 14%, 27%, 23%)
Oklch
oklch(75.0% 0.047 62.6)

TraditionalApricot」· PaintWarm Sun」· Creative Honey Glow

#C99D80

Apricot · Tan · Warm Sun

HEX
#C99D80
RGB
rgb(201, 157, 128)
HSL
hsl(24, 40%, 65%)
HSB
hsb(24, 36%, 79%)
CMYK
cmyk(0%, 22%, 36%, 21%)
Oklch
oklch(73.0% 0.066 54.8)

TraditionalApricot」· PaintWarm Sun」· Creative Honey Glow

#D87B5A

Tangerine · Coral · Warm Sun

HEX
#D87B5A
RGB
rgb(216, 123, 90)
HSL
hsl(16, 62%, 60%)
HSB
hsb(16, 58%, 85%)
CMYK
cmyk(0%, 43%, 58%, 15%)
Oklch
oklch(67.8% 0.125 40.1)

TraditionalTangerine」· PaintWarm Sun」· Creative Blush Sunrise

#DDC1A9

Apricot · Tan · Peach Orange

HEX
#DDC1A9
RGB
rgb(221, 193, 169)
HSL
hsl(28, 43%, 76%)
HSB
hsb(28, 24%, 87%)
CMYK
cmyk(0%, 13%, 24%, 13%)
Oklch
oklch(82.8% 0.046 62.7)

TraditionalApricot」· PaintPeach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BFB5A9
AAB4C0

Analogous

C0ABAA
BFB5A9
BFC0AA

Triadic

BFB5A9
AAC0B6
B6AAC0

Split-Comp.

BFB5A9
AABFC0
ABAAC0

Tetradic

BFB5A9
AAC0AB
AAB4C0
C0AABF

Contrast Matrix WCAG 2.1 Contrast

BFB5A9
C4A890
C99D80
D87B5A
DDC1A9
1.1
Fail
1.2
Fail
1.5
Fail
1.2
Fail
1.1
Fail
1.1
Fail
1.4
Fail
1.3
Fail
1.2
Fail
1.1
Fail
1.2
Fail
1.4
Fail
1.5
Fail
1.4
Fail
1.2
Fail
1.8
Fail
1.2
Fail
1.3
Fail
1.4
Fail
1.8
Fail
White BG
2.0Fail
2.2Fail
2.4Fail
3.0AA Large
1.7Fail
Black BG
10.4AAA
9.4AAA
8.6AAA
6.9AA
12.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BBBBAC
B8B896
B6B687
B0AF62
D1D1AF

Deuteranopia

BBBCAD
BABC97
B9BC89
B5BC64
D3D5B0

Tritanopia

BFAEAF
C39A9B
C78D8E
D3686A
DCB3B4

Achromatopsia

B7B7B7
AEAEAE
A7A7A7
939393
C7C7C7

Shades & Tints Shades & Tints

#BFB5A9

Dark
Light

#C4A890

Dark
Light

#C99D80

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bfb5a9;
  --color-2: #c4a890;
  --color-3: #c99d80;
  --color-4: #d87b5a;
  --color-5: #ddc1a9;
}

SCSS

$color-1: #bfb5a9;
$color-2: #c4a890;
$color-3: #c99d80;
$color-4: #d87b5a;
$color-5: #ddc1a9;

TAILWIND

colors: {
  'brand-1': '#bfb5a9',
  'brand-2': '#c4a890',
  'brand-3': '#c99d80',
  'brand-4': '#d87b5a',
  'brand-5': '#ddc1a9',
}

RGB Array

[191, 181, 169], [196, 168, 144], [201, 157, 128], [216, 123, 90], [221, 193, 169]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BFB5A9, #C4A890, #C99D80, #D87B5A, #DDC1A9 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: #bfb5a9; --color-2: #c4a890; --color-3: #c99d80; --color-4: #d87b5a; --color-5: #ddc1a9. 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