← Back to Editor

#776B5D · #D66B63 · #A0AD81 · #C9C179 · #A4C7CB

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

#776B5D

Ochre · DimGray · Amber Brown

HEX
#776B5D
RGB
rgb(119, 107, 93)
HSL
hsl(32, 12%, 42%)
HSB
hsb(32, 22%, 47%)
CMYK
cmyk(0%, 10%, 22%, 53%)
Oklch
oklch(53.5% 0.026 71.5)

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

#D66B63

Peach Pink · LightCoral · Coral Red

HEX
#D66B63
RGB
rgb(214, 107, 99)
HSL
hsl(4, 58%, 61%)
HSB
hsb(4, 54%, 84%)
CMYK
cmyk(0%, 50%, 54%, 16%)
Oklch
oklch(65.2% 0.136 25.9)

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

#A0AD81

Grass Green · DarkSeaGreen · Olive Green

HEX
#A0AD81
RGB
rgb(160, 173, 129)
HSL
hsl(78, 21%, 59%)
HSB
hsb(78, 25%, 68%)
CMYK
cmyk(8%, 0%, 25%, 32%)
Oklch
oklch(72.6% 0.063 121.3)

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

#C9C179

Fresh Green · Tan · Sunflower

HEX
#C9C179
RGB
rgb(201, 193, 121)
HSL
hsl(54, 43%, 63%)
HSB
hsb(54, 40%, 79%)
CMYK
cmyk(0%, 4%, 40%, 21%)
Oklch
oklch(80.1% 0.093 102.8)

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

#A4C7CB

Sky Blue · LightSteelBlue · Lake Green

HEX
#A4C7CB
RGB
rgb(164, 199, 203)
HSL
hsl(186, 27%, 72%)
HSB
hsb(186, 19%, 80%)
CMYK
cmyk(19%, 2%, 0%, 20%)
Oklch
oklch(80.5% 0.038 205.0)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

776B5D
5E6A78

Analogous

785F5E
776B5D
77785E

Triadic

776B5D
5E786C
6C5E78

Split-Comp.

776B5D
5E7778
5F5E78

Tetradic

776B5D
5E785F
5E6A78
785E77

Contrast Matrix WCAG 2.1 Contrast

776B5D
D66B63
A0AD81
C9C179
A4C7CB
—
1.5
Fail
2.2
Fail
2.8
Fail
2.9
Fail
1.5
Fail
—
1.4
Fail
1.9
Fail
1.9
Fail
2.2
Fail
1.4
Fail
—
1.3
Fail
1.3
Fail
2.8
Fail
1.9
Fail
1.3
Fail
—
1.0
Fail
2.9
Fail
1.9
Fail
1.3
Fail
1.0
Fail
—
White BG
5.2AA
3.4AA Large
2.4Fail
1.8Fail
1.8Fail
Black BG
4.0AA Large
6.1AA
8.8AAA
11.4AAA
11.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

727260
A8A765
A6A68C
C6C58A
B3B3CA

Deuteranopia

737361
AEB665
A5A48E
C6C78F
B1AFCA

Tritanopia

766364
D16667
A19496
C9989B
A6C9C9

Achromatopsia

6D6D6D
8A8A8A
A4A4A4
BBBBBB
BDBDBD

Shades & Tints Shades & Tints

#776B5D

Dark
Light

#D66B63

Dark
Light

#A0AD81

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #776b5d;
  --color-2: #d66b63;
  --color-3: #a0ad81;
  --color-4: #c9c179;
  --color-5: #a4c7cb;
}

SCSS

$color-1: #776b5d;
$color-2: #d66b63;
$color-3: #a0ad81;
$color-4: #c9c179;
$color-5: #a4c7cb;

TAILWIND

colors: {
  'brand-1': '#776b5d',
  'brand-2': '#d66b63',
  'brand-3': '#a0ad81',
  'brand-4': '#c9c179',
  'brand-5': '#a4c7cb',
}

RGB Array

[119, 107, 93], [214, 107, 99], [160, 173, 129], [201, 193, 121], [164, 199, 203]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #776B5D, #D66B63, #A0AD81, #C9C179, #A4C7CB 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: #776b5d; --color-2: #d66b63; --color-3: #a0ad81; --color-4: #c9c179; --color-5: #a4c7cb. 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