← Back to Editor

#664250 · #7E6D73 · #ADD0B2 · #D7DE9B · #E2E5C6

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

#664250

Dark Violet · DimGray · Camellia

HEX
#664250
RGB
rgb(102, 66, 80)
HSL
hsl(337, 21%, 33%)
HSB
hsb(337, 35%, 40%)
CMYK
cmyk(0%, 35%, 22%, 60%)
Oklch
oklch(42.5% 0.054 354.6)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#7E6D73

Ink Gray · Gray · Warm Gray

HEX
#7E6D73
RGB
rgb(126, 109, 115)
HSL
hsl(339, 7%, 46%)
HSB
hsb(339, 13%, 49%)
CMYK
cmyk(0%, 13%, 9%, 51%)
Oklch
oklch(55.3% 0.023 354.6)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#ADD0B2

Celadon · Silver · Apple Green

HEX
#ADD0B2
RGB
rgb(173, 208, 178)
HSL
hsl(129, 27%, 75%)
HSB
hsb(129, 17%, 82%)
CMYK
cmyk(17%, 0%, 14%, 18%)
Oklch
oklch(82.4% 0.056 149.1)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#D7DE9B

Fresh Green · Khaki · Sunflower

HEX
#D7DE9B
RGB
rgb(215, 222, 155)
HSL
hsl(66, 50%, 74%)
HSB
hsb(66, 30%, 87%)
CMYK
cmyk(3%, 0%, 30%, 13%)
Oklch
oklch(87.9% 0.087 113.1)

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

#E2E5C6

Fresh Green · LightGray · Lemon Cream

HEX
#E2E5C6
RGB
rgb(226, 229, 198)
HSL
hsl(66, 37%, 84%)
HSB
hsb(66, 14%, 90%)
CMYK
cmyk(1%, 0%, 14%, 10%)
Oklch
oklch(91.1% 0.041 111.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

664250
426658

Analogous

664262
664250
664742

Triadic

664250
506642
425066

Split-Comp.

664250
426647
426266

Tetradic

664250
626642
426658
474266

Contrast Matrix WCAG 2.1 Contrast

664250
7E6D73
ADD0B2
D7DE9B
E2E5C6
—
1.8
Fail
5.1
AA
6.0
AA
6.6
AA
1.8
Fail
—
2.9
Fail
3.4
AA Large
3.8
AA Large
5.1
AA
2.9
Fail
—
1.2
Fail
1.3
Fail
6.0
AA
3.4
AA Large
1.2
Fail
—
1.1
Fail
6.6
AA
3.8
AA Large
1.3
Fail
1.1
Fail
—
White BG
8.5AAA
4.9AA
1.7Fail
1.4Fail
1.3Fail
Black BG
2.5Fail
4.3AA Large
12.4AAA
14.8AAA
16.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

56564D
777672
BCBCB9
DADAAB
E3E3CE

Deuteranopia

595B4C
787971
BAB8BB
DAD9AF
E3E3CF

Tritanopia

644A49
7D7070
AFBFC0
D7B8BB
E2D3D5

Achromatopsia

4E4E4E
737373
C2C2C2
D4D4D4
E1E1E1

Shades & Tints Shades & Tints

#664250

Dark
Light

#7E6D73

Dark
Light

#ADD0B2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #664250;
  --color-2: #7e6d73;
  --color-3: #add0b2;
  --color-4: #d7de9b;
  --color-5: #e2e5c6;
}

SCSS

$color-1: #664250;
$color-2: #7e6d73;
$color-3: #add0b2;
$color-4: #d7de9b;
$color-5: #e2e5c6;

TAILWIND

colors: {
  'brand-1': '#664250',
  'brand-2': '#7e6d73',
  'brand-3': '#add0b2',
  'brand-4': '#d7de9b',
  'brand-5': '#e2e5c6',
}

RGB Array

[102, 66, 80], [126, 109, 115], [173, 208, 178], [215, 222, 155], [226, 229, 198]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #664250, #7E6D73, #ADD0B2, #D7DE9B, #E2E5C6 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #664250; --color-2: #7e6d73; --color-3: #add0b2; --color-4: #d7de9b; --color-5: #e2e5c6. 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. Restrained colors convey professionalism and trust. 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