← Back to Editor

#BFD8AD · #C5BB93 · #CB9D78 · #D17F5E · #D66143

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#BFD8AD

Celadon · Silver · Apple Green

HEX
#BFD8AD
RGB
rgb(191, 216, 173)
HSL
hsl(95, 36%, 76%)
HSB
hsb(95, 20%, 85%)
CMYK
cmyk(12%, 0%, 20%, 15%)
Oklch
oklch(85.2% 0.064 132.3)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#C5BB93

Ginger · Tan · Sunflower

HEX
#C5BB93
RGB
rgb(197, 187, 147)
HSL
hsl(48, 30%, 67%)
HSB
hsb(48, 25%, 77%)
CMYK
cmyk(0%, 5%, 25%, 23%)
Oklch
oklch(79.0% 0.055 95.7)

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

#CB9D78

Apricot · DarkSalmon · Warm Sun

HEX
#CB9D78
RGB
rgb(203, 157, 120)
HSL
hsl(27, 44%, 63%)
HSB
hsb(27, 41%, 80%)
CMYK
cmyk(0%, 23%, 41%, 20%)
Oklch
oklch(73.0% 0.075 60.1)

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

#D17F5E

Tangerine · DarkSalmon · Warm Sun

HEX
#D17F5E
RGB
rgb(209, 127, 94)
HSL
hsl(17, 56%, 59%)
HSB
hsb(17, 55%, 82%)
CMYK
cmyk(0%, 39%, 55%, 18%)
Oklch
oklch(67.7% 0.112 42.5)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#D66143

Vermilion · Chocolate · Passion Red

HEX
#D66143
RGB
rgb(214, 97, 67)
HSL
hsl(12, 64%, 55%)
HSB
hsb(12, 69%, 84%)
CMYK
cmyk(0%, 55%, 69%, 16%)
Oklch
oklch(63.2% 0.154 35.5)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BFD8AD
C5ACD8

Analogous

D4D8AC
BFD8AD
ACD8AF

Triadic

BFD8AD
ACBED8
D8ACBE

Split-Comp.

BFD8AD
AFACD8
D8ACD4

Tetradic

BFD8AD
ACD4D8
C5ACD8
D8AFAC

Contrast Matrix WCAG 2.1 Contrast

BFD8AD
C5BB93
CB9D78
D17F5E
D66143
—
1.3
Fail
1.6
Fail
2.0
Fail
2.4
Fail
1.3
Fail
—
1.3
Fail
1.6
Fail
1.9
Fail
1.6
Fail
1.3
Fail
—
1.2
Fail
1.5
Fail
2.0
Fail
1.6
Fail
1.2
Fail
—
1.2
Fail
2.4
Fail
1.9
Fail
1.5
Fail
1.2
Fail
—
White BG
1.5Fail
1.9Fail
2.4Fail
3.0AA Large
3.7AA Large
Black BG
13.6AAA
10.9AAA
8.6AAA
6.9AA
5.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CACAB7
C1C19D
B7B781
ADAD66
A3A24A

Deuteranopia

C8C7BA
C1C29F
BABD83
B2B868
AAB34C

Tritanopia

C0C0C1
C4A4A6
C9888A
CD6C6E
D05051

Achromatopsia

CCCCCC
B9B9B9
A7A7A7
949494
818181

Shades & Tints Shades & Tints

#BFD8AD

Dark
Light

#C5BB93

Dark
Light

#CB9D78

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bfd8ad;
  --color-2: #c5bb93;
  --color-3: #cb9d78;
  --color-4: #d17f5e;
  --color-5: #d66143;
}

SCSS

$color-1: #bfd8ad;
$color-2: #c5bb93;
$color-3: #cb9d78;
$color-4: #d17f5e;
$color-5: #d66143;

TAILWIND

colors: {
  'brand-1': '#bfd8ad',
  'brand-2': '#c5bb93',
  'brand-3': '#cb9d78',
  'brand-4': '#d17f5e',
  'brand-5': '#d66143',
}

RGB Array

[191, 216, 173], [197, 187, 147], [203, 157, 120], [209, 127, 94], [214, 97, 67]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BFD8AD, #C5BB93, #CB9D78, #D17F5E, #D66143 is ideal for: corporate websites, product showcases, portfolios. 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: #bfd8ad; --color-2: #c5bb93; --color-3: #cb9d78; --color-4: #d17f5e; --color-5: #d66143. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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