← Back to Editor

#DEF7BE · #9BDEBF · #383036 · #F28F7C · #F03C66

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#DEF7BE

Willow Green · Wheat · Mint Green

HEX
#DEF7BE
RGB
rgb(222, 247, 190)
HSL
hsl(86, 78%, 86%)
HSB
hsb(86, 23%, 97%)
CMYK
cmyk(10%, 0%, 23%, 3%)
Oklch
oklch(94.4% 0.079 127.1)

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

#9BDEBF

Jade · LightBlue · Apple Green

HEX
#9BDEBF
RGB
rgb(155, 222, 191)
HSL
hsl(152, 50%, 74%)
HSB
hsb(152, 30%, 87%)
CMYK
cmyk(30%, 0%, 14%, 13%)
Oklch
oklch(84.7% 0.081 164.2)

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

#383036

Rose Purple · DarkSlateGray · Dark Stone

HEX
#383036
RGB
rgb(56, 48, 54)
HSL
hsl(315, 8%, 20%)
HSB
hsb(315, 14%, 22%)
CMYK
cmyk(0%, 14%, 4%, 78%)
Oklch
oklch(32.0% 0.015 334.7)

Traditional「Rose Purple」· Paint「Dark Stone」· Creative Midnight Shadow

#F28F7C

Peach Pink · DarkSalmon · Coral Red

HEX
#F28F7C
RGB
rgb(242, 143, 124)
HSL
hsl(10, 82%, 72%)
HSB
hsb(10, 49%, 95%)
CMYK
cmyk(0%, 41%, 49%, 5%)
Oklch
oklch(75.0% 0.124 31.7)

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

#F03C66

Vermilion · Tomato · Passion Red

HEX
#F03C66
RGB
rgb(240, 60, 102)
HSL
hsl(346, 86%, 59%)
HSB
hsb(346, 75%, 94%)
CMYK
cmyk(0%, 75%, 57%, 6%)
Oklch
oklch(63.8% 0.215 12.7)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DEF7BE
D8BFF7

Analogous

F7F3BF
DEF7BE
C3F7BF

Triadic

DEF7BE
BFDFF7
F7BFDF

Split-Comp.

DEF7BE
BFC3F7
F3BFF7

Tetradic

DEF7BE
BFF7F3
D8BFF7
F7BFC3

Contrast Matrix WCAG 2.1 Contrast

DEF7BE
9BDEBF
383036
F28F7C
F03C66
—
1.3
Fail
11.0
AAA
2.0
Fail
3.3
AA Large
1.3
Fail
—
8.3
AAA
1.5
Fail
2.5
Fail
11.0
AAA
8.3
AAA
—
5.5
AA
3.4
AA Large
2.0
Fail
1.5
Fail
5.5
AA
—
1.6
Fail
3.3
AA Large
2.5
Fail
3.4
AA Large
1.6
Fail
—
White BG
1.2Fail
1.5Fail
12.8AAA
2.3Fail
3.8AA Large
Black BG
18.2AAA
13.6AAA
1.6Fail
9.0AAA
5.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E9E9CC
B8B9C7
353435
C7C681
A2A05C

Deuteranopia

E7E5CF
B4AFC8
353634
CDD482
ADBA59

Tritanopia

DFD7D9
9ECCCE
383333
ED8485
E75452

Achromatopsia

E9E9E9
C6C6C6
333333
AAAAAA
777777

Shades & Tints Shades & Tints

#DEF7BE

Dark
Light

#9BDEBF

Dark
Light

#383036

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #def7be;
  --color-2: #9bdebf;
  --color-3: #383036;
  --color-4: #f28f7c;
  --color-5: #f03c66;
}

SCSS

$color-1: #def7be;
$color-2: #9bdebf;
$color-3: #383036;
$color-4: #f28f7c;
$color-5: #f03c66;

TAILWIND

colors: {
  'brand-1': '#def7be',
  'brand-2': '#9bdebf',
  'brand-3': '#383036',
  'brand-4': '#f28f7c',
  'brand-5': '#f03c66',
}

RGB Array

[222, 247, 190], [155, 222, 191], [56, 48, 54], [242, 143, 124], [240, 60, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DEF7BE, #9BDEBF, #383036, #F28F7C, #F03C66 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #def7be; --color-2: #9bdebf; --color-3: #383036; --color-4: #f28f7c; --color-5: #f03c66. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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