← Back to Editor

#CDD0B1 · #BFBF82 · #786A3F · #868E67 · #FFA719

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

#CDD0B1

Fresh Green · Silver · Sunflower

HEX
#CDD0B1
RGB
rgb(205, 208, 177)
HSL
hsl(66, 25%, 75%)
HSB
hsb(66, 15%, 82%)
CMYK
cmyk(1%, 0%, 15%, 18%)
Oklch
oklch(84.7% 0.042 111.8)

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

#BFBF82

Fresh Green · Tan · Sunflower

HEX
#BFBF82
RGB
rgb(191, 191, 130)
HSL
hsl(60, 32%, 63%)
HSB
hsb(60, 32%, 75%)
CMYK
cmyk(0%, 0%, 32%, 25%)
Oklch
oklch(79.0% 0.081 108.1)

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

#786A3F

Ochre · DarkOliveGreen · Honey Gold

HEX
#786A3F
RGB
rgb(120, 106, 63)
HSL
hsl(45, 31%, 36%)
HSB
hsb(45, 48%, 47%)
CMYK
cmyk(0%, 12%, 48%, 53%)
Oklch
oklch(52.7% 0.063 92.0)

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

#868E67

Grass Green · Gray · Olive Green

HEX
#868E67
RGB
rgb(134, 142, 103)
HSL
hsl(72, 16%, 48%)
HSB
hsb(72, 27%, 56%)
CMYK
cmyk(6%, 0%, 27%, 44%)
Oklch
oklch(63.0% 0.056 117.5)

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

#FFA719

Ginger · Orange · Warm Sun

HEX
#FFA719
RGB
rgb(255, 167, 25)
HSL
hsl(37, 100%, 55%)
HSB
hsb(37, 90%, 100%)
CMYK
cmyk(0%, 35%, 90%, 0%)
Oklch
oklch(79.7% 0.167 70.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CDD0B1
B3AFCF

Analogous

CFC2AF
CDD0B1
BCCFAF

Triadic

CDD0B1
AFCCCF
CFAFCC

Split-Comp.

CDD0B1
AFBCCF
C2AFCF

Tetradic

CDD0B1
AFCFC2
B3AFCF
CFAFBC

Contrast Matrix WCAG 2.1 Contrast

CDD0B1
BFBF82
786A3F
868E67
FFA719
—
1.2
Fail
3.4
AA Large
2.2
Fail
1.2
Fail
1.2
Fail
—
2.8
Fail
1.8
Fail
1.0
Fail
3.4
AA Large
2.8
Fail
—
1.5
Fail
2.7
Fail
2.2
Fail
1.8
Fail
1.5
Fail
—
1.8
Fail
1.2
Fail
1.0
Fail
2.7
Fail
1.8
Fail
—
White BG
1.6Fail
1.9Fail
5.3AA
3.5AA Large
1.9Fail
Black BG
13.3AAA
11.0AAA
3.9AA Large
6.1AA
10.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CECEB9
BFBF91
727249
898A70
D9D83B

Deuteranopia

CECEBA
BFBF94
73744C
898873
DEE544

Tritanopia

CDBEC0
BF9C9F
775253
86787A
FB565C

Achromatopsia

CCCCCC
B8B8B8
696969
878787
B1B1B1

Shades & Tints Shades & Tints

#CDD0B1

Dark
Light

#BFBF82

Dark
Light

#786A3F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cdd0b1;
  --color-2: #bfbf82;
  --color-3: #786a3f;
  --color-4: #868e67;
  --color-5: #ffa719;
}

SCSS

$color-1: #cdd0b1;
$color-2: #bfbf82;
$color-3: #786a3f;
$color-4: #868e67;
$color-5: #ffa719;

TAILWIND

colors: {
  'brand-1': '#cdd0b1',
  'brand-2': '#bfbf82',
  'brand-3': '#786a3f',
  'brand-4': '#868e67',
  'brand-5': '#ffa719',
}

RGB Array

[205, 208, 177], [191, 191, 130], [120, 106, 63], [134, 142, 103], [255, 167, 25]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CDD0B1, #BFBF82, #786A3F, #868E67, #FFA719 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: #cdd0b1; --color-2: #bfbf82; --color-3: #786a3f; --color-4: #868e67; --color-5: #ffa719. 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