← Back to Editor

#666A5B · #D7493D · #E09554 · #F9CAA0 · #DFB891

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 LibraryData Visualization

Color Details Color Details

#666A5B

Grass Green · DimGray · Charcoal

HEX
#666A5B
RGB
rgb(102, 106, 91)
HSL
hsl(76, 8%, 39%)
HSB
hsb(76, 14%, 42%)
CMYK
cmyk(4%, 0%, 14%, 58%)
Oklch
oklch(51.6% 0.023 119.4)

Traditional「Grass Green」· Paint「Charcoal」· Creative Midnight Shadow

#D7493D

Vermilion · Chocolate · Passion Red

HEX
#D7493D
RGB
rgb(215, 73, 61)
HSL
hsl(5, 66%, 54%)
HSB
hsb(5, 72%, 84%)
CMYK
cmyk(0%, 66%, 72%, 16%)
Oklch
oklch(60.1% 0.180 28.4)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#E09554

Tangerine · SandyBrown · Warm Sun

HEX
#E09554
RGB
rgb(224, 149, 84)
HSL
hsl(28, 69%, 60%)
HSB
hsb(28, 63%, 88%)
CMYK
cmyk(0%, 33%, 63%, 12%)
Oklch
oklch(73.2% 0.122 60.0)

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

#F9CAA0

Apricot · Wheat · Peach Orange

HEX
#F9CAA0
RGB
rgb(249, 202, 160)
HSL
hsl(28, 88%, 80%)
HSB
hsb(28, 36%, 98%)
CMYK
cmyk(0%, 19%, 36%, 2%)
Oklch
oklch(87.0% 0.077 63.3)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#DFB891

Goose Yellow · BurlyWood · Warm Sun

HEX
#DFB891
RGB
rgb(223, 184, 145)
HSL
hsl(30, 55%, 72%)
HSB
hsb(30, 35%, 87%)
CMYK
cmyk(0%, 17%, 35%, 13%)
Oklch
oklch(80.7% 0.069 66.6)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

666A5B
605B6B

Analogous

6B685B
666A5B
5F6B5B

Triadic

666A5B
5B676B
6B5B67

Split-Comp.

666A5B
5B5F6B
685B6B

Tetradic

666A5B
5B6B68
605B6B
6B5B5F

Contrast Matrix WCAG 2.1 Contrast

666A5B
D7493D
E09554
F9CAA0
DFB891
—
1.3
Fail
2.3
Fail
3.7
AA Large
3.0
AA Large
1.3
Fail
—
1.8
Fail
2.8
Fail
2.3
Fail
2.3
Fail
1.8
Fail
—
1.6
Fail
1.3
Fail
3.7
AA Large
2.8
Fail
1.6
Fail
—
1.2
Fail
3.0
AA Large
2.3
Fail
1.3
Fail
1.2
Fail
—
White BG
5.6AA
4.3AA Large
2.4Fail
1.5Fail
1.8Fail
Black BG
3.8AA Large
4.9AA
8.6AAA
14.0AAA
11.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

68685F
9A9840
C0BF64
E5E4AA
CECE9A

Deuteranopia

686760
A2AC41
C4C968
E7EBAD
D0D39D

Tritanopia

666162
D04243
DC7073
F7B2B4
DDA2A4

Achromatopsia

676767
727272
A4A4A4
D3D3D3
BFBFBF

Shades & Tints Shades & Tints

#666A5B

Dark
Light

#D7493D

Dark
Light

#E09554

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #666a5b;
  --color-2: #d7493d;
  --color-3: #e09554;
  --color-4: #f9caa0;
  --color-5: #dfb891;
}

SCSS

$color-1: #666a5b;
$color-2: #d7493d;
$color-3: #e09554;
$color-4: #f9caa0;
$color-5: #dfb891;

TAILWIND

colors: {
  'brand-1': '#666a5b',
  'brand-2': '#d7493d',
  'brand-3': '#e09554',
  'brand-4': '#f9caa0',
  'brand-5': '#dfb891',
}

RGB Array

[102, 106, 91], [215, 73, 61], [224, 149, 84], [249, 202, 160], [223, 184, 145]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #666A5B, #D7493D, #E09554, #F9CAA0, #DFB891 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #666a5b; --color-2: #d7493d; --color-3: #e09554; --color-4: #f9caa0; --color-5: #dfb891. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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