← Back to Editor

#6E634F · #6B7B61 · #AF9769 · #C59861 · #DEA556

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

#6E634F

Ochre · DimGray · Amber Brown

HEX
#6E634F
RGB
rgb(110, 99, 79)
HSL
hsl(39, 16%, 37%)
HSB
hsb(39, 28%, 43%)
CMYK
cmyk(0%, 10%, 28%, 57%)
Oklch
oklch(50.4% 0.033 82.4)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#6B7B61

Celadon · DimGray · Olive Green

HEX
#6B7B61
RGB
rgb(107, 123, 97)
HSL
hsl(97, 12%, 43%)
HSB
hsb(97, 21%, 48%)
CMYK
cmyk(13%, 0%, 21%, 52%)
Oklch
oklch(56.2% 0.043 133.5)

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

#AF9769

Ginger · Gray · Warm Sun

HEX
#AF9769
RGB
rgb(175, 151, 105)
HSL
hsl(39, 30%, 55%)
HSB
hsb(39, 40%, 69%)
CMYK
cmyk(0%, 14%, 40%, 31%)
Oklch
oklch(68.7% 0.069 83.2)

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

#C59861

Ginger · DarkSalmon · Warm Sun

HEX
#C59861
RGB
rgb(197, 152, 97)
HSL
hsl(33, 46%, 58%)
HSB
hsb(33, 51%, 77%)
CMYK
cmyk(0%, 23%, 51%, 23%)
Oklch
oklch(71.0% 0.090 71.1)

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

#DEA556

Ginger · SandyBrown · Warm Sun

HEX
#DEA556
RGB
rgb(222, 165, 86)
HSL
hsl(35, 67%, 60%)
HSB
hsb(35, 61%, 87%)
CMYK
cmyk(0%, 26%, 61%, 13%)
Oklch
oklch(76.0% 0.117 73.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6E634F
4F5A6D

Analogous

6D544F
6E634F
696D4F

Triadic

6E634F
4F6D63
634F6D

Split-Comp.

6E634F
4F696D
544F6D

Tetradic

6E634F
4F6D54
4F5A6D
6D4F69

Contrast Matrix WCAG 2.1 Contrast

6E634F
6B7B61
AF9769
C59861
DEA556
—
1.3
Fail
2.1
Fail
2.3
Fail
2.7
Fail
1.3
Fail
—
1.6
Fail
1.7
Fail
2.1
Fail
2.1
Fail
1.6
Fail
—
1.1
Fail
1.3
Fail
2.3
Fail
1.7
Fail
1.1
Fail
—
1.2
Fail
2.7
Fail
2.1
Fail
1.3
Fail
1.2
Fail
—
White BG
5.9AA
4.5AA
2.8Fail
2.6Fail
2.2Fail
Black BG
3.6AA Large
4.6AA
7.5AAA
8.0AAA
9.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

696954
727267
A5A474
B2B16E
C5C569

Deuteranopia

6A6B55
717069
A6A877
B4B772
C9CD6E

Tritanopia

6D5859
6C6C6D
AE7D7F
C3797B
DB787C

Achromatopsia

646464
737373
999999
9F9F9F
ADADAD

Shades & Tints Shades & Tints

#6E634F

Dark
Light

#6B7B61

Dark
Light

#AF9769

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6e634f;
  --color-2: #6b7b61;
  --color-3: #af9769;
  --color-4: #c59861;
  --color-5: #dea556;
}

SCSS

$color-1: #6e634f;
$color-2: #6b7b61;
$color-3: #af9769;
$color-4: #c59861;
$color-5: #dea556;

TAILWIND

colors: {
  'brand-1': '#6e634f',
  'brand-2': '#6b7b61',
  'brand-3': '#af9769',
  'brand-4': '#c59861',
  'brand-5': '#dea556',
}

RGB Array

[110, 99, 79], [107, 123, 97], [175, 151, 105], [197, 152, 97], [222, 165, 86]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #6E634F, #6B7B61, #AF9769, #C59861, #DEA556 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: #6e634f; --color-2: #6b7b61; --color-3: #af9769; --color-4: #c59861; --color-5: #dea556. 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