#C3F7DE + #ACE6D1 + #E9C981 + #D4CB97 + #76718A - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C3F7DE

Jade · LightBlue · Mint Green

HEX

#C3F7DE

RGB

rgb(195, 247, 222)

HSL

hsl(151, 76%, 87%)

HSB

hsb(151, 21%, 97%)

CMYK

cmyk(21%, 0%, 10%, 3%)

Oklch

oklch(93.3% 0.063 164.2)

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

#ACE6D1

Jade · LightBlue · Apple Green

HEX

#ACE6D1

RGB

rgb(172, 230, 209)

HSL

hsl(158, 54%, 79%)

HSB

hsb(158, 25%, 90%)

CMYK

cmyk(25%, 0%, 9%, 10%)

Oklch

oklch(87.9% 0.066 170.4)

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

#E9C981

Goose Yellow · BurlyWood · Sunflower

HEX

#E9C981

RGB

rgb(233, 201, 129)

HSL

hsl(42, 70%, 71%)

HSB

hsb(42, 45%, 91%)

CMYK

cmyk(0%, 14%, 45%, 9%)

Oklch

oklch(84.7% 0.098 86.4)

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

#D4CB97

Fresh Green · Tan · Sunflower

HEX

#D4CB97

RGB

rgb(212, 203, 151)

HSL

hsl(51, 41%, 71%)

HSB

hsb(51, 29%, 83%)

CMYK

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

Oklch

oklch(83.7% 0.069 99.4)

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

#76718A

Deep Indigo · SlateGray · Navy Blue

HEX

#76718A

RGB

rgb(118, 113, 138)

HSL

hsl(252, 10%, 49%)

HSB

hsb(252, 18%, 54%)

CMYK

cmyk(14%, 18%, 0%, 46%)

Oklch

oklch(56.2% 0.039 294.3)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C3F7DE

F7C5DD

Analogous

C5F7C5

C3F7DE

C5F6F7

Triadic

C3F7DE

DFC5F7

F7DFC5

Split-Comp.

C3F7DE

F7C5F6

F7C5C5

Tetradic

C3F7DE

C5C5F7

F7C5DD

F6F7C5

Contrast Matrix WCAG 2.1 Contrast

C3F7DE	ACE6D1	E9C981	D4CB97	76718A
—	1.2 Fail	1.3 Fail	1.4 Fail	3.9 AA Large
1.2 Fail	—	1.1 Fail	1.2 Fail	3.3 AA Large
1.3 Fail	1.1 Fail	—	1.0 Fail	2.9 Fail
1.4 Fail	1.2 Fail	1.0 Fail	—	2.8 Fail
3.9 AA Large	3.3 AA Large	2.9 Fail	2.8 Fail	—

White BG

1.2Fail

1.4Fail

1.6Fail

4.7AA

Black BG

17.7AAA

15.0AAA

13.1AAA

12.8AAA

4.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

DADAE4

C5C6D6

DBDB92

D0D0A4

747484

Deuteranopia

D7D3E5

C2BDD7

DDDF97

D1D1A7

747583

Tritanopia

C6E9EA

AFDADB

E7A0A3

D4AEB0

767F7E

Achromatopsia

E5E5E5

D2D2D2

CACACA

C8C8C8

757575

Shades & Tints Shades & Tints

#C3F7DE

Dark

Light

#ACE6D1

Dark

Light

#E9C981

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c3f7de;
  --color-2: #ace6d1;
  --color-3: #e9c981;
  --color-4: #d4cb97;
  --color-5: #76718a;
}

SCSS

$color-1: #c3f7de;
$color-2: #ace6d1;
$color-3: #e9c981;
$color-4: #d4cb97;
$color-5: #76718a;

TAILWIND

colors: {
  'brand-1': '#c3f7de',
  'brand-2': '#ace6d1',
  'brand-3': '#e9c981',
  'brand-4': '#d4cb97',
  'brand-5': '#76718a',
}

RGB Array

[195, 247, 222], [172, 230, 209], [233, 201, 129], [212, 203, 151], [118, 113, 138]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C3F7DE, #ACE6D1, #E9C981, #D4CB97, #76718A 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: #c3f7de; --color-2: #ace6d1; --color-3: #e9c981; --color-4: #d4cb97; --color-5: #76718a. 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