← Back to Editor

#CDD4AA · #C0CCAA · #B7A59B · #AA7285 · #5F5360

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 Library

Color Details Color Details

#CDD4AA

Willow Green · Silver · Apple Green

HEX
#CDD4AA
RGB
rgb(205, 212, 170)
HSL
hsl(70, 33%, 75%)
HSB
hsb(70, 20%, 83%)
CMYK
cmyk(3%, 0%, 20%, 17%)
Oklch
oklch(85.4% 0.057 115.3)

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

#C0CCAA

Willow Green · Silver · Apple Green

HEX
#C0CCAA
RGB
rgb(192, 204, 170)
HSL
hsl(81, 25%, 73%)
HSB
hsb(81, 17%, 80%)
CMYK
cmyk(6%, 0%, 17%, 20%)
Oklch
oklch(82.7% 0.048 123.3)

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

#B7A59B

Apricot · DarkGray · Warm Sun

HEX
#B7A59B
RGB
rgb(183, 165, 155)
HSL
hsl(21, 16%, 66%)
HSB
hsb(21, 15%, 72%)
CMYK
cmyk(0%, 10%, 15%, 28%)
Oklch
oklch(73.5% 0.025 51.0)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#AA7285

Dark Violet · Gray · Rose Pink

HEX
#AA7285
RGB
rgb(170, 114, 133)
HSL
hsl(340, 25%, 56%)
HSB
hsb(340, 33%, 67%)
CMYK
cmyk(0%, 33%, 22%, 33%)
Oklch
oklch(61.6% 0.075 357.5)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#5F5360

Ink Gray · DimGray · Charcoal

HEX
#5F5360
RGB
rgb(95, 83, 96)
HSL
hsl(295, 7%, 35%)
HSB
hsb(295, 14%, 38%)
CMYK
cmyk(1%, 14%, 0%, 62%)
Oklch
oklch(45.9% 0.026 323.6)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CDD4AA
B1AAD4

Analogous

D4C6AA
CDD4AA
B8D4AA

Triadic

CDD4AA
AACDD4
D4AACD

Split-Comp.

CDD4AA
AAB8D4
C6AAD4

Tetradic

CDD4AA
AAD4C6
B1AAD4
D4AAB8

Contrast Matrix WCAG 2.1 Contrast

CDD4AA
C0CCAA
B7A59B
AA7285
5F5360
—
1.1
Fail
1.5
Fail
2.5
Fail
4.7
AA
1.1
Fail
—
1.4
Fail
2.3
Fail
4.3
AA Large
1.5
Fail
1.4
Fail
—
1.6
Fail
3.1
AA Large
2.5
Fail
2.3
Fail
1.6
Fail
—
1.9
Fail
4.7
AA
4.3
AA Large
3.1
AA Large
1.9
Fail
—
White BG
1.5Fail
1.7Fail
2.4Fail
3.8AA Large
7.3AAA
Black BG
13.6AAA
12.5AAA
8.9AAA
5.5AA
2.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D0D0B4
C5C5B2
AFAF9D
929180
5A5A5D

Deuteranopia

D0CFB7
C5C4B4
B0B29E
95997F
5B5B5C

Tritanopia

CDBCBE
C1B9BA
B69FA0
A77D7C
5E5A5A

Achromatopsia

CDCDCD
C5C5C5
A9A9A9
858585
585858

Shades & Tints Shades & Tints

#CDD4AA

Dark
Light

#C0CCAA

Dark
Light

#B7A59B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cdd4aa;
  --color-2: #c0ccaa;
  --color-3: #b7a59b;
  --color-4: #aa7285;
  --color-5: #5f5360;
}

SCSS

$color-1: #cdd4aa;
$color-2: #c0ccaa;
$color-3: #b7a59b;
$color-4: #aa7285;
$color-5: #5f5360;

TAILWIND

colors: {
  'brand-1': '#cdd4aa',
  'brand-2': '#c0ccaa',
  'brand-3': '#b7a59b',
  'brand-4': '#aa7285',
  'brand-5': '#5f5360',
}

RGB Array

[205, 212, 170], [192, 204, 170], [183, 165, 155], [170, 114, 133], [95, 83, 96]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CDD4AA, #C0CCAA, #B7A59B, #AA7285, #5F5360 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: #cdd4aa; --color-2: #c0ccaa; --color-3: #b7a59b; --color-4: #aa7285; --color-5: #5f5360. 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