#FD3E5F + #DC6F74 + #BAA28A + #A8C197 + #B7D28D - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FD3E5F

Peach Pink · Tomato · Coral Red

HEX

#FD3E5F

RGB

rgb(253, 62, 95)

HSL

hsl(350, 98%, 62%)

HSB

hsb(350, 75%, 99%)

CMYK

cmyk(0%, 75%, 62%, 1%)

Oklch

oklch(65.9% 0.224 16.8)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#DC6F74

Peach Pink · LightCoral · Coral Red

HEX

#DC6F74

RGB

rgb(220, 111, 116)

HSL

hsl(357, 61%, 65%)

HSB

hsb(357, 50%, 86%)

CMYK

cmyk(0%, 50%, 47%, 14%)

Oklch

oklch(67.0% 0.136 18.6)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#BAA28A

Ginger · Tan · Warm Sun

HEX

#BAA28A

RGB

rgb(186, 162, 138)

HSL

hsl(30, 26%, 64%)

HSB

hsb(30, 26%, 73%)

CMYK

cmyk(0%, 13%, 26%, 27%)

Oklch

oklch(72.7% 0.044 67.0)

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

#A8C197

Celadon · DarkSeaGreen · Apple Green

HEX

#A8C197

RGB

rgb(168, 193, 151)

HSL

hsl(96, 25%, 67%)

HSB

hsb(96, 22%, 76%)

CMYK

cmyk(13%, 0%, 22%, 24%)

Oklch

oklch(78.1% 0.064 132.8)

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

#B7D28D

Willow Green · Tan · Apple Green

HEX

#B7D28D

RGB

rgb(183, 210, 141)

HSL

hsl(83, 43%, 69%)

HSB

hsb(83, 33%, 82%)

CMYK

cmyk(13%, 0%, 33%, 18%)

Oklch

oklch(82.7% 0.096 125.8)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FD3E5F

3FFDDD

Analogous

FD3FBE

FD3E5F

FD7E3F

Triadic

FD3E5F

5FFD3F

3F5FFD

Split-Comp.

FD3E5F

3FFD7E

3FBEFD

Tetradic

FD3E5F

BEFD3F

3FFDDD

7E3FFD

Contrast Matrix WCAG 2.1 Contrast

FD3E5F	DC6F74	BAA28A	A8C197	B7D28D
—	1.1 Fail	1.4 Fail	1.8 Fail	2.1 Fail
1.1 Fail	—	1.3 Fail	1.6 Fail	1.9 Fail
1.4 Fail	1.3 Fail	—	1.2 Fail	1.5 Fail
1.8 Fail	1.6 Fail	1.2 Fail	—	1.2 Fail
2.1 Fail	1.9 Fail	1.5 Fail	1.2 Fail	—

White BG

3.5AA Large

3.2AA Large

2.4Fail

2.0Fail

1.7Fail

Black BG

6.0AA

6.6AA

8.6AAA

10.7AAA

12.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AAA957

ADAC73

B0AF90

B3B3A1

C3C39E

Deuteranopia

B5C455

B3BB72

B1B391

B1B0A4

C1BFA2

Tritanopia

F3514F

D77272

B99495

A9A9AB

B8ABAE

Achromatopsia

7B7B7B

909090

A6A6A6

B5B5B5

C2C2C2

Shades & Tints Shades & Tints

#FD3E5F

Dark

Light

#DC6F74

Dark

Light

#BAA28A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fd3e5f;
  --color-2: #dc6f74;
  --color-3: #baa28a;
  --color-4: #a8c197;
  --color-5: #b7d28d;
}

SCSS

$color-1: #fd3e5f;
$color-2: #dc6f74;
$color-3: #baa28a;
$color-4: #a8c197;
$color-5: #b7d28d;

TAILWIND

colors: {
  'brand-1': '#fd3e5f',
  'brand-2': '#dc6f74',
  'brand-3': '#baa28a',
  'brand-4': '#a8c197',
  'brand-5': '#b7d28d',
}

RGB Array

[253, 62, 95], [220, 111, 116], [186, 162, 138], [168, 193, 151], [183, 210, 141]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FD3E5F, #DC6F74, #BAA28A, #A8C197, #B7D28D 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: #fd3e5f; --color-2: #dc6f74; --color-3: #baa28a; --color-4: #a8c197; --color-5: #b7d28d. 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