← Back to Editor

#F4C7C2 · #FCE8CD · #C7CC8A · #A3AB82 · #5C6E3C

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#F4C7C2

Peach Pink · Pink · Cherry Blossom

HEX
#F4C7C2
RGB
rgb(244, 199, 194)
HSL
hsl(6, 69%, 86%)
HSB
hsb(6, 20%, 96%)
CMYK
cmyk(0%, 18%, 20%, 4%)
Oklch
oklch(86.7% 0.052 25.6)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#FCE8CD

Goose Yellow · Bisque · Peach Orange

HEX
#FCE8CD
RGB
rgb(252, 232, 205)
HSL
hsl(34, 89%, 90%)
HSB
hsb(34, 19%, 99%)
CMYK
cmyk(0%, 8%, 19%, 1%)
Oklch
oklch(94.0% 0.042 75.4)

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

#C7CC8A

Fresh Green · Tan · Sunflower

HEX
#C7CC8A
RGB
rgb(199, 204, 138)
HSL
hsl(65, 39%, 67%)
HSB
hsb(65, 32%, 80%)
CMYK
cmyk(2%, 0%, 32%, 20%)
Oklch
oklch(82.6% 0.087 111.8)

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

#A3AB82

Grass Green · DarkSeaGreen · Olive Green

HEX
#A3AB82
RGB
rgb(163, 171, 130)
HSL
hsl(72, 20%, 59%)
HSB
hsb(72, 24%, 67%)
CMYK
cmyk(5%, 0%, 24%, 33%)
Oklch
oklch(72.4% 0.057 116.8)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#5C6E3C

Grass Green · DarkOliveGreen · Forest Green

HEX
#5C6E3C
RGB
rgb(92, 110, 60)
HSL
hsl(82, 29%, 33%)
HSB
hsb(82, 45%, 43%)
CMYK
cmyk(16%, 0%, 45%, 57%)
Oklch
oklch(51.1% 0.076 125.2)

Traditional「Grass Green」· Paint「Forest Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4C7C2
C3EFF4

Analogous

F4C3D6
F4C7C2
F4E0C3

Triadic

F4C7C2
C3F4C8
C8C3F4

Split-Comp.

F4C7C2
C3F4E0
C3D6F4

Tetradic

F4C7C2
D6F4C3
C3EFF4
E0C3F4

Contrast Matrix WCAG 2.1 Contrast

F4C7C2
FCE8CD
C7CC8A
A3AB82
5C6E3C
—
1.3
Fail
1.1
Fail
1.6
Fail
3.7
AA Large
1.3
Fail
—
1.4
Fail
2.0
Fail
4.7
AA
1.1
Fail
1.4
Fail
—
1.4
Fail
3.3
AA Large
1.6
Fail
2.0
Fail
1.4
Fail
—
2.3
Fail
3.7
AA Large
4.7
AA
3.3
AA Large
2.3
Fail
—
White BG
1.5Fail
1.2Fail
1.7Fail
2.4Fail
5.6AA
Black BG
13.8AAA
17.6AAA
12.4AAA
8.7AAA
3.8AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

E1E0C3
F3F3D4
C9C99A
A6A78C
646448

Deuteranopia

E3E6C3
F5F6D5
C9C89E
A6A58E
63614B

Tritanopia

F2C4C4
FBD9DA
C7A7A9
A39495
5D5254

Achromatopsia

D4D4D4
EBEBEB
C3C3C3
A4A4A4
636363

Shades & Tints Shades & Tints

#F4C7C2

Dark
Light

#FCE8CD

Dark
Light

#C7CC8A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4c7c2;
  --color-2: #fce8cd;
  --color-3: #c7cc8a;
  --color-4: #a3ab82;
  --color-5: #5c6e3c;
}

SCSS

$color-1: #f4c7c2;
$color-2: #fce8cd;
$color-3: #c7cc8a;
$color-4: #a3ab82;
$color-5: #5c6e3c;

TAILWIND

colors: {
  'brand-1': '#f4c7c2',
  'brand-2': '#fce8cd',
  'brand-3': '#c7cc8a',
  'brand-4': '#a3ab82',
  'brand-5': '#5c6e3c',
}

RGB Array

[244, 199, 194], [252, 232, 205], [199, 204, 138], [163, 171, 130], [92, 110, 60]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F4C7C2, #FCE8CD, #C7CC8A, #A3AB82, #5C6E3C is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #f4c7c2; --color-2: #fce8cd; --color-3: #c7cc8a; --color-4: #a3ab82; --color-5: #5c6e3c. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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