#C7D6C5 + #9EC487 + #C7E7ED + #EEF2EB + #F7F0AD - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C7D6C5

Celadon · LightGray · Mint Green

HEX

#C7D6C5

RGB

rgb(199, 214, 197)

HSL

hsl(113, 17%, 81%)

HSB

hsb(113, 8%, 84%)

CMYK

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

Oklch

oklch(86.0% 0.028 142.0)

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

#9EC487

Celadon · DarkSeaGreen · Apple Green

HEX

#9EC487

RGB

rgb(158, 196, 135)

HSL

hsl(97, 34%, 65%)

HSB

hsb(97, 31%, 77%)

CMYK

cmyk(19%, 0%, 31%, 23%)

Oklch

oklch(77.7% 0.093 134.1)

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

#C7E7ED

Sky Blue · LightBlue · Glacier Blue

HEX

#C7E7ED

RGB

rgb(199, 231, 237)

HSL

hsl(189, 51%, 85%)

HSB

hsb(189, 16%, 93%)

CMYK

cmyk(16%, 3%, 0%, 7%)

Oklch

oklch(90.7% 0.035 210.2)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#EEF2EB

Celadon · Linen · Mint Green

HEX

#EEF2EB

RGB

rgb(238, 242, 235)

HSL

hsl(94, 21%, 94%)

HSB

hsb(94, 3%, 95%)

CMYK

cmyk(2%, 0%, 3%, 5%)

Oklch

oklch(95.6% 0.010 131.4)

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

#F7F0AD

Fresh Green · Wheat · Lemon Cream

HEX

#F7F0AD

RGB

rgb(247, 240, 173)

HSL

hsl(54, 82%, 82%)

HSB

hsb(54, 30%, 97%)

CMYK

cmyk(0%, 3%, 30%, 3%)

Oklch

oklch(94.5% 0.085 102.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C7D6C5

D5C6D7

Analogous

D0D7C6

C7D6C5

C6D7CD

Triadic

C7D6C5

C6C8D7

D7C6C8

Split-Comp.

C7D6C5

CDC6D7

D7C6D0

Tetradic

C7D6C5

C6D0D7

D5C6D7

D7CDC6

Contrast Matrix WCAG 2.1 Contrast

C7D6C5	9EC487	C7E7ED	EEF2EB	F7F0AD
—	1.3 Fail	1.2 Fail	1.3 Fail	1.3 Fail
1.3 Fail	—	1.5 Fail	1.7 Fail	1.7 Fail
1.2 Fail	1.5 Fail	—	1.2 Fail	1.1 Fail
1.3 Fail	1.7 Fail	1.2 Fail	—	1.0 Fail
1.3 Fail	1.7 Fail	1.1 Fail	1.0 Fail	—

White BG

1.5Fail

2.0Fail

1.3Fail

1.1Fail

1.2Fail

Black BG

13.9AAA

10.7AAA

16.1AAA

18.5AAA

18.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CDCEC9

AEAF96

D5D5EC

F0F0ED

F4F4BD

Deuteranopia

CDCCCA

ACA999

D3D1EB

F0EFED

F4F5C1

Tritanopia

C8CCCD

A0A1A4

C9EAEA

EEEEEE

F7CACD

Achromatopsia

D0D0D0

B2B2B2

DEDEDE

F0F0F0

EAEAEA

Shades & Tints Shades & Tints

#C7D6C5

Dark

Light

#9EC487

Dark

Light

#C7E7ED

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c7d6c5;
  --color-2: #9ec487;
  --color-3: #c7e7ed;
  --color-4: #eef2eb;
  --color-5: #f7f0ad;
}

SCSS

$color-1: #c7d6c5;
$color-2: #9ec487;
$color-3: #c7e7ed;
$color-4: #eef2eb;
$color-5: #f7f0ad;

TAILWIND

colors: {
  'brand-1': '#c7d6c5',
  'brand-2': '#9ec487',
  'brand-3': '#c7e7ed',
  'brand-4': '#eef2eb',
  'brand-5': '#f7f0ad',
}

RGB Array

[199, 214, 197], [158, 196, 135], [199, 231, 237], [238, 242, 235], [247, 240, 173]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C7D6C5, #9EC487, #C7E7ED, #EEF2EB, #F7F0AD 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: #c7d6c5; --color-2: #9ec487; --color-3: #c7e7ed; --color-4: #eef2eb; --color-5: #f7f0ad. 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