← Back to Editor

#DFEBCE · #FF3F77 · #3A7061 · #3FAB8C · #91CCA5

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#DFEBCE

Willow Green · LightGray · Mint Green

HEX
#DFEBCE
RGB
rgb(223, 235, 206)
HSL
hsl(85, 42%, 86%)
HSB
hsb(85, 12%, 92%)
CMYK
cmyk(5%, 0%, 12%, 8%)
Oklch
oklch(92.3% 0.041 125.5)

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

#FF3F77

Rouge · DeepPink · Rose Pink

HEX
#FF3F77
RGB
rgb(255, 63, 119)
HSL
hsl(343, 100%, 62%)
HSB
hsb(343, 75%, 100%)
CMYK
cmyk(0%, 75%, 53%, 0%)
Oklch
oklch(66.9% 0.227 9.1)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#3A7061

Mineral Blue · SeaGreen · Mint Ice

HEX
#3A7061
RGB
rgb(58, 112, 97)
HSL
hsl(163, 32%, 33%)
HSB
hsb(163, 48%, 44%)
CMYK
cmyk(48%, 0%, 13%, 56%)
Oklch
oklch(50.3% 0.063 173.5)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#3FAB8C

Mineral Blue · MediumSeaGreen · Mint Ice

HEX
#3FAB8C
RGB
rgb(63, 171, 140)
HSL
hsl(163, 46%, 46%)
HSB
hsb(163, 63%, 67%)
CMYK
cmyk(63%, 0%, 18%, 33%)
Oklch
oklch(67.1% 0.109 170.7)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#91CCA5

Celadon · DarkSeaGreen · Apple Green

HEX
#91CCA5
RGB
rgb(145, 204, 165)
HSL
hsl(140, 37%, 68%)
HSB
hsb(140, 29%, 80%)
CMYK
cmyk(29%, 0%, 19%, 20%)
Oklch
oklch(79.4% 0.082 155.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DFEBCE
D9CCEA

Analogous

EAE8CC
DFEBCE
CFEACC

Triadic

DFEBCE
CCDEEA
EACCDE

Split-Comp.

DFEBCE
CCCFEA
E8CCEA

Tetradic

DFEBCE
CCEAE8
D9CCEA
EACCCF

Contrast Matrix WCAG 2.1 Contrast

DFEBCE
FF3F77
3A7061
3FAB8C
91CCA5
—
2.7
Fail
4.6
AA
2.3
Fail
1.5
Fail
2.7
Fail
—
1.7
Fail
1.2
Fail
1.8
Fail
4.6
AA
1.7
Fail
—
2.0
Fail
3.1
AA Large
2.3
Fail
1.2
Fail
2.0
Fail
—
1.5
Fail
1.5
Fail
1.8
Fail
3.1
AA Large
1.5
Fail
—
White BG
1.2Fail
3.4AA Large
5.7AA
2.8Fail
1.8Fail
Black BG
16.9AAA
6.2AA
3.7AA Large
7.4AAA
11.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E4E4D5
ACAA69
515265
6E6F94
ABABAE

Deuteranopia

E4E3D7
B7C566
4E4A66
685F95
A7A3B1

Tritanopia

E0DBDC
F55F5C
3D6768
44999B
94B6B8

Achromatopsia

E4E4E4
7F7F7F
5E5E5E
878787
B6B6B6

Shades & Tints Shades & Tints

#DFEBCE

Dark
Light

#FF3F77

Dark
Light

#3A7061

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dfebce;
  --color-2: #ff3f77;
  --color-3: #3a7061;
  --color-4: #3fab8c;
  --color-5: #91cca5;
}

SCSS

$color-1: #dfebce;
$color-2: #ff3f77;
$color-3: #3a7061;
$color-4: #3fab8c;
$color-5: #91cca5;

TAILWIND

colors: {
  'brand-1': '#dfebce',
  'brand-2': '#ff3f77',
  'brand-3': '#3a7061',
  'brand-4': '#3fab8c',
  'brand-5': '#91cca5',
}

RGB Array

[223, 235, 206], [255, 63, 119], [58, 112, 97], [63, 171, 140], [145, 204, 165]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DFEBCE, #FF3F77, #3A7061, #3FAB8C, #91CCA5 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #dfebce; --color-2: #ff3f77; --color-3: #3a7061; --color-4: #3fab8c; --color-5: #91cca5. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. High-contrast palettes naturally meet WCAG accessibility standards. 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