#F6F4C2 + #CFE6D2 + #CCC87A + #D1A05C + #C28782 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F6F4C2

Fresh Green · Bisque · Lemon Cream

HEX

#F6F4C2

RGB

rgb(246, 244, 194)

HSL

hsl(58, 74%, 86%)

HSB

hsb(58, 21%, 96%)

CMYK

cmyk(0%, 1%, 21%, 4%)

Oklch

oklch(95.6% 0.065 105.7)

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

#CFE6D2

Celadon · LightGray · Mint Green

HEX

#CFE6D2

RGB

rgb(207, 230, 210)

HSL

hsl(128, 32%, 86%)

HSB

hsb(128, 10%, 90%)

CMYK

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

Oklch

oklch(90.2% 0.036 149.1)

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

#CCC87A

Fresh Green · BurlyWood · Sunflower

HEX

#CCC87A

RGB

rgb(204, 200, 122)

HSL

hsl(57, 45%, 64%)

HSB

hsb(57, 40%, 80%)

CMYK

cmyk(0%, 2%, 40%, 20%)

Oklch

oklch(81.9% 0.100 105.9)

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

#D1A05C

Ginger · SandyBrown · Warm Sun

HEX

#D1A05C

RGB

rgb(209, 160, 92)

HSL

hsl(35, 56%, 59%)

HSB

hsb(35, 56%, 82%)

CMYK

cmyk(0%, 23%, 56%, 18%)

Oklch

oklch(73.7% 0.104 74.0)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#C28782

Peach Pink · DarkSalmon · Coral Red

HEX

#C28782

RGB

rgb(194, 135, 130)

HSL

hsl(5, 34%, 64%)

HSB

hsb(5, 33%, 76%)

CMYK

cmyk(0%, 30%, 33%, 24%)

Oklch

oklch(68.1% 0.073 24.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F6F4C2

C1C3F6

Analogous

F6DAC1

F6F4C2

DDF6C1

Triadic

F6F4C2

C1F6F4

F4C1F6

Split-Comp.

F6F4C2

C1DDF6

DAC1F6

Tetradic

F6F4C2

C1F6DA

C1C3F6

F6C1DD

Contrast Matrix WCAG 2.1 Contrast

F6F4C2	CFE6D2	CCC87A	D1A05C	C28782
—	1.2 Fail	1.5 Fail	2.1 Fail	2.6 Fail
1.2 Fail	—	1.3 Fail	1.8 Fail	2.2 Fail
1.5 Fail	1.3 Fail	—	1.4 Fail	1.7 Fail
2.1 Fail	1.8 Fail	1.4 Fail	—	1.3 Fail
2.6 Fail	2.2 Fail	1.7 Fail	1.3 Fail	—

White BG

1.1Fail

1.3Fail

1.7Fail

2.4Fail

3.0Fail

Black BG

18.6AAA

15.9AAA

12.1AAA

8.9AAA

7.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F5F5CE

D9D9D7

CACA8D

BCBB6C

A8A883

Deuteranopia

F5F5D1

D8D6D8

CBCB91

BFC270

ACB084

Tritanopia

F6D8DA

D0DBDC

CC9C9F

CF797C

BF8484

Achromatopsia

EFEFEF

DDDDDD

C0C0C0

A7A7A7

989898

Shades & Tints Shades & Tints

#F6F4C2

Dark

Light

#CFE6D2

Dark

Light

#CCC87A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f6f4c2;
  --color-2: #cfe6d2;
  --color-3: #ccc87a;
  --color-4: #d1a05c;
  --color-5: #c28782;
}

SCSS

$color-1: #f6f4c2;
$color-2: #cfe6d2;
$color-3: #ccc87a;
$color-4: #d1a05c;
$color-5: #c28782;

TAILWIND

colors: {
  'brand-1': '#f6f4c2',
  'brand-2': '#cfe6d2',
  'brand-3': '#ccc87a',
  'brand-4': '#d1a05c',
  'brand-5': '#c28782',
}

RGB Array

[246, 244, 194], [207, 230, 210], [204, 200, 122], [209, 160, 92], [194, 135, 130]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F6F4C2, #CFE6D2, #CCC87A, #D1A05C, #C28782 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: #f6f4c2; --color-2: #cfe6d2; --color-3: #ccc87a; --color-4: #d1a05c; --color-5: #c28782. 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