#C1D8CC + #D1C6A6 + #D2B885 + #CB947F + #C16F81 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C1D8CC

Celadon · LightGray · Apple Green

HEX

#C1D8CC

RGB

rgb(193, 216, 204)

HSL

hsl(149, 23%, 80%)

HSB

hsb(149, 11%, 85%)

CMYK

cmyk(11%, 0%, 6%, 15%)

Oklch

oklch(86.2% 0.030 163.1)

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

#D1C6A6

Goose Yellow · Silver · Sunflower

HEX

#D1C6A6

RGB

rgb(209, 198, 166)

HSL

hsl(45, 32%, 74%)

HSB

hsb(45, 21%, 82%)

CMYK

cmyk(0%, 5%, 21%, 18%)

Oklch

oklch(82.7% 0.045 91.3)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#D2B885

Ginger · Tan · Sunflower

HEX

#D2B885

RGB

rgb(210, 184, 133)

HSL

hsl(40, 46%, 67%)

HSB

hsb(40, 37%, 82%)

CMYK

cmyk(0%, 12%, 37%, 18%)

Oklch

oklch(79.3% 0.073 83.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#CB947F

Apricot · DarkSalmon · Warm Sun

HEX

#CB947F

RGB

rgb(203, 148, 127)

HSL

hsl(17, 42%, 65%)

HSB

hsb(17, 37%, 80%)

CMYK

cmyk(0%, 27%, 37%, 20%)

Oklch

oklch(71.4% 0.073 41.8)

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

#C16F81

Crimson · LightCoral · Passion Red

HEX

#C16F81

RGB

rgb(193, 111, 129)

HSL

hsl(347, 40%, 60%)

HSB

hsb(347, 42%, 76%)

CMYK

cmyk(0%, 42%, 33%, 24%)

Oklch

oklch(63.7% 0.105 6.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C1D8CC

D8C0CC

Analogous

C1D8C0

C1D8CC

C0D8D7

Triadic

C1D8CC

CCC0D8

D8CCC0

Split-Comp.

C1D8CC

D7C0D8

D8C0C1

Tetradic

C1D8CC

C0C1D8

D8C0CC

D8D7C0

Contrast Matrix WCAG 2.1 Contrast

C1D8CC	D1C6A6	D2B885	CB947F	C16F81
—	1.1 Fail	1.3 Fail	1.7 Fail	2.4 Fail
1.1 Fail	—	1.1 Fail	1.5 Fail	2.1 Fail
1.3 Fail	1.1 Fail	—	1.4 Fail	1.9 Fail
1.7 Fail	1.5 Fail	1.4 Fail	—	1.4 Fail
2.4 Fail	2.1 Fail	1.9 Fail	1.4 Fail	—

White BG

1.5Fail

1.7Fail

1.9Fail

2.6Fail

3.6AA Large

Black BG

14.0AAA

12.3AAA

10.9AAA

8.1AAA

5.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CBCBCF

CCCCAE

C7C791

B3B384

9D9D7D

Deuteranopia

CAC8D0

CDCEB0

C8CA94

B6BB85

A2A87C

Tritanopia

C2D1D2

D0B4B5

D19B9D

C88889

BD7978

Achromatopsia

D0D0D0

C6C6C6

BABABA

A2A2A2

8A8A8A

Shades & Tints Shades & Tints

#C1D8CC

Dark

Light

#D1C6A6

Dark

Light

#D2B885

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c1d8cc;
  --color-2: #d1c6a6;
  --color-3: #d2b885;
  --color-4: #cb947f;
  --color-5: #c16f81;
}

SCSS

$color-1: #c1d8cc;
$color-2: #d1c6a6;
$color-3: #d2b885;
$color-4: #cb947f;
$color-5: #c16f81;

TAILWIND

colors: {
  'brand-1': '#c1d8cc',
  'brand-2': '#d1c6a6',
  'brand-3': '#d2b885',
  'brand-4': '#cb947f',
  'brand-5': '#c16f81',
}

RGB Array

[193, 216, 204], [209, 198, 166], [210, 184, 133], [203, 148, 127], [193, 111, 129]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C1D8CC, #D1C6A6, #D2B885, #CB947F, #C16F81 is ideal for: health products, baby brands, fresh-style blogs. 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: #c1d8cc; --color-2: #d1c6a6; --color-3: #d2b885; --color-4: #cb947f; --color-5: #c16f81. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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