← Back to Editor

#322D3B · #B2EBE0 · #DEF799 · #F76860 · #FFFD99

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

#322D3B

Deep Indigo · DarkSlateGray · Dark Purple

HEX
#322D3B
RGB
rgb(50, 45, 59)
HSL
hsl(261, 13%, 20%)
HSB
hsb(261, 24%, 23%)
CMYK
cmyk(15%, 24%, 0%, 77%)
Oklch
oklch(30.8% 0.026 301.2)

Traditional「Deep Indigo」· Paint「Dark Purple」· Creative Blush Sunrise

#B2EBE0

Jade · LightBlue · Glacier Blue

HEX
#B2EBE0
RGB
rgb(178, 235, 224)
HSL
hsl(168, 59%, 81%)
HSB
hsb(168, 24%, 92%)
CMYK
cmyk(24%, 0%, 5%, 8%)
Oklch
oklch(89.8% 0.060 181.7)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#DEF799

Willow Green · Khaki · Apple Green

HEX
#DEF799
RGB
rgb(222, 247, 153)
HSL
hsl(76, 85%, 78%)
HSB
hsb(76, 38%, 97%)
CMYK
cmyk(10%, 0%, 38%, 3%)
Oklch
oklch(93.7% 0.122 120.9)

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

#F76860

Peach Pink · Tomato · Coral Red

HEX
#F76860
RGB
rgb(247, 104, 96)
HSL
hsl(3, 90%, 67%)
HSB
hsb(3, 61%, 97%)
CMYK
cmyk(0%, 58%, 61%, 3%)
Oklch
oklch(69.4% 0.177 25.9)

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

#FFFD99

Fresh Green · Khaki · Lemon Cream

HEX
#FFFD99
RGB
rgb(255, 253, 153)
HSL
hsl(59, 100%, 80%)
HSB
hsb(59, 40%, 100%)
CMYK
cmyk(0%, 1%, 40%, 0%)
Oklch
oklch(97.4% 0.122 107.5)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

322D3B
353A2C

Analogous

2C2E3A
322D3B
382C3A

Triadic

322D3B
3A312C
2C3A31

Split-Comp.

322D3B
3A382C
2E3A2C

Tetradic

322D3B
3A2C2E
353A2C
2C3A38

Contrast Matrix WCAG 2.1 Contrast

322D3B
B2EBE0
DEF799
F76860
FFFD99
—
10.1
AAA
11.4
AAA
4.5
AA
12.6
AAA
10.1
AAA
—
1.1
Fail
2.2
Fail
1.2
Fail
11.4
AAA
1.1
Fail
—
2.5
Fail
1.1
Fail
4.5
AA
2.2
Fail
2.5
Fail
—
2.8
Fail
12.6
AAA
1.2
Fail
1.1
Fail
2.8
Fail
—
White BG
13.3AAA
1.3Fail
1.2Fail
3.0Fail
1.1Fail
Black BG
1.6Fail
15.9AAA
17.9AAA
7.1AAA
19.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

303038
CBCBE3
E9E9B0
B9B862
FEFEB1

Deuteranopia

303137
C7C3E3
E7E5B5
C1CC62
FEFEB7

Tritanopia

323534
B5E5E5
DFC2C6
F06364
FFC4C9

Achromatopsia

303030
D9D9D9
E5E5E5
929292
F2F2F2

Shades & Tints Shades & Tints

#322D3B

Dark
Light

#B2EBE0

Dark
Light

#DEF799

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #322d3b;
  --color-2: #b2ebe0;
  --color-3: #def799;
  --color-4: #f76860;
  --color-5: #fffd99;
}

SCSS

$color-1: #322d3b;
$color-2: #b2ebe0;
$color-3: #def799;
$color-4: #f76860;
$color-5: #fffd99;

TAILWIND

colors: {
  'brand-1': '#322d3b',
  'brand-2': '#b2ebe0',
  'brand-3': '#def799',
  'brand-4': '#f76860',
  'brand-5': '#fffd99',
}

RGB Array

[50, 45, 59], [178, 235, 224], [222, 247, 153], [247, 104, 96], [255, 253, 153]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #322D3B, #B2EBE0, #DEF799, #F76860, #FFFD99 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, 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: #322d3b; --color-2: #b2ebe0; --color-3: #def799; --color-4: #f76860; --color-5: #fffd99. 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. 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