← Back to Editor

#CCC06C · #7A8F88 · #774F44 · #925D55 · #A08B77

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

#CCC06C

Fresh Green · BurlyWood · Sunflower

HEX
#CCC06C
RGB
rgb(204, 192, 108)
HSL
hsl(52, 48%, 61%)
HSB
hsb(52, 47%, 80%)
CMYK
cmyk(0%, 6%, 47%, 20%)
Oklch
oklch(80.0% 0.106 101.3)

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

#7A8F88

Mineral Blue · Gray · Warm Gray

HEX
#7A8F88
RGB
rgb(122, 143, 136)
HSL
hsl(160, 9%, 52%)
HSB
hsb(160, 15%, 56%)
CMYK
cmyk(15%, 0%, 5%, 44%)
Oklch
oklch(63.1% 0.026 173.3)

Traditional「Mineral Blue」· Paint「Warm Gray」· Creative Urban Concrete

#774F44

Crimson · Sienna · Wine Red

HEX
#774F44
RGB
rgb(119, 79, 68)
HSL
hsl(13, 27%, 37%)
HSB
hsb(13, 43%, 47%)
CMYK
cmyk(0%, 34%, 43%, 53%)
Oklch
oklch(46.9% 0.057 36.0)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#925D55

Crimson · Sienna · Passion Red

HEX
#925D55
RGB
rgb(146, 93, 85)
HSL
hsl(8, 26%, 45%)
HSB
hsb(8, 42%, 57%)
CMYK
cmyk(0%, 36%, 42%, 43%)
Oklch
oklch(53.4% 0.071 29.0)

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

#A08B77

Tangerine · Gray · Warm Sun

HEX
#A08B77
RGB
rgb(160, 139, 119)
HSL
hsl(29, 18%, 55%)
HSB
hsb(29, 26%, 63%)
CMYK
cmyk(0%, 13%, 26%, 37%)
Oklch
oklch(65.0% 0.038 65.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCC06C
6C79CB

Analogous

CB8F6C
CCC06C
A8CB6C

Triadic

CCC06C
6CCBBF
BF6CCB

Split-Comp.

CCC06C
6CA8CB
8F6CCB

Tetradic

CCC06C
6CCB8F
6C79CB
CB6CA8

Contrast Matrix WCAG 2.1 Contrast

CCC06C
7A8F88
774F44
925D55
A08B77
—
1.9
Fail
3.8
AA Large
2.9
Fail
1.8
Fail
1.9
Fail
—
2.0
Fail
1.6
Fail
1.1
Fail
3.8
AA Large
2.0
Fail
—
1.3
Fail
2.2
Fail
2.9
Fail
1.6
Fail
1.3
Fail
—
1.6
Fail
1.8
Fail
1.1
Fail
2.2
Fail
1.6
Fail
—
White BG
1.9Fail
3.4AA Large
7.0AAA
5.4AA
3.3AA Large
Black BG
11.3AAA
6.1AA
3.0Fail
3.9AA Large
6.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C7C780
83838A
666547
7B7B57
97977C

Deuteranopia

C8C885
82808A
686B47
7E8257
989A7D

Tritanopia

CB9094
7B8B8B
754949
8F5859
9F8081

Achromatopsia

BABABA
888888
5A5A5A
6C6C6C
8F8F8F

Shades & Tints Shades & Tints

#CCC06C

Dark
Light

#7A8F88

Dark
Light

#774F44

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccc06c;
  --color-2: #7a8f88;
  --color-3: #774f44;
  --color-4: #925d55;
  --color-5: #a08b77;
}

SCSS

$color-1: #ccc06c;
$color-2: #7a8f88;
$color-3: #774f44;
$color-4: #925d55;
$color-5: #a08b77;

TAILWIND

colors: {
  'brand-1': '#ccc06c',
  'brand-2': '#7a8f88',
  'brand-3': '#774f44',
  'brand-4': '#925d55',
  'brand-5': '#a08b77',
}

RGB Array

[204, 192, 108], [122, 143, 136], [119, 79, 68], [146, 93, 85], [160, 139, 119]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCC06C, #7A8F88, #774F44, #925D55, #A08B77 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: #ccc06c; --color-2: #7a8f88; --color-3: #774f44; --color-4: #925d55; --color-5: #a08b77. 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