← Back to Editor

#6F7865 · #809D7E · #BFA443 · #D1C44B · #E6E1B8

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

#6F7865

Grass Green · DimGray · Warm Gray

HEX
#6F7865
RGB
rgb(111, 120, 101)
HSL
hsl(88, 9%, 43%)
HSB
hsb(88, 16%, 47%)
CMYK
cmyk(7%, 0%, 16%, 53%)
Oklch
oklch(55.9% 0.031 128.1)

Traditional「Grass Green」· Paint「Warm Gray」· Creative Urban Concrete

#809D7E

Celadon · Gray · Olive Green

HEX
#809D7E
RGB
rgb(128, 157, 126)
HSL
hsl(116, 14%, 55%)
HSB
hsb(116, 20%, 62%)
CMYK
cmyk(18%, 0%, 20%, 38%)
Oklch
oklch(66.5% 0.056 143.2)

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

#BFA443

Ginger · GoldenRod · Sunflower

HEX
#BFA443
RGB
rgb(191, 164, 67)
HSL
hsl(47, 49%, 51%)
HSB
hsb(47, 65%, 75%)
CMYK
cmyk(0%, 14%, 65%, 25%)
Oklch
oklch(72.4% 0.120 93.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#D1C44B

Autumn Sage · SandyBrown · Sunflower

HEX
#D1C44B
RGB
rgb(209, 196, 75)
HSL
hsl(54, 59%, 56%)
HSB
hsb(54, 64%, 82%)
CMYK
cmyk(0%, 6%, 64%, 18%)
Oklch
oklch(80.9% 0.140 103.2)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#E6E1B8

Fresh Green · Wheat · Lemon Cream

HEX
#E6E1B8
RGB
rgb(230, 225, 184)
HSL
hsl(53, 48%, 81%)
HSB
hsb(53, 20%, 90%)
CMYK
cmyk(0%, 2%, 20%, 10%)
Oklch
oklch(90.3% 0.054 101.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6F7865
6D6478

Analogous

787764
6F7865
647864

Triadic

6F7865
646E78
78646E

Split-Comp.

6F7865
646478
776478

Tetradic

6F7865
647877
6D6478
786464

Contrast Matrix WCAG 2.1 Contrast

6F7865
809D7E
BFA443
D1C44B
E6E1B8
—
1.5
Fail
1.9
Fail
2.6
Fail
3.5
AA Large
1.5
Fail
—
1.2
Fail
1.7
Fail
2.2
Fail
1.9
Fail
1.2
Fail
—
1.4
Fail
1.8
Fail
2.6
Fail
1.7
Fail
1.4
Fail
—
1.4
Fail
3.5
AA Large
2.2
Fail
1.8
Fail
1.4
Fail
—
White BG
4.6AA
3.0Fail
2.4Fail
1.8Fail
1.3Fail
Black BG
4.6AA
7.0AAA
8.6AAA
11.7AAA
15.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

73736A
8D8D86
B3B35A
CBCB68
E4E4C2

Deuteranopia

72726B
8B8987
B5B760
CCCD6F
E4E5C4

Tritanopia

6F6D6E
818B8D
BE6D71
D07F84
E6CACB

Achromatopsia

737373
919191
A1A1A1
BABABA
DEDEDE

Shades & Tints Shades & Tints

#6F7865

Dark
Light

#809D7E

Dark
Light

#BFA443

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6f7865;
  --color-2: #809d7e;
  --color-3: #bfa443;
  --color-4: #d1c44b;
  --color-5: #e6e1b8;
}

SCSS

$color-1: #6f7865;
$color-2: #809d7e;
$color-3: #bfa443;
$color-4: #d1c44b;
$color-5: #e6e1b8;

TAILWIND

colors: {
  'brand-1': '#6f7865',
  'brand-2': '#809d7e',
  'brand-3': '#bfa443',
  'brand-4': '#d1c44b',
  'brand-5': '#e6e1b8',
}

RGB Array

[111, 120, 101], [128, 157, 126], [191, 164, 67], [209, 196, 75], [230, 225, 184]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #6F7865, #809D7E, #BFA443, #D1C44B, #E6E1B8 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: #6f7865; --color-2: #809d7e; --color-3: #bfa443; --color-4: #d1c44b; --color-5: #e6e1b8. 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