← Back to Editor

#DEF3C1 · #C1FF91 · #BACC56 · #CF7853 · #B33E63

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#DEF3C1

Willow Green · Wheat · Mint Green

HEX
#DEF3C1
RGB
rgb(222, 243, 193)
HSL
hsl(85, 68%, 85%)
HSB
hsb(85, 21%, 95%)
CMYK
cmyk(9%, 0%, 21%, 5%)
Oklch
oklch(93.6% 0.069 126.2)

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

#C1FF91

Emerald · LightGreen · Apple Green

HEX
#C1FF91
RGB
rgb(193, 255, 145)
HSL
hsl(94, 100%, 78%)
HSB
hsb(94, 43%, 100%)
CMYK
cmyk(24%, 0%, 43%, 0%)
Oklch
oklch(93.4% 0.153 132.7)

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

#BACC56

Autumn Sage · Tan · Sunflower

HEX
#BACC56
RGB
rgb(186, 204, 86)
HSL
hsl(69, 54%, 57%)
HSB
hsb(69, 58%, 80%)
CMYK
cmyk(9%, 0%, 58%, 20%)
Oklch
oklch(80.8% 0.144 117.0)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#CF7853

Tangerine · Coral · Warm Sun

HEX
#CF7853
RGB
rgb(207, 120, 83)
HSL
hsl(18, 56%, 57%)
HSB
hsb(18, 60%, 81%)
CMYK
cmyk(0%, 42%, 60%, 19%)
Oklch
oklch(66.0% 0.121 43.3)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#B33E63

Dark Violet · MediumVioletRed · Camellia

HEX
#B33E63
RGB
rgb(179, 62, 99)
HSL
hsl(341, 49%, 47%)
HSB
hsb(341, 65%, 70%)
CMYK
cmyk(0%, 65%, 45%, 30%)
Oklch
oklch(53.8% 0.154 4.4)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DEF3C1
D4BFF3

Analogous

F3EEBF
DEF3C1
C3F3BF

Triadic

DEF3C1
BFDDF3
F3BFDD

Split-Comp.

DEF3C1
BFC3F3
EEBFF3

Tetradic

DEF3C1
BFF3EE
D4BFF3
F3BFC3

Contrast Matrix WCAG 2.1 Contrast

DEF3C1
C1FF91
BACC56
CF7853
B33E63
—
1.0
Fail
1.5
Fail
2.7
Fail
4.7
AA
1.0
Fail
—
1.5
Fail
2.8
Fail
4.7
AA
1.5
Fail
1.5
Fail
—
1.8
Fail
3.1
AA Large
2.7
Fail
2.8
Fail
1.8
Fail
—
1.7
Fail
4.7
AA
4.7
AA
3.1
AA Large
1.7
Fail
—
White BG
1.2Fail
1.2Fail
1.8Fail
3.2AA Large
5.5AA
Black BG
17.7AAA
18.0AAA
11.9AAA
6.5AA
3.8AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

E7E7CD
DCDCAC
C2C273
A9A95C
807F5A

Deuteranopia

E6E4D0
D8D4B2
C1BF79
AEB55E
879058

Tritanopia

DFD7D9
C4C1C5
BB898E
CB6365
AD5351

Achromatopsia

E7E7E7
E0E0E0
B9B9B9
8E8E8E
656565

Shades & Tints Shades & Tints

#DEF3C1

Dark
Light

#C1FF91

Dark
Light

#BACC56

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #def3c1;
  --color-2: #c1ff91;
  --color-3: #bacc56;
  --color-4: #cf7853;
  --color-5: #b33e63;
}

SCSS

$color-1: #def3c1;
$color-2: #c1ff91;
$color-3: #bacc56;
$color-4: #cf7853;
$color-5: #b33e63;

TAILWIND

colors: {
  'brand-1': '#def3c1',
  'brand-2': '#c1ff91',
  'brand-3': '#bacc56',
  'brand-4': '#cf7853',
  'brand-5': '#b33e63',
}

RGB Array

[222, 243, 193], [193, 255, 145], [186, 204, 86], [207, 120, 83], [179, 62, 99]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DEF3C1, #C1FF91, #BACC56, #CF7853, #B33E63 is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. 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: #def3c1; --color-2: #c1ff91; --color-3: #bacc56; --color-4: #cf7853; --color-5: #b33e63. 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. 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