← Back to Editor

#669966 · #858F5C · #D69F67 · #D6CB67 · #DBD8CC

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

#669966

Celadon · Gray · Olive Green

HEX
#669966
RGB
rgb(102, 153, 102)
HSL
hsl(120, 20%, 50%)
HSB
hsb(120, 33%, 60%)
CMYK
cmyk(33%, 0%, 33%, 40%)
Oklch
oklch(63.3% 0.093 144.4)

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

#858F5C

Grass Green · Gray · Olive Green

HEX
#858F5C
RGB
rgb(133, 143, 92)
HSL
hsl(72, 22%, 46%)
HSB
hsb(72, 36%, 56%)
CMYK
cmyk(7%, 0%, 36%, 44%)
Oklch
oklch(62.9% 0.072 117.6)

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

#D69F67

Ginger · DarkSalmon · Warm Sun

HEX
#D69F67
RGB
rgb(214, 159, 103)
HSL
hsl(30, 58%, 62%)
HSB
hsb(30, 52%, 84%)
CMYK
cmyk(0%, 26%, 52%, 16%)
Oklch
oklch(74.2% 0.098 65.9)

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

#D6CB67

Fresh Green · BurlyWood · Sunflower

HEX
#D6CB67
RGB
rgb(214, 203, 103)
HSL
hsl(54, 58%, 62%)
HSB
hsb(54, 52%, 84%)
CMYK
cmyk(0%, 5%, 52%, 16%)
Oklch
oklch(83.1% 0.123 103.0)

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

#DBD8CC

Goose Yellow · LightGray · Lemon Cream

HEX
#DBD8CC
RGB
rgb(219, 216, 204)
HSL
hsl(48, 17%, 83%)
HSB
hsb(48, 7%, 86%)
CMYK
cmyk(0%, 1%, 7%, 14%)
Oklch
oklch(88.1% 0.017 95.2)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

669966
996699

Analogous

809966
669966
669980

Triadic

669966
666699
996666

Split-Comp.

669966
806699
996680

Tetradic

669966
668099
996699
998066

Contrast Matrix WCAG 2.1 Contrast

669966
858F5C
D69F67
D6CB67
DBD8CC
—
1.0
Fail
1.4
Fail
2.0
Fail
2.3
Fail
1.0
Fail
—
1.5
Fail
2.1
Fail
2.4
Fail
1.4
Fail
1.5
Fail
—
1.4
Fail
1.6
Fail
2.0
Fail
2.1
Fail
1.4
Fail
—
1.2
Fail
2.3
Fail
2.4
Fail
1.6
Fail
1.2
Fail
—
White BG
3.3AA Large
3.5AA Large
2.3Fail
1.7Fail
1.4Fail
Black BG
6.3AA
6.1AA
9.0AAA
12.6AAA
14.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7C7D72
898968
BEBE75
D1D17F
DADACF

Deuteranopia

797575
89886B
C1C578
D2D385
DADAD0

Tritanopia

697C7E
867274
D37F82
D59297
DBD1D2

Achromatopsia

848484
868686
A9A9A9
C3C3C3
D8D8D8

Shades & Tints Shades & Tints

#669966

Dark
Light

#858F5C

Dark
Light

#D69F67

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #669966;
  --color-2: #858f5c;
  --color-3: #d69f67;
  --color-4: #d6cb67;
  --color-5: #dbd8cc;
}

SCSS

$color-1: #669966;
$color-2: #858f5c;
$color-3: #d69f67;
$color-4: #d6cb67;
$color-5: #dbd8cc;

TAILWIND

colors: {
  'brand-1': '#669966',
  'brand-2': '#858f5c',
  'brand-3': '#d69f67',
  'brand-4': '#d6cb67',
  'brand-5': '#dbd8cc',
}

RGB Array

[102, 153, 102], [133, 143, 92], [214, 159, 103], [214, 203, 103], [219, 216, 204]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #669966, #858F5C, #D69F67, #D6CB67, #DBD8CC 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: #669966; --color-2: #858f5c; --color-3: #d69f67; --color-4: #d6cb67; --color-5: #dbd8cc. 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