#CDC8A2 + #67BDB4 + #54DBEE + #974353 + #CC6D71 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#CDC8A2

Fresh Green · Tan · Sunflower

HEX

#CDC8A2

RGB

rgb(205, 200, 162)

HSL

hsl(53, 30%, 72%)

HSB

hsb(53, 21%, 80%)

CMYK

cmyk(0%, 2%, 21%, 20%)

Oklch

oklch(82.7% 0.051 101.2)

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

#67BDB4

Mineral Blue · MediumAquaMarine · Lake Green

HEX

#67BDB4

RGB

rgb(103, 189, 180)

HSL

hsl(174, 39%, 57%)

HSB

hsb(174, 46%, 74%)

CMYK

cmyk(46%, 0%, 5%, 26%)

Oklch

oklch(74.2% 0.085 186.8)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#54DBEE

Sky Blue · Turquoise · Lake Green

HEX

#54DBEE

RGB

rgb(84, 219, 238)

HSL

hsl(187, 82%, 63%)

HSB

hsb(187, 65%, 93%)

CMYK

cmyk(65%, 8%, 0%, 7%)

Oklch

oklch(82.5% 0.118 208.2)

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

#974353

Crimson · Sienna · Passion Red

HEX

#974353

RGB

rgb(151, 67, 83)

HSL

hsl(349, 39%, 43%)

HSB

hsb(349, 56%, 59%)

CMYK

cmyk(0%, 56%, 45%, 41%)

Oklch

oklch(49.7% 0.113 10.3)

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

#CC6D71

Peach Pink · LightCoral · Coral Red

HEX

#CC6D71

RGB

rgb(204, 109, 113)

HSL

hsl(357, 48%, 61%)

HSB

hsb(357, 47%, 80%)

CMYK

cmyk(0%, 47%, 45%, 20%)

Oklch

oklch(64.4% 0.120 18.3)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CDC8A2

A2A7CD

Analogous

CDB3A2

CDC8A2

BDCDA2

Triadic

CDC8A2

A2CDC8

C8A2CD

Split-Comp.

CDC8A2

A2BDCD

B3A2CD

Tetradic

CDC8A2

A2CDB3

A2A7CD

CDA2BD

Contrast Matrix WCAG 2.1 Contrast

CDC8A2	67BDB4	54DBEE	974353	CC6D71
—	1.3 Fail	1.0 Fail	3.8 AA Large	2.1 Fail
1.3 Fail	—	1.3 Fail	2.9 Fail	1.6 Fail
1.0 Fail	1.3 Fail	—	3.9 AA Large	2.1 Fail
3.8 AA Large	2.9 Fail	3.9 AA Large	—	1.8 Fail
2.1 Fail	1.6 Fail	2.1 Fail	1.8 Fail	—

White BG

1.7Fail

2.2Fail

1.6Fail

6.5AA

3.5AA Large

Black BG

12.4AAA

9.5AAA

12.7AAA

3.2AA Large

6.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CBCBAB

8C8DB6

8E90E9

73724F

A3A270

Deuteranopia

CBCCAD

8781B7

877DE8

787E4E

A8AF70

Tritanopia

CDB2B4

6BB8B8

5BE6E5

934C4B

C76F6F

Achromatopsia

C5C5C5

A2A2A2

B5B5B5

5E5E5E

8A8A8A

Shades & Tints Shades & Tints

#CDC8A2

Dark

Light

#67BDB4

Dark

Light

#54DBEE

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cdc8a2;
  --color-2: #67bdb4;
  --color-3: #54dbee;
  --color-4: #974353;
  --color-5: #cc6d71;
}

SCSS

$color-1: #cdc8a2;
$color-2: #67bdb4;
$color-3: #54dbee;
$color-4: #974353;
$color-5: #cc6d71;

TAILWIND

colors: {
  'brand-1': '#cdc8a2',
  'brand-2': '#67bdb4',
  'brand-3': '#54dbee',
  'brand-4': '#974353',
  'brand-5': '#cc6d71',
}

RGB Array

[205, 200, 162], [103, 189, 180], [84, 219, 238], [151, 67, 83], [204, 109, 113]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CDC8A2, #67BDB4, #54DBEE, #974353, #CC6D71 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: #cdc8a2; --color-2: #67bdb4; --color-3: #54dbee; --color-4: #974353; --color-5: #cc6d71. 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