#AFD0B2 + #C7C6AA + #CFC2A8 + #DEC68B + #FAEDC4 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#AFD0B2

Celadon · Silver · Apple Green

HEX

#AFD0B2

RGB

rgb(175, 208, 178)

HSL

hsl(125, 26%, 75%)

HSB

hsb(125, 16%, 82%)

CMYK

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

Oklch

oklch(82.5% 0.054 147.6)

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

#C7C6AA

Fresh Green · Silver · Sunflower

HEX

#C7C6AA

RGB

rgb(199, 198, 170)

HSL

hsl(58, 21%, 72%)

HSB

hsb(58, 15%, 78%)

CMYK

cmyk(0%, 1%, 15%, 22%)

Oklch

oklch(82.0% 0.038 105.5)

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

#CFC2A8

Goose Yellow · Silver · Sunflower

HEX

#CFC2A8

RGB

rgb(207, 194, 168)

HSL

hsl(40, 29%, 74%)

HSB

hsb(40, 19%, 81%)

CMYK

cmyk(0%, 6%, 19%, 19%)

Oklch

oklch(81.8% 0.038 84.6)

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

#DEC68B

Goose Yellow · BurlyWood · Sunflower

HEX

#DEC68B

RGB

rgb(222, 198, 139)

HSL

hsl(43, 56%, 71%)

HSB

hsb(43, 37%, 87%)

CMYK

cmyk(0%, 11%, 37%, 13%)

Oklch

oklch(83.3% 0.081 88.4)

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

#FAEDC4

Goose Yellow · Bisque · Lemon Cream

HEX

#FAEDC4

RGB

rgb(250, 237, 196)

HSL

hsl(46, 84%, 87%)

HSB

hsb(46, 22%, 98%)

CMYK

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

Oklch

oklch(94.6% 0.055 92.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AFD0B2

D0AFCD

Analogous

BCD0AF

AFD0B2

AFD0C2

Triadic

AFD0B2

B1AFD0

D0B1AF

Split-Comp.

AFD0B2

C2AFD0

D0AFBC

Tetradic

AFD0B2

AFBCD0

D0AFCD

D0C2AF

Contrast Matrix WCAG 2.1 Contrast

AFD0B2	C7C6AA	CFC2A8	DEC68B	FAEDC4
—	1.0 Fail	1.0 Fail	1.0 Fail	1.4 Fail
1.0 Fail	—	1.0 Fail	1.0 Fail	1.5 Fail
1.0 Fail	1.0 Fail	—	1.1 Fail	1.5 Fail
1.0 Fail	1.0 Fail	1.1 Fail	—	1.4 Fail
1.4 Fail	1.5 Fail	1.5 Fail	1.4 Fail	—

White BG

1.7Fail

1.8Fail

1.7Fail

1.2Fail

Black BG

12.5AAA

12.1AAA

11.9AAA

12.6AAA

18.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BDBEB9

C7C7B1

C9C9AE

D4D399

F4F4CE

Deuteranopia

BBB9BB

C7C7B2

CACBB0

D5D79D

F5F6D0

Tritanopia

B1BFC0

C7B6B7

CEB3B4

DDA5A7

F9D6D7

Achromatopsia

C3C3C3

C6C6C6

ECECEC

Shades & Tints Shades & Tints

#AFD0B2

Dark

Light

#C7C6AA

Dark

Light

#CFC2A8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #afd0b2;
  --color-2: #c7c6aa;
  --color-3: #cfc2a8;
  --color-4: #dec68b;
  --color-5: #faedc4;
}

SCSS

$color-1: #afd0b2;
$color-2: #c7c6aa;
$color-3: #cfc2a8;
$color-4: #dec68b;
$color-5: #faedc4;

TAILWIND

colors: {
  'brand-1': '#afd0b2',
  'brand-2': '#c7c6aa',
  'brand-3': '#cfc2a8',
  'brand-4': '#dec68b',
  'brand-5': '#faedc4',
}

RGB Array

[175, 208, 178], [199, 198, 170], [207, 194, 168], [222, 198, 139], [250, 237, 196]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AFD0B2, #C7C6AA, #CFC2A8, #DEC68B, #FAEDC4 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: #afd0b2; --color-2: #c7c6aa; --color-3: #cfc2a8; --color-4: #dec68b; --color-5: #faedc4. 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