#C3E7D9 + #8DBEAB + #A68B83 + #F3E2C8 + #F2C9AD - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C3E7D9

Jade · LightGray · Mint Green

HEX

#C3E7D9

RGB

rgb(195, 231, 217)

HSL

hsl(157, 43%, 84%)

HSB

hsb(157, 16%, 91%)

CMYK

cmyk(16%, 0%, 6%, 9%)

Oklch

oklch(89.8% 0.042 169.8)

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

#8DBEAB

Jade · DarkSeaGreen · Apple Green

HEX

#8DBEAB

RGB

rgb(141, 190, 171)

HSL

hsl(157, 27%, 65%)

HSB

hsb(157, 26%, 75%)

CMYK

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

Oklch

oklch(76.1% 0.059 168.9)

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

#A68B83

Crimson · Gray · Passion Red

HEX

#A68B83

RGB

rgb(166, 139, 131)

HSL

hsl(14, 16%, 58%)

HSB

hsb(14, 21%, 65%)

CMYK

cmyk(0%, 16%, 21%, 35%)

Oklch

oklch(65.9% 0.035 37.1)

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

#F3E2C8

Goose Yellow · Bisque · Peach Orange

HEX

#F3E2C8

RGB

rgb(243, 226, 200)

HSL

hsl(36, 64%, 87%)

HSB

hsb(36, 18%, 95%)

CMYK

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

Oklch

oklch(92.0% 0.039 78.6)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#F2C9AD

Apricot · Wheat · Peach Orange

HEX

#F2C9AD

RGB

rgb(242, 201, 173)

HSL

hsl(24, 73%, 81%)

HSB

hsb(24, 29%, 95%)

CMYK

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

Oklch

oklch(86.4% 0.060 56.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C3E7D9

E8C5D2

Analogous

C5E8C9

C3E7D9

C5E4E8

Triadic

C3E7D9

DAC5E8

E8DAC5

Split-Comp.

C3E7D9

E8C5E4

E8C9C5

Tetradic

C3E7D9

C9C5E8

E8C5D2

E4E8C5

Contrast Matrix WCAG 2.1 Contrast

C3E7D9	8DBEAB	A68B83	F3E2C8	F2C9AD
—	1.6 Fail	2.4 Fail	1.0 Fail	1.1 Fail
1.6 Fail	—	1.5 Fail	1.6 Fail	1.4 Fail
2.4 Fail	1.5 Fail	—	2.5 Fail	2.1 Fail
1.0 Fail	1.6 Fail	2.5 Fail	—	1.2 Fail
1.1 Fail	1.4 Fail	2.1 Fail	1.2 Fail	—

White BG

1.3Fail

2.1Fail

3.2AA Large

1.3Fail

1.5Fail

Black BG

15.8AAA

10.1AAA

6.6AA

16.5AAA

13.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D3D3DC

A2A3B0

9A9A85

ECEBCE

E0E0B4

Deuteranopia

D1CEDD

9F9CB1

9C9E85

EDEED0

E3E6B5

Tritanopia

C5DFE0

8FB3B4

A58687

F2D3D4

F0B9BA

Achromatopsia

DBDBDB

ADADAD

929292

E4E4E4

D2D2D2

Shades & Tints Shades & Tints

#C3E7D9

Dark

Light

#8DBEAB

Dark

Light

#A68B83

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c3e7d9;
  --color-2: #8dbeab;
  --color-3: #a68b83;
  --color-4: #f3e2c8;
  --color-5: #f2c9ad;
}

SCSS

$color-1: #c3e7d9;
$color-2: #8dbeab;
$color-3: #a68b83;
$color-4: #f3e2c8;
$color-5: #f2c9ad;

TAILWIND

colors: {
  'brand-1': '#c3e7d9',
  'brand-2': '#8dbeab',
  'brand-3': '#a68b83',
  'brand-4': '#f3e2c8',
  'brand-5': '#f2c9ad',
}

RGB Array

[195, 231, 217], [141, 190, 171], [166, 139, 131], [243, 226, 200], [242, 201, 173]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C3E7D9, #8DBEAB, #A68B83, #F3E2C8, #F2C9AD 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: #c3e7d9; --color-2: #8dbeab; --color-3: #a68b83; --color-4: #f3e2c8; --color-5: #f2c9ad. 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