#C1DEC7 + #CDD0AF + #CCCF8A + #FC9F77 + #F77777 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C1DEC7

Celadon · LightGray · Mint Green

HEX

#C1DEC7

RGB

rgb(193, 222, 199)

HSL

hsl(132, 31%, 81%)

HSB

hsb(132, 13%, 87%)

CMYK

cmyk(13%, 0%, 10%, 13%)

Oklch

oklch(87.3% 0.044 151.5)

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

#CDD0AF

Fresh Green · Silver · Sunflower

HEX

#CDD0AF

RGB

rgb(205, 208, 175)

HSL

hsl(65, 26%, 75%)

HSB

hsb(65, 16%, 82%)

CMYK

cmyk(1%, 0%, 16%, 18%)

Oklch

oklch(84.7% 0.045 111.6)

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

#CCCF8A

Fresh Green · Tan · Sunflower

HEX

#CCCF8A

RGB

rgb(204, 207, 138)

HSL

hsl(63, 42%, 68%)

HSB

hsb(63, 33%, 81%)

CMYK

cmyk(1%, 0%, 33%, 19%)

Oklch

oklch(83.6% 0.090 110.3)

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

#FC9F77

Apricot · LightSalmon · Warm Sun

HEX

#FC9F77

RGB

rgb(252, 159, 119)

HSL

hsl(18, 96%, 73%)

HSB

hsb(18, 53%, 99%)

CMYK

cmyk(0%, 37%, 53%, 1%)

Oklch

oklch(78.8% 0.124 43.8)

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

#F77777

Peach Pink · Salmon · Coral Red

HEX

#F77777

RGB

rgb(247, 119, 119)

HSL

hsl(0, 89%, 72%)

HSB

hsb(0, 52%, 97%)

CMYK

cmyk(0%, 52%, 52%, 3%)

Oklch

oklch(71.9% 0.157 21.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C1DEC7

DEC0D8

Analogous

C9DEC0

C1DEC7

C0DED5

Triadic

C1DEC7

C6C0DE

DEC6C0

Split-Comp.

C1DEC7

D5C0DE

DEC0C9

Tetradic

C1DEC7

C0C9DE

DEC0D8

DED5C0

Contrast Matrix WCAG 2.1 Contrast

C1DEC7	CDD0AF	CCCF8A	FC9F77	F77777
—	1.1 Fail	1.1 Fail	1.4 Fail	1.8 Fail
1.1 Fail	—	1.0 Fail	1.3 Fail	1.7 Fail
1.1 Fail	1.0 Fail	—	1.2 Fail	1.6 Fail
1.4 Fail	1.3 Fail	1.2 Fail	—	1.3 Fail
1.8 Fail	1.7 Fail	1.6 Fail	1.3 Fail	—

White BG

1.4Fail

1.6Fail

2.0Fail

2.7Fail

Black BG

14.5AAA

13.2AAA

12.9AAA

10.4AAA

7.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CECECD

CECEB7

CDCD9B

D4D381

C0BE77

Deuteranopia

CCCACE

CECEB9

CDCD9F

D9E083

C7D177

Tritanopia

C2D1D2

CDBDBF

CCA8AB

F7888A

F17777

Achromatopsia

D3D3D3

CBCBCB

C6C6C6

B6B6B6

9D9D9D

Shades & Tints Shades & Tints

#C1DEC7

Dark

Light

#CDD0AF

Dark

Light

#CCCF8A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c1dec7;
  --color-2: #cdd0af;
  --color-3: #cccf8a;
  --color-4: #fc9f77;
  --color-5: #f77777;
}

SCSS

$color-1: #c1dec7;
$color-2: #cdd0af;
$color-3: #cccf8a;
$color-4: #fc9f77;
$color-5: #f77777;

TAILWIND

colors: {
  'brand-1': '#c1dec7',
  'brand-2': '#cdd0af',
  'brand-3': '#cccf8a',
  'brand-4': '#fc9f77',
  'brand-5': '#f77777',
}

RGB Array

[193, 222, 199], [205, 208, 175], [204, 207, 138], [252, 159, 119], [247, 119, 119]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C1DEC7, #CDD0AF, #CCCF8A, #FC9F77, #F77777 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: #c1dec7; --color-2: #cdd0af; --color-3: #cccf8a; --color-4: #fc9f77; --color-5: #f77777. 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