← Back to Editor

#BDC7AF · #CBC370 · #D9A85C · #CA936C · #A48B91

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

#BDC7AF

Willow Green · Silver · Apple Green

HEX
#BDC7AF
RGB
rgb(189, 199, 175)
HSL
hsl(85, 18%, 73%)
HSB
hsb(85, 12%, 78%)
CMYK
cmyk(5%, 0%, 12%, 22%)
Oklch
oklch(81.5% 0.035 125.6)

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

#CBC370

Fresh Green · BurlyWood · Sunflower

HEX
#CBC370
RGB
rgb(203, 195, 112)
HSL
hsl(55, 47%, 62%)
HSB
hsb(55, 45%, 80%)
CMYK
cmyk(0%, 4%, 45%, 20%)
Oklch
oklch(80.6% 0.105 103.6)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#D9A85C

Ginger · SandyBrown · Warm Sun

HEX
#D9A85C
RGB
rgb(217, 168, 92)
HSL
hsl(36, 62%, 61%)
HSB
hsb(36, 58%, 85%)
CMYK
cmyk(0%, 23%, 58%, 15%)
Oklch
oklch(76.1% 0.110 76.8)

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

#CA936C

Apricot · DarkSalmon · Warm Sun

HEX
#CA936C
RGB
rgb(202, 147, 108)
HSL
hsl(25, 47%, 61%)
HSB
hsb(25, 47%, 79%)
CMYK
cmyk(0%, 27%, 47%, 21%)
Oklch
oklch(70.7% 0.085 56.2)

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

#A48B91

Crimson · DarkGray · Passion Red

HEX
#A48B91
RGB
rgb(164, 139, 145)
HSL
hsl(346, 12%, 59%)
HSB
hsb(346, 15%, 64%)
CMYK
cmyk(0%, 15%, 12%, 36%)
Oklch
oklch(66.1% 0.031 1.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BDC7AF
B8AEC7

Analogous

C7C4AE
BDC7AF
B0C7AE

Triadic

BDC7AF
AEBCC7
C7AEBC

Split-Comp.

BDC7AF
AEB0C7
C4AEC7

Tetradic

BDC7AF
AEC7C4
B8AEC7
C7AEB0

Contrast Matrix WCAG 2.1 Contrast

BDC7AF
CBC370
D9A85C
CA936C
A48B91
—
1.0
Fail
1.2
Fail
1.5
Fail
1.8
Fail
1.0
Fail
—
1.2
Fail
1.5
Fail
1.7
Fail
1.2
Fail
1.2
Fail
—
1.2
Fail
1.5
Fail
1.5
Fail
1.5
Fail
1.2
Fail
—
1.2
Fail
1.8
Fail
1.7
Fail
1.5
Fail
1.2
Fail
—
White BG
1.8Fail
1.8Fail
2.2Fail
2.7Fail
3.1AA Large
Black BG
12.0AAA
11.6AAA
9.7AAA
7.9AAA
6.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C1C1B5
C8C784
C4C36E
B2B275
999990

Deuteranopia

C1C0B6
C8C989
C7CA73
B5B978
9B9D8F

Tritanopia

BDB9BA
CB9497
D77D80
C77D7F
A38E8E

Achromatopsia

C1C1C1
BCBCBC
AEAEAE
9F9F9F
939393

Shades & Tints Shades & Tints

#BDC7AF

Dark
Light

#CBC370

Dark
Light

#D9A85C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bdc7af;
  --color-2: #cbc370;
  --color-3: #d9a85c;
  --color-4: #ca936c;
  --color-5: #a48b91;
}

SCSS

$color-1: #bdc7af;
$color-2: #cbc370;
$color-3: #d9a85c;
$color-4: #ca936c;
$color-5: #a48b91;

TAILWIND

colors: {
  'brand-1': '#bdc7af',
  'brand-2': '#cbc370',
  'brand-3': '#d9a85c',
  'brand-4': '#ca936c',
  'brand-5': '#a48b91',
}

RGB Array

[189, 199, 175], [203, 195, 112], [217, 168, 92], [202, 147, 108], [164, 139, 145]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BDC7AF, #CBC370, #D9A85C, #CA936C, #A48B91 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: #bdc7af; --color-2: #cbc370; --color-3: #d9a85c; --color-4: #ca936c; --color-5: #a48b91. 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