← Back to Editor

#C9CDBF · #CCAA51 · #B4897A · #437085 · #98896A

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

#C9CDBF

Willow Green · Silver · Apple Green

HEX
#C9CDBF
RGB
rgb(201, 205, 191)
HSL
hsl(77, 12%, 78%)
HSB
hsb(77, 7%, 80%)
CMYK
cmyk(2%, 0%, 7%, 20%)
Oklch
oklch(84.1% 0.020 119.8)

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

#CCAA51

Ginger · SandyBrown · Sunflower

HEX
#CCAA51
RGB
rgb(204, 170, 81)
HSL
hsl(43, 55%, 56%)
HSB
hsb(43, 60%, 80%)
CMYK
cmyk(0%, 17%, 60%, 20%)
Oklch
oklch(75.1% 0.115 88.5)

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

#B4897A

Tangerine · Gray · Warm Sun

HEX
#B4897A
RGB
rgb(180, 137, 122)
HSL
hsl(16, 28%, 59%)
HSB
hsb(16, 32%, 71%)
CMYK
cmyk(0%, 24%, 32%, 29%)
Oklch
oklch(66.7% 0.057 40.1)

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

#437085

Slate Blue · DimGray · Mint Ice

HEX
#437085
RGB
rgb(67, 112, 133)
HSL
hsl(199, 33%, 39%)
HSB
hsb(199, 50%, 52%)
CMYK
cmyk(50%, 16%, 0%, 48%)
Oklch
oklch(52.1% 0.060 229.5)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#98896A

Ginger · Gray · Sunflower

HEX
#98896A
RGB
rgb(152, 137, 106)
HSL
hsl(40, 18%, 51%)
HSB
hsb(40, 30%, 60%)
CMYK
cmyk(0%, 10%, 30%, 40%)
Oklch
oklch(63.5% 0.047 85.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C9CDBF
C4C0CE

Analogous

CECBC0
C9CDBF
C3CEC0

Triadic

C9CDBF
C0CACE
CEC0CA

Split-Comp.

C9CDBF
C0C3CE
CBC0CE

Tetradic

C9CDBF
C0CECB
C4C0CE
CEC0C3

Contrast Matrix WCAG 2.1 Contrast

C9CDBF
CCAA51
B4897A
437085
98896A
—
1.4
Fail
1.9
Fail
3.3
AA Large
2.1
Fail
1.4
Fail
—
1.4
Fail
2.4
Fail
1.5
Fail
1.9
Fail
1.4
Fail
—
1.7
Fail
1.1
Fail
3.3
AA Large
2.4
Fail
1.7
Fail
—
1.6
Fail
2.1
Fail
1.5
Fail
1.1
Fail
1.6
Fail
—
White BG
1.6Fail
2.2Fail
3.1AA Large
5.4AA
3.4AA Large
Black BG
13.0AAA
9.4AAA
6.8AA
3.9AA Large
6.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CBCBC2
BDBD67
A1A17E
565780
929172

Deuteranopia

CBCAC3
BFC26C
A4A77F
54517F
929473

Tritanopia

C9C5C6
CA787B
B28081
457C7B
977779

Achromatopsia

CACACA
AAAAAA
949494
656565
8A8A8A

Shades & Tints Shades & Tints

#C9CDBF

Dark
Light

#CCAA51

Dark
Light

#B4897A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c9cdbf;
  --color-2: #ccaa51;
  --color-3: #b4897a;
  --color-4: #437085;
  --color-5: #98896a;
}

SCSS

$color-1: #c9cdbf;
$color-2: #ccaa51;
$color-3: #b4897a;
$color-4: #437085;
$color-5: #98896a;

TAILWIND

colors: {
  'brand-1': '#c9cdbf',
  'brand-2': '#ccaa51',
  'brand-3': '#b4897a',
  'brand-4': '#437085',
  'brand-5': '#98896a',
}

RGB Array

[201, 205, 191], [204, 170, 81], [180, 137, 122], [67, 112, 133], [152, 137, 106]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C9CDBF, #CCAA51, #B4897A, #437085, #98896A 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: #c9cdbf; --color-2: #ccaa51; --color-3: #b4897a; --color-4: #437085; --color-5: #98896a. 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