← Back to Editor

#6E886B · #9C9666 · #C1965F · #FD995E · #FB7E60

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

#6E886B

Celadon · Gray · Olive Green

HEX
#6E886B
RGB
rgb(110, 136, 107)
HSL
hsl(114, 12%, 48%)
HSB
hsb(114, 21%, 53%)
CMYK
cmyk(19%, 0%, 21%, 47%)
Oklch
oklch(59.8% 0.053 142.2)

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

#9C9666

Autumn Sage · Gray · Sunflower

HEX
#9C9666
RGB
rgb(156, 150, 102)
HSL
hsl(53, 21%, 51%)
HSB
hsb(53, 35%, 61%)
CMYK
cmyk(0%, 4%, 35%, 39%)
Oklch
oklch(66.6% 0.066 101.9)

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

#C1965F

Ginger · DarkSalmon · Warm Sun

HEX
#C1965F
RGB
rgb(193, 150, 95)
HSL
hsl(34, 44%, 56%)
HSB
hsb(34, 51%, 76%)
CMYK
cmyk(0%, 22%, 51%, 24%)
Oklch
oklch(70.1% 0.089 72.4)

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

#FD995E

Apricot · SandyBrown · Warm Sun

HEX
#FD995E
RGB
rgb(253, 153, 94)
HSL
hsl(22, 98%, 68%)
HSB
hsb(22, 63%, 99%)
CMYK
cmyk(0%, 40%, 63%, 1%)
Oklch
oklch(77.5% 0.141 50.0)

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

#FB7E60

Peach Pink · Coral · Coral Red

HEX
#FB7E60
RGB
rgb(251, 126, 96)
HSL
hsl(12, 95%, 68%)
HSB
hsb(12, 62%, 98%)
CMYK
cmyk(0%, 50%, 62%, 2%)
Oklch
oklch(73.0% 0.159 34.7)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6E886B
866C89

Analogous

7D896C
6E886B
6C8977

Triadic

6E886B
6C6F89
896C6F

Split-Comp.

6E886B
776C89
896C7D

Tetradic

6E886B
6C7D89
866C89
89776C

Contrast Matrix WCAG 2.1 Contrast

6E886B
9C9666
C1965F
FD995E
FB7E60
—
1.3
Fail
1.4
Fail
1.8
Fail
1.5
Fail
1.3
Fail
—
1.1
Fail
1.4
Fail
1.2
Fail
1.4
Fail
1.1
Fail
—
1.3
Fail
1.1
Fail
1.8
Fail
1.4
Fail
1.3
Fail
—
1.2
Fail
1.5
Fail
1.2
Fail
1.1
Fail
1.2
Fail
—
White BG
3.9AA Large
3.0AA Large
2.7Fail
2.1Fail
2.5Fail
Black BG
5.4AA
7.0AA
7.8AAA
9.9AAA
8.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

797972
999972
AEAE6C
D2D16C
C5C467

Deuteranopia

787674
9A9A74
B1B470
D8DF70
CCD669

Tritanopia

6F7879
9C7B7D
BF7779
F8787A
F56D6E

Achromatopsia

7D7D7D
929292
9D9D9D
B0B0B0
A0A0A0

Shades & Tints Shades & Tints

#6E886B

Dark
Light

#9C9666

Dark
Light

#C1965F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6e886b;
  --color-2: #9c9666;
  --color-3: #c1965f;
  --color-4: #fd995e;
  --color-5: #fb7e60;
}

SCSS

$color-1: #6e886b;
$color-2: #9c9666;
$color-3: #c1965f;
$color-4: #fd995e;
$color-5: #fb7e60;

TAILWIND

colors: {
  'brand-1': '#6e886b',
  'brand-2': '#9c9666',
  'brand-3': '#c1965f',
  'brand-4': '#fd995e',
  'brand-5': '#fb7e60',
}

RGB Array

[110, 136, 107], [156, 150, 102], [193, 150, 95], [253, 153, 94], [251, 126, 96]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #6E886B, #9C9666, #C1965F, #FD995E, #FB7E60 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: #6e886b; --color-2: #9c9666; --color-3: #c1965f; --color-4: #fd995e; --color-5: #fb7e60. 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