#F18264 + #AB857A + #CC988A + #F0D7AE + #E4C380 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F18264

Peach Pink · Salmon · Coral Red

HEX

#F18264

RGB

rgb(241, 130, 100)

HSL

hsl(13, 83%, 67%)

HSB

hsb(13, 59%, 95%)

CMYK

cmyk(0%, 46%, 59%, 5%)

Oklch

oklch(72.4% 0.143 36.1)

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

#AB857A

Crimson · Gray · Passion Red

HEX

#AB857A

RGB

rgb(171, 133, 122)

HSL

hsl(13, 23%, 57%)

HSB

hsb(13, 29%, 67%)

CMYK

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

Oklch

oklch(65.0% 0.050 36.7)

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

#CC988A

Peach Pink · Tan · Coral Red

HEX

#CC988A

RGB

rgb(204, 152, 138)

HSL

hsl(13, 39%, 67%)

HSB

hsb(13, 32%, 80%)

CMYK

cmyk(0%, 25%, 32%, 20%)

Oklch

oklch(72.5% 0.066 35.6)

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

#F0D7AE

Goose Yellow · Wheat · Peach Orange

HEX

#F0D7AE

RGB

rgb(240, 215, 174)

HSL

hsl(37, 69%, 81%)

HSB

hsb(37, 27%, 94%)

CMYK

cmyk(0%, 10%, 27%, 6%)

Oklch

oklch(89.0% 0.060 80.0)

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

#E4C380

Ginger · BurlyWood · Sunflower

HEX

#E4C380

RGB

rgb(228, 195, 128)

HSL

hsl(40, 65%, 70%)

HSB

hsb(40, 44%, 89%)

CMYK

cmyk(0%, 14%, 44%, 11%)

Oklch

oklch(83.1% 0.093 84.3)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F18264

65D2F1

Analogous

F1658D

F18264

F1C965

Triadic

F18264

65F183

8365F1

Split-Comp.

F18264

65F1C9

658DF1

Tetradic

F18264

8DF165

65D2F1

C965F1

Contrast Matrix WCAG 2.1 Contrast

F18264	AB857A	CC988A	F0D7AE	E4C380
—	1.3 Fail	1.0 Fail	1.9 Fail	1.5 Fail
1.3 Fail	—	1.3 Fail	2.4 Fail	1.9 Fail
1.0 Fail	1.3 Fail	—	1.8 Fail	1.5 Fail
1.9 Fail	2.4 Fail	1.8 Fail	—	1.2 Fail
1.5 Fail	1.9 Fail	1.5 Fail	1.2 Fail	—

White BG

2.6Fail

3.3AA Large

2.5Fail

1.4Fail

1.7Fail

Black BG

8.1AAA

6.4AA

8.4AAA

15.0AAA

12.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C1C06B

9B9A7D

B5B58D

E5E5B8

D6D590

Deuteranopia

C7D06D

9DA07D

B9BC8E

E7E9BA

D8DA94

Tritanopia

EB7172

A97F7F

C99091

EFC0C1

E29DA0

Achromatopsia

A0A0A0

8F8F8F

A6A6A6

DADADA

C5C5C5

Shades & Tints Shades & Tints

#F18264

Dark

Light

#AB857A

Dark

Light

#CC988A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f18264;
  --color-2: #ab857a;
  --color-3: #cc988a;
  --color-4: #f0d7ae;
  --color-5: #e4c380;
}

SCSS

$color-1: #f18264;
$color-2: #ab857a;
$color-3: #cc988a;
$color-4: #f0d7ae;
$color-5: #e4c380;

TAILWIND

colors: {
  'brand-1': '#f18264',
  'brand-2': '#ab857a',
  'brand-3': '#cc988a',
  'brand-4': '#f0d7ae',
  'brand-5': '#e4c380',
}

RGB Array

[241, 130, 100], [171, 133, 122], [204, 152, 138], [240, 215, 174], [228, 195, 128]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F18264, #AB857A, #CC988A, #F0D7AE, #E4C380 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: #f18264; --color-2: #ab857a; --color-3: #cc988a; --color-4: #f0d7ae; --color-5: #e4c380. 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