#F74F5F + #B9ADD3 + #66D9CC + #C6E4BC + #DCEF8D - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F74F5F

Peach Pink · Tomato · Coral Red

HEX

#F74F5F

RGB

rgb(247, 79, 95)

HSL

hsl(354, 91%, 64%)

HSB

hsb(354, 68%, 97%)

CMYK

cmyk(0%, 68%, 62%, 3%)

Oklch

oklch(66.5% 0.203 19.4)

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

#B9ADD3

Wisteria · LightSteelBlue · Cobalt Blue

HEX

#B9ADD3

RGB

rgb(185, 173, 211)

HSL

hsl(259, 30%, 75%)

HSB

hsb(259, 18%, 83%)

CMYK

cmyk(12%, 18%, 0%, 17%)

Oklch

oklch(77.0% 0.055 299.5)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#66D9CC

Jade · MediumTurquoise · Lake Green

HEX

#66D9CC

RGB

rgb(102, 217, 204)

HSL

hsl(173, 60%, 63%)

HSB

hsb(173, 53%, 85%)

CMYK

cmyk(53%, 0%, 6%, 15%)

Oklch

oklch(81.5% 0.107 185.5)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#C6E4BC

Celadon · LightGray · Mint Green

HEX

#C6E4BC

RGB

rgb(198, 228, 188)

HSL

hsl(105, 43%, 82%)

HSB

hsb(105, 18%, 89%)

CMYK

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

Oklch

oklch(88.6% 0.063 137.9)

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

#DCEF8D

Willow Green · Khaki · Apple Green

HEX

#DCEF8D

RGB

rgb(220, 239, 141)

HSL

hsl(72, 75%, 75%)

HSB

hsb(72, 41%, 94%)

CMYK

cmyk(8%, 0%, 41%, 6%)

Oklch

oklch(91.7% 0.124 117.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F74F5F

50F7E6

Analogous

F750B4

F74F5F

F79250

Triadic

F74F5F

60F750

5060F7

Split-Comp.

F74F5F

50F792

50B4F7

Tetradic

F74F5F

B4F750

50F7E6

9250F7

Contrast Matrix WCAG 2.1 Contrast

F74F5F	B9ADD3	66D9CC	C6E4BC	DCEF8D
—	1.6 Fail	2.0 Fail	2.4 Fail	2.7 Fail
1.6 Fail	—	1.2 Fail	1.5 Fail	1.7 Fail
2.0 Fail	1.2 Fail	—	1.2 Fail	1.4 Fail
2.4 Fail	1.5 Fail	1.2 Fail	—	1.1 Fail
2.7 Fail	1.7 Fail	1.4 Fail	1.1 Fail	—

White BG

3.4AA Large

2.1Fail

1.7Fail

1.4Fail

1.3Fail

Black BG

6.2AA

10.0AAA

12.4AAA

15.2AAA

16.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AEAD5B

B4B4CA

9899CF

D3D3C6

E4E4A5

Deuteranopia

B8C55A

B5B5C8

9189D0

D1CFC8

E3E2AA

Tritanopia

EF5857

B8C3C1

6CD2D2

C8CDCF

DDB7BC

Achromatopsia

838383

B5B5B5

D6D6D6

DEDEDE

Shades & Tints Shades & Tints

#F74F5F

Dark

Light

#B9ADD3

Dark

Light

#66D9CC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f74f5f;
  --color-2: #b9add3;
  --color-3: #66d9cc;
  --color-4: #c6e4bc;
  --color-5: #dcef8d;
}

SCSS

$color-1: #f74f5f;
$color-2: #b9add3;
$color-3: #66d9cc;
$color-4: #c6e4bc;
$color-5: #dcef8d;

TAILWIND

colors: {
  'brand-1': '#f74f5f',
  'brand-2': '#b9add3',
  'brand-3': '#66d9cc',
  'brand-4': '#c6e4bc',
  'brand-5': '#dcef8d',
}

RGB Array

[247, 79, 95], [185, 173, 211], [102, 217, 204], [198, 228, 188], [220, 239, 141]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F74F5F, #B9ADD3, #66D9CC, #C6E4BC, #DCEF8D 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: #f74f5f; --color-2: #b9add3; --color-3: #66d9cc; --color-4: #c6e4bc; --color-5: #dcef8d. 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