#FF3D6A + #F97F7F + #AFE6BB + #78B8AE + #8A9C90 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FF3D6A

Peach Pink · Tomato · Coral Red

HEX

#FF3D6A

RGB

rgb(255, 61, 106)

HSL

hsl(346, 100%, 62%)

HSB

hsb(346, 76%, 100%)

CMYK

cmyk(0%, 76%, 58%, 0%)

Oklch

oklch(66.4% 0.227 13.2)

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

#F97F7F

Peach Pink · LightCoral · Coral Red

HEX

#F97F7F

RGB

rgb(249, 127, 127)

HSL

hsl(0, 91%, 74%)

HSB

hsb(0, 49%, 98%)

CMYK

cmyk(0%, 49%, 49%, 2%)

Oklch

oklch(73.5% 0.149 21.4)

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

#AFE6BB

Emerald · Silver · Apple Green

HEX

#AFE6BB

RGB

rgb(175, 230, 187)

HSL

hsl(133, 52%, 79%)

HSB

hsb(133, 24%, 90%)

CMYK

cmyk(24%, 0%, 19%, 10%)

Oklch

oklch(87.6% 0.082 151.1)

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

#78B8AE

Mineral Blue · MediumAquaMarine · Lake Green

HEX

#78B8AE

RGB

rgb(120, 184, 174)

HSL

hsl(171, 31%, 60%)

HSB

hsb(171, 35%, 72%)

CMYK

cmyk(35%, 0%, 5%, 28%)

Oklch

oklch(73.6% 0.067 183.5)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#8A9C90

Celadon · LightSlateGray · Silver Sand

HEX

#8A9C90

RGB

rgb(138, 156, 144)

HSL

hsl(140, 8%, 58%)

HSB

hsb(140, 12%, 61%)

CMYK

cmyk(12%, 0%, 8%, 39%)

Oklch

oklch(67.5% 0.027 156.4)

Traditional「Celadon」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF3D6A

3DFFD2

Analogous

FF3DCB

FF3D6A

FF713D

Triadic

FF3D6A

6AFF3D

3D6AFF

Split-Comp.

FF3D6A

3DFF71

3DCBFF

Tetradic

FF3D6A

CBFF3D

3DFFD2

713DFF

Contrast Matrix WCAG 2.1 Contrast

FF3D6A	F97F7F	AFE6BB	78B8AE	8A9C90
—	1.4 Fail	2.4 Fail	1.5 Fail	1.2 Fail
1.4 Fail	—	1.8 Fail	1.1 Fail	1.2 Fail
2.4 Fail	1.8 Fail	—	1.6 Fail	2.1 Fail
1.5 Fail	1.1 Fail	1.6 Fail	—	1.3 Fail
1.2 Fail	1.2 Fail	2.1 Fail	1.3 Fail	—

White BG

3.4AA Large

2.5Fail

1.4Fail

2.3Fail

2.9Fail

Black BG

6.1AA

8.4AAA

14.9AAA

9.3AAA

7.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ABA95F

C4C37F

C7C7C5

9494B0

929293

Deuteranopia

B6C55C

CBD47F

C4C0C8

908BB1

918F94

Tritanopia

F55755

F37F7F

B2CECF

7BB2B3

8B9596

Achromatopsia

7C7C7C

A3A3A3

D1D1D1

A4A4A4

959595

Shades & Tints Shades & Tints

#FF3D6A

Dark

Light

#F97F7F

Dark

Light

#AFE6BB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff3d6a;
  --color-2: #f97f7f;
  --color-3: #afe6bb;
  --color-4: #78b8ae;
  --color-5: #8a9c90;
}

SCSS

$color-1: #ff3d6a;
$color-2: #f97f7f;
$color-3: #afe6bb;
$color-4: #78b8ae;
$color-5: #8a9c90;

TAILWIND

colors: {
  'brand-1': '#ff3d6a',
  'brand-2': '#f97f7f',
  'brand-3': '#afe6bb',
  'brand-4': '#78b8ae',
  'brand-5': '#8a9c90',
}

RGB Array

[255, 61, 106], [249, 127, 127], [175, 230, 187], [120, 184, 174], [138, 156, 144]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF3D6A, #F97F7F, #AFE6BB, #78B8AE, #8A9C90 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: #ff3d6a; --color-2: #f97f7f; --color-3: #afe6bb; --color-4: #78b8ae; --color-5: #8a9c90. 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