#F2D0A1 + #F5A682 + #E38E86 + #9E7277 + #AB8583 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F2D0A1

Goose Yellow · Wheat · Peach Orange

HEX

#F2D0A1

RGB

rgb(242, 208, 161)

HSL

hsl(35, 76%, 79%)

HSB

hsb(35, 33%, 95%)

CMYK

cmyk(0%, 14%, 33%, 5%)

Oklch

oklch(87.5% 0.072 75.5)

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

#F5A682

Apricot · LightSalmon · Warm Sun

HEX

#F5A682

RGB

rgb(245, 166, 130)

HSL

hsl(19, 85%, 74%)

HSB

hsb(19, 47%, 96%)

CMYK

cmyk(0%, 32%, 47%, 4%)

Oklch

oklch(79.4% 0.106 45.3)

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

#E38E86

Peach Pink · DarkSalmon · Coral Red

HEX

#E38E86

RGB

rgb(227, 142, 134)

HSL

hsl(5, 62%, 71%)

HSB

hsb(5, 41%, 89%)

CMYK

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

Oklch

oklch(73.2% 0.105 25.7)

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

#9E7277

Crimson · Gray · Passion Red

HEX

#9E7277

RGB

rgb(158, 114, 119)

HSL

hsl(353, 18%, 53%)

HSB

hsb(353, 28%, 62%)

CMYK

cmyk(0%, 28%, 25%, 38%)

Oklch

oklch(59.8% 0.056 11.3)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#AB8583

Crimson · Gray · Passion Red

HEX

#AB8583

RGB

rgb(171, 133, 131)

HSL

hsl(3, 19%, 59%)

HSB

hsb(3, 23%, 67%)

CMYK

cmyk(0%, 22%, 23%, 33%)

Oklch

oklch(65.2% 0.047 21.9)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2D0A1

A1C3F2

Analogous

F2A8A1

F2D0A1

EBF2A1

Triadic

F2D0A1

A1F2D0

D0A1F2

Split-Comp.

F2D0A1

A1EBF2

A8A1F2

Tetradic

F2D0A1

A1F2A8

A1C3F2

F2A1EB

Contrast Matrix WCAG 2.1 Contrast

F2D0A1	F5A682	E38E86	9E7277	AB8583
—	1.3 Fail	1.7 Fail	2.8 Fail	2.2 Fail
1.3 Fail	—	1.3 Fail	2.1 Fail	1.7 Fail
1.7 Fail	1.3 Fail	—	1.7 Fail	1.3 Fail
2.8 Fail	2.1 Fail	1.7 Fail	—	1.3 Fail
2.2 Fail	1.7 Fail	1.3 Fail	1.3 Fail	—

White BG

1.5Fail

2.0Fail

2.5Fail

4.1AA Large

3.3AA Large

Black BG

14.3AAA

10.7AAA

8.5AAA

5.1AA

6.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E3E3AC

D3D28B

BEBD88

8B8B76

9B9A83

Deuteranopia

E5E8AF

D7DD8D

C3C988

8E9176

9DA084

Tritanopia

F0B5B7

F19293

DF898A

9C7575

A98484

Achromatopsia

D5D5D5

BABABA

A7A7A7

808080

909090

Shades & Tints Shades & Tints

#F2D0A1

Dark

Light

#F5A682

Dark

Light

#E38E86

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2d0a1;
  --color-2: #f5a682;
  --color-3: #e38e86;
  --color-4: #9e7277;
  --color-5: #ab8583;
}

SCSS

$color-1: #f2d0a1;
$color-2: #f5a682;
$color-3: #e38e86;
$color-4: #9e7277;
$color-5: #ab8583;

TAILWIND

colors: {
  'brand-1': '#f2d0a1',
  'brand-2': '#f5a682',
  'brand-3': '#e38e86',
  'brand-4': '#9e7277',
  'brand-5': '#ab8583',
}

RGB Array

[242, 208, 161], [245, 166, 130], [227, 142, 134], [158, 114, 119], [171, 133, 131]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F2D0A1, #F5A682, #E38E86, #9E7277, #AB8583 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: #f2d0a1; --color-2: #f5a682; --color-3: #e38e86; --color-4: #9e7277; --color-5: #ab8583. 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