← Back to Editor

#D1CB90 · #BAB481 · #607861 · #877D55 · #BCA021

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

#D1CB90

Fresh Green · Tan · Sunflower

HEX
#D1CB90
RGB
rgb(209, 203, 144)
HSL
hsl(54, 41%, 69%)
HSB
hsb(54, 31%, 82%)
CMYK
cmyk(0%, 3%, 31%, 18%)
Oklch
oklch(83.3% 0.077 103.0)

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

#BAB481

Fresh Green · Tan · Sunflower

HEX
#BAB481
RGB
rgb(186, 180, 129)
HSL
hsl(54, 29%, 62%)
HSB
hsb(54, 31%, 73%)
CMYK
cmyk(0%, 3%, 31%, 27%)
Oklch
oklch(76.2% 0.069 102.2)

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

#607861

Celadon · DimGray · Olive Green

HEX
#607861
RGB
rgb(96, 120, 97)
HSL
hsl(122, 11%, 42%)
HSB
hsb(122, 20%, 47%)
CMYK
cmyk(20%, 0%, 19%, 53%)
Oklch
oklch(54.7% 0.045 146.0)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#877D55

Ochre · DimGray · Honey Gold

HEX
#877D55
RGB
rgb(135, 125, 85)
HSL
hsl(48, 23%, 43%)
HSB
hsb(48, 37%, 53%)
CMYK
cmyk(0%, 7%, 37%, 47%)
Oklch
oklch(58.9% 0.058 95.8)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#BCA021

Ochre · GoldenRod · Honey Gold

HEX
#BCA021
RGB
rgb(188, 160, 33)
HSL
hsl(49, 70%, 43%)
HSB
hsb(49, 82%, 74%)
CMYK
cmyk(0%, 15%, 82%, 26%)
Oklch
oklch(71.0% 0.137 95.5)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D1CB90
9096D0

Analogous

D0A990
D1CB90
B6D090

Triadic

D1CB90
90D0CA
CA90D0

Split-Comp.

D1CB90
90B6D0
A990D0

Tetradic

D1CB90
90D0A9
9096D0
D090B6

Contrast Matrix WCAG 2.1 Contrast

D1CB90
BAB481
607861
877D55
BCA021
—
1.3
Fail
2.9
Fail
2.5
Fail
1.5
Fail
1.3
Fail
—
2.3
Fail
1.9
Fail
1.2
Fail
2.9
Fail
2.3
Fail
—
1.2
Fail
1.9
Fail
2.5
Fail
1.9
Fail
1.2
Fail
—
1.6
Fail
1.5
Fail
1.2
Fail
1.9
Fail
1.6
Fail
—
White BG
1.7Fail
2.1Fail
4.8AA
4.1AA Large
2.6Fail
Black BG
12.7AAA
9.9AAA
4.4AA Large
5.1AA
8.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CECE9E
B7B78D
6A6B67
83835F
B0B040

Deuteranopia

CFCFA2
B8B890
696768
838461
B2B447

Tritanopia

D1AAAC
BA9799
616B6C
876668
BB585D

Achromatopsia

C6C6C6
B0B0B0
6E6E6E
7B7B7B
9A9A9A

Shades & Tints Shades & Tints

#D1CB90

Dark
Light

#BAB481

Dark
Light

#607861

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d1cb90;
  --color-2: #bab481;
  --color-3: #607861;
  --color-4: #877d55;
  --color-5: #bca021;
}

SCSS

$color-1: #d1cb90;
$color-2: #bab481;
$color-3: #607861;
$color-4: #877d55;
$color-5: #bca021;

TAILWIND

colors: {
  'brand-1': '#d1cb90',
  'brand-2': '#bab481',
  'brand-3': '#607861',
  'brand-4': '#877d55',
  'brand-5': '#bca021',
}

RGB Array

[209, 203, 144], [186, 180, 129], [96, 120, 97], [135, 125, 85], [188, 160, 33]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D1CB90, #BAB481, #607861, #877D55, #BCA021 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: #d1cb90; --color-2: #bab481; --color-3: #607861; --color-4: #877d55; --color-5: #bca021. 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