← Back to Editor

#C7D9D0 · #D4F478 · #FCB88D · #AB9B91 · #85817E

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C7D9D0

Jade · LightGray · Mint Green

HEX
#C7D9D0
RGB
rgb(199, 217, 208)
HSL
hsl(150, 19%, 82%)
HSB
hsb(150, 8%, 85%)
CMYK
cmyk(8%, 0%, 4%, 15%)
Oklch
oklch(86.9% 0.023 164.4)

Traditional「Jade」· Paint「Mint Green」· Creative Arctic Pool

#D4F478

Willow Green · Khaki · Apple Green

HEX
#D4F478
RGB
rgb(212, 244, 120)
HSL
hsl(75, 85%, 71%)
HSB
hsb(75, 51%, 96%)
CMYK
cmyk(13%, 0%, 51%, 4%)
Oklch
oklch(91.9% 0.155 121.5)

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

#FCB88D

Apricot · BurlyWood · Peach Orange

HEX
#FCB88D
RGB
rgb(252, 184, 141)
HSL
hsl(23, 95%, 77%)
HSB
hsb(23, 44%, 99%)
CMYK
cmyk(0%, 27%, 44%, 1%)
Oklch
oklch(83.6% 0.097 53.3)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#AB9B91

Apricot · DarkGray · Warm Sun

HEX
#AB9B91
RGB
rgb(171, 155, 145)
HSL
hsl(23, 13%, 62%)
HSB
hsb(23, 15%, 67%)
CMYK
cmyk(0%, 9%, 15%, 33%)
Oklch
oklch(70.1% 0.024 54.2)

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

#85817E

Ash · Gray · Warm Gray

HEX
#85817E
RGB
rgb(133, 129, 126)
HSL
hsl(26, 3%, 51%)
HSB
hsb(26, 5%, 52%)
CMYK
cmyk(0%, 3%, 5%, 48%)
Oklch
oklch(60.6% 0.007 59.6)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C7D9D0
DAC8D1

Analogous

C8DAC8
C7D9D0
C8DADA

Triadic

C7D9D0
D1C8DA
DAD1C8

Split-Comp.

C7D9D0
DAC8DA
DAC8C8

Tetradic

C7D9D0
C8C8DA
DAC8D1
DADAC8

Contrast Matrix WCAG 2.1 Contrast

C7D9D0
D4F478
FCB88D
AB9B91
85817E
—
1.2
Fail
1.2
Fail
1.8
Fail
2.6
Fail
1.2
Fail
—
1.4
Fail
2.2
Fail
3.1
AA Large
1.2
Fail
1.4
Fail
—
1.6
Fail
2.3
Fail
1.8
Fail
2.2
Fail
1.6
Fail
—
1.4
Fail
2.6
Fail
3.1
AA Large
2.3
Fail
1.4
Fail
—
White BG
1.5Fail
1.2Fail
1.7Fail
2.7Fail
3.9AA Large
Black BG
14.3AAA
17.0AAA
12.4AAA
7.8AAA
5.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CFCFD2
E2E296
DFDE97
A4A493
83837F

Deuteranopia

CECCD3
E0DE9D
E3E89A
A5A694
84847F

Tritanopia

C8D4D4
D6AEB3
F9A0A1
AA9596
857F7F

Achromatopsia

D3D3D3
DCDCDC
C7C7C7
9F9F9F
828282

Shades & Tints Shades & Tints

#C7D9D0

Dark
Light

#D4F478

Dark
Light

#FCB88D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c7d9d0;
  --color-2: #d4f478;
  --color-3: #fcb88d;
  --color-4: #ab9b91;
  --color-5: #85817e;
}

SCSS

$color-1: #c7d9d0;
$color-2: #d4f478;
$color-3: #fcb88d;
$color-4: #ab9b91;
$color-5: #85817e;

TAILWIND

colors: {
  'brand-1': '#c7d9d0',
  'brand-2': '#d4f478',
  'brand-3': '#fcb88d',
  'brand-4': '#ab9b91',
  'brand-5': '#85817e',
}

RGB Array

[199, 217, 208], [212, 244, 120], [252, 184, 141], [171, 155, 145], [133, 129, 126]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C7D9D0, #D4F478, #FCB88D, #AB9B91, #85817E 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: #c7d9d0; --color-2: #d4f478; --color-3: #fcb88d; --color-4: #ab9b91; --color-5: #85817e. 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