← Back to Editor

#AFD0C5 · #FFFDD4 · #F18D76 · #51422D · #E3C297

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#AFD0C5

Jade · Silver · Lake Green

HEX
#AFD0C5
RGB
rgb(175, 208, 197)
HSL
hsl(160, 26%, 75%)
HSB
hsb(160, 16%, 82%)
CMYK
cmyk(16%, 0%, 5%, 18%)
Oklch
oklch(83.0% 0.038 173.2)

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

#FFFDD4

Fresh Green · LightYellow · Lemon Cream

HEX
#FFFDD4
RGB
rgb(255, 253, 212)
HSL
hsl(57, 100%, 92%)
HSB
hsb(57, 17%, 100%)
CMYK
cmyk(0%, 1%, 17%, 0%)
Oklch
oklch(98.5% 0.053 105.0)

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

#F18D76

Peach Pink · DarkSalmon · Coral Red

HEX
#F18D76
RGB
rgb(241, 141, 118)
HSL
hsl(11, 81%, 70%)
HSB
hsb(11, 51%, 95%)
CMYK
cmyk(0%, 41%, 51%, 5%)
Oklch
oklch(74.4% 0.127 33.9)

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

#51422D

Ochre · DarkOliveGreen · Cinnamon

HEX
#51422D
RGB
rgb(81, 66, 45)
HSL
hsl(35, 29%, 25%)
HSB
hsb(35, 44%, 32%)
CMYK
cmyk(0%, 19%, 44%, 68%)
Oklch
oklch(38.9% 0.039 75.5)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

#E3C297

Goose Yellow · BurlyWood · Warm Sun

HEX
#E3C297
RGB
rgb(227, 194, 151)
HSL
hsl(34, 58%, 74%)
HSB
hsb(34, 33%, 89%)
CMYK
cmyk(0%, 15%, 33%, 11%)
Oklch
oklch(83.2% 0.068 74.0)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AFD0C5
D0AFBA

Analogous

AFD0B4
AFD0C5
AFCAD0

Triadic

AFD0C5
C5AFD0
D0C5AF

Split-Comp.

AFD0C5
D0AFCA
D0B4AF

Tetradic

AFD0C5
B4AFD0
D0AFBA
CAD0AF

Contrast Matrix WCAG 2.1 Contrast

AFD0C5
FFFDD4
F18D76
51422D
E3C297
—
1.6
Fail
1.4
Fail
5.8
AA
1.0
Fail
1.6
Fail
—
2.3
Fail
9.3
AAA
1.6
Fail
1.4
Fail
2.3
Fail
—
4.1
AA Large
1.4
Fail
5.8
AA
9.3
AAA
4.1
AA Large
—
5.7
AA
1.0
Fail
1.6
Fail
1.4
Fail
5.7
AA
—
White BG
1.7Fail
1.0Fail
2.4Fail
9.7AAA
1.7Fail
Black BG
12.7AAA
20.3AAA
8.8AAA
2.2Fail
12.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BDBEC8
FEFEDE
C6C57C
4B4A32
D5D4A1

Deuteranopia

BBB9C8
FEFEE0
CCD37D
4B4D33
D7D9A4

Tritanopia

B1CACA
FFE6E7
EC8081
503637
E1AAAB

Achromatopsia

C5C5C5
F9F9F9
A8A8A8
444444
C7C7C7

Shades & Tints Shades & Tints

#AFD0C5

Dark
Light

#FFFDD4

Dark
Light

#F18D76

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #afd0c5;
  --color-2: #fffdd4;
  --color-3: #f18d76;
  --color-4: #51422d;
  --color-5: #e3c297;
}

SCSS

$color-1: #afd0c5;
$color-2: #fffdd4;
$color-3: #f18d76;
$color-4: #51422d;
$color-5: #e3c297;

TAILWIND

colors: {
  'brand-1': '#afd0c5',
  'brand-2': '#fffdd4',
  'brand-3': '#f18d76',
  'brand-4': '#51422d',
  'brand-5': '#e3c297',
}

RGB Array

[175, 208, 197], [255, 253, 212], [241, 141, 118], [81, 66, 45], [227, 194, 151]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AFD0C5, #FFFDD4, #F18D76, #51422D, #E3C297 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: #afd0c5; --color-2: #fffdd4; --color-3: #f18d76; --color-4: #51422d; --color-5: #e3c297. 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