#C4CCA3 + #D1D9B4 + #DEE3C7 + #F9FAF7 + #FF6161 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C4CCA3

Willow Green · Silver · Apple Green

HEX

#C4CCA3

RGB

rgb(196, 204, 163)

HSL

hsl(72, 29%, 72%)

HSB

hsb(72, 20%, 80%)

CMYK

cmyk(4%, 0%, 20%, 20%)

Oklch

oklch(82.8% 0.056 116.6)

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

#D1D9B4

Willow Green · LightGray · Apple Green

HEX

#D1D9B4

RGB

rgb(209, 217, 180)

HSL

hsl(73, 33%, 78%)

HSB

hsb(73, 17%, 85%)

CMYK

cmyk(4%, 0%, 17%, 15%)

Oklch

oklch(87.0% 0.050 117.4)

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

#DEE3C7

Willow Green · LightGray · Mint Green

HEX

#DEE3C7

RGB

rgb(222, 227, 199)

HSL

hsl(71, 33%, 84%)

HSB

hsb(71, 12%, 89%)

CMYK

cmyk(2%, 0%, 12%, 11%)

Oklch

oklch(90.5% 0.038 115.4)

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

#F9FAF7

Willow Green · Snow · Mint Green

HEX

#F9FAF7

RGB

rgb(249, 250, 247)

HSL

hsl(80, 23%, 97%)

HSB

hsb(80, 1%, 98%)

CMYK

cmyk(0%, 0%, 1%, 2%)

Oklch

oklch(98.4% 0.004 121.6)

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

#FF6161

Peach Pink · Tomato · Coral Red

HEX

#FF6161

RGB

rgb(255, 97, 97)

HSL

hsl(0, 100%, 69%)

HSB

hsb(0, 62%, 100%)

CMYK

cmyk(0%, 62%, 62%, 0%)

Oklch

oklch(69.8% 0.193 23.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C4CCA3

ABA3CC

Analogous

CCC0A3

C4CCA3

AFCCA3

Triadic

C4CCA3

A3C4CC

CCA3C4

Split-Comp.

C4CCA3

A3AFCC

C0A3CC

Tetradic

C4CCA3

A3CCC0

ABA3CC

CCA3AF

Contrast Matrix WCAG 2.1 Contrast

C4CCA3	D1D9B4	DEE3C7	F9FAF7	FF6161
—	1.1 Fail	1.3 Fail	1.6 Fail	1.8 Fail
1.1 Fail	—	1.1 Fail	1.4 Fail	2.0 Fail
1.3 Fail	1.1 Fail	—	1.3 Fail	2.2 Fail
1.6 Fail	1.4 Fail	1.3 Fail	—	2.8 Fail
1.8 Fail	2.0 Fail	2.2 Fail	2.8 Fail	—

White BG

1.7Fail

1.5Fail

1.3Fail

1.0Fail

2.9Fail

Black BG

12.5AAA

14.3AAA

15.9AAA

20.0AAA

7.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C7C8AD

D4D5BD

E0E0CE

F9F9F8

BBB961

Deuteranopia

C7C6AF

D4D3BF

E0DFCF

F9F9F8

C4D061

Tritanopia

C4B5B6

D1C4C6

DED3D4

F9F8F8

F76161

Achromatopsia

C5C5C5

D2D2D2

DEDEDE

F9F9F9

909090

Shades & Tints Shades & Tints

#C4CCA3

Dark

Light

#D1D9B4

Dark

Light

#DEE3C7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c4cca3;
  --color-2: #d1d9b4;
  --color-3: #dee3c7;
  --color-4: #f9faf7;
  --color-5: #ff6161;
}

SCSS

$color-1: #c4cca3;
$color-2: #d1d9b4;
$color-3: #dee3c7;
$color-4: #f9faf7;
$color-5: #ff6161;

TAILWIND

colors: {
  'brand-1': '#c4cca3',
  'brand-2': '#d1d9b4',
  'brand-3': '#dee3c7',
  'brand-4': '#f9faf7',
  'brand-5': '#ff6161',
}

RGB Array

[196, 204, 163], [209, 217, 180], [222, 227, 199], [249, 250, 247], [255, 97, 97]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C4CCA3, #D1D9B4, #DEE3C7, #F9FAF7, #FF6161 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: #c4cca3; --color-2: #d1d9b4; --color-3: #dee3c7; --color-4: #f9faf7; --color-5: #ff6161. 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