#F5718F + #7D977F + #98BE9B + #BBDFBE + #D9F8DB - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F5718F

Peach Pink · LightCoral · Coral Red

HEX

#F5718F

RGB

rgb(245, 113, 143)

HSL

hsl(346, 87%, 70%)

HSB

hsb(346, 54%, 96%)

CMYK

cmyk(0%, 54%, 42%, 4%)

Oklch

oklch(71.3% 0.164 8.0)

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

#7D977F

Celadon · Gray · Olive Green

HEX

#7D977F

RGB

rgb(125, 151, 127)

HSL

hsl(125, 11%, 54%)

HSB

hsb(125, 17%, 59%)

CMYK

cmyk(17%, 0%, 16%, 41%)

Oklch

oklch(64.9% 0.046 147.1)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#98BE9B

Celadon · DarkSeaGreen · Apple Green

HEX

#98BE9B

RGB

rgb(152, 190, 155)

HSL

hsl(125, 23%, 67%)

HSB

hsb(125, 20%, 75%)

CMYK

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

Oklch

oklch(76.4% 0.064 147.0)

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

#BBDFBE

Celadon · Silver · Apple Green

HEX

#BBDFBE

RGB

rgb(187, 223, 190)

HSL

hsl(125, 36%, 80%)

HSB

hsb(125, 16%, 87%)

CMYK

cmyk(16%, 0%, 15%, 13%)

Oklch

oklch(86.9% 0.059 147.3)

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

#D9F8DB

Emerald · Beige · Mint Green

HEX

#D9F8DB

RGB

rgb(217, 248, 219)

HSL

hsl(124, 69%, 91%)

HSB

hsb(124, 13%, 97%)

CMYK

cmyk(13%, 0%, 12%, 3%)

Oklch

oklch(94.9% 0.050 146.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5718F

70F5D6

Analogous

F570D2

F5718F

F59370

Triadic

F5718F

8FF570

708FF5

Split-Comp.

F5718F

70F593

70D2F5

Tetradic

F5718F

D2F570

70F5D6

9370F5

Contrast Matrix WCAG 2.1 Contrast

F5718F	7D977F	98BE9B	BBDFBE	D9F8DB
—	1.2 Fail	1.3 Fail	1.9 Fail	2.4 Fail
1.2 Fail	—	1.5 Fail	2.2 Fail	2.8 Fail
1.3 Fail	1.5 Fail	—	1.4 Fail	1.8 Fail
1.9 Fail	2.2 Fail	1.4 Fail	—	1.3 Fail
2.4 Fail	2.8 Fail	1.8 Fail	1.3 Fail	—

White BG

2.7Fail

3.2AA Large

2.1Fail

1.5Fail

1.1Fail

Black BG

7.6AAA

6.6AA

10.2AAA

14.4AAA

18.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BCBB88

888885

A8A9A3

CBCBC6

E6E7E2

Deuteranopia

C4CD86

878586

A6A3A6

C9C6C8

E5E2E4

Tritanopia

EE8281

7E898A

9AAAAC

BDCCCE

DBE8E9

Achromatopsia

9C9C9C

8C8C8C

AFAFAF

D0D0D0

EBEBEB

Shades & Tints Shades & Tints

#F5718F

Dark

Light

#7D977F

Dark

Light

#98BE9B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5718f;
  --color-2: #7d977f;
  --color-3: #98be9b;
  --color-4: #bbdfbe;
  --color-5: #d9f8db;
}

SCSS

$color-1: #f5718f;
$color-2: #7d977f;
$color-3: #98be9b;
$color-4: #bbdfbe;
$color-5: #d9f8db;

TAILWIND

colors: {
  'brand-1': '#f5718f',
  'brand-2': '#7d977f',
  'brand-3': '#98be9b',
  'brand-4': '#bbdfbe',
  'brand-5': '#d9f8db',
}

RGB Array

[245, 113, 143], [125, 151, 127], [152, 190, 155], [187, 223, 190], [217, 248, 219]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F5718F, #7D977F, #98BE9B, #BBDFBE, #D9F8DB 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: #f5718f; --color-2: #7d977f; --color-3: #98be9b; --color-4: #bbdfbe; --color-5: #d9f8db. 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