← Back to Editor

#77664C · #AA9F80 · #DDD7B3 · #8ACCB9 · #787264

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#77664C

Ochre · DimGray · Amber Brown

HEX
#77664C
RGB
rgb(119, 102, 76)
HSL
hsl(36, 22%, 38%)
HSB
hsb(36, 36%, 47%)
CMYK
cmyk(0%, 14%, 36%, 53%)
Oklch
oklch(52.0% 0.044 78.1)

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

#AA9F80

Ginger · DarkGray · Sunflower

HEX
#AA9F80
RGB
rgb(170, 159, 128)
HSL
hsl(44, 20%, 58%)
HSB
hsb(44, 25%, 67%)
CMYK
cmyk(0%, 6%, 25%, 33%)
Oklch
oklch(70.4% 0.045 90.8)

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

#DDD7B3

Fresh Green · Wheat · Lemon Cream

HEX
#DDD7B3
RGB
rgb(221, 215, 179)
HSL
hsl(51, 38%, 78%)
HSB
hsb(51, 19%, 87%)
CMYK
cmyk(0%, 3%, 19%, 13%)
Oklch
oklch(87.5% 0.048 99.5)

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

#8ACCB9

Jade · MediumAquaMarine · Lake Green

HEX
#8ACCB9
RGB
rgb(138, 204, 185)
HSL
hsl(163, 39%, 67%)
HSB
hsb(163, 32%, 80%)
CMYK
cmyk(32%, 0%, 9%, 20%)
Oklch
oklch(79.5% 0.073 174.4)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#787264

Ochre · DimGray · Warm Gray

HEX
#787264
RGB
rgb(120, 114, 100)
HSL
hsl(42, 9%, 43%)
HSB
hsb(42, 17%, 47%)
CMYK
cmyk(0%, 5%, 17%, 53%)
Oklch
oklch(55.3% 0.022 87.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

77664C
4C5D76

Analogous

76504C
77664C
72764C

Triadic

77664C
4C7665
654C76

Split-Comp.

77664C
4C7276
504C76

Tetradic

77664C
4C7650
4C5D76
764C72

Contrast Matrix WCAG 2.1 Contrast

77664C
AA9F80
DDD7B3
8ACCB9
787264
—
2.1
Fail
3.8
AA Large
3.0
AA Large
1.2
Fail
2.1
Fail
—
1.8
Fail
1.4
Fail
1.8
Fail
3.8
AA Large
1.8
Fail
—
1.3
Fail
3.3
AA Large
3.0
AA Large
1.4
Fail
1.3
Fail
—
2.6
Fail
1.2
Fail
1.8
Fail
3.3
AA Large
2.6
Fail
—
White BG
5.5AA
2.6Fail
1.5Fail
1.8Fail
4.8AA
Black BG
3.8AA Large
8.0AAA
14.4AAA
11.4AAA
4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

706F52
A5A588
DADABC
A7A7BE
757567

Deuteranopia

717254
A6A789
DBDBBE
A39EBF
767668

Tritanopia

765758
A98D8F
DDC3C4
8DC1C2
786A6B

Achromatopsia

686868
9F9F9F
D5D5D5
B6B6B6
727272

Shades & Tints Shades & Tints

#77664C

Dark
Light

#AA9F80

Dark
Light

#DDD7B3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #77664c;
  --color-2: #aa9f80;
  --color-3: #ddd7b3;
  --color-4: #8accb9;
  --color-5: #787264;
}

SCSS

$color-1: #77664c;
$color-2: #aa9f80;
$color-3: #ddd7b3;
$color-4: #8accb9;
$color-5: #787264;

TAILWIND

colors: {
  'brand-1': '#77664c',
  'brand-2': '#aa9f80',
  'brand-3': '#ddd7b3',
  'brand-4': '#8accb9',
  'brand-5': '#787264',
}

RGB Array

[119, 102, 76], [170, 159, 128], [221, 215, 179], [138, 204, 185], [120, 114, 100]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #77664C, #AA9F80, #DDD7B3, #8ACCB9, #787264 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. 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: #77664c; --color-2: #aa9f80; --color-3: #ddd7b3; --color-4: #8accb9; --color-5: #787264. 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. 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