← Back to Editor

#33201C · #08CDD7 · #37FA37 · #B1EB7C · #D6F6F4

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

#33201C

Crimson · Black · Deep Berry

HEX
#33201C
RGB
rgb(51, 32, 28)
HSL
hsl(10, 29%, 15%)
HSB
hsb(10, 45%, 20%)
CMYK
cmyk(0%, 37%, 45%, 80%)
Oklch
oklch(26.6% 0.031 32.3)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#08CDD7

Lake Blue · DarkTurquoise · Mint Ice

HEX
#08CDD7
RGB
rgb(8, 205, 215)
HSL
hsl(183, 93%, 44%)
HSB
hsb(183, 96%, 84%)
CMYK
cmyk(96%, 5%, 0%, 16%)
Oklch
oklch(77.2% 0.131 201.1)

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

#37FA37

Emerald · LimeGreen · Olive Green

HEX
#37FA37
RGB
rgb(55, 250, 55)
HSL
hsl(120, 95%, 60%)
HSB
hsb(120, 78%, 98%)
CMYK
cmyk(78%, 0%, 78%, 2%)
Oklch
oklch(86.0% 0.271 142.8)

Traditional「Emerald」· Paint「Olive Green」· Creative Blush Sunrise

#B1EB7C

Emerald · LightGreen · Apple Green

HEX
#B1EB7C
RGB
rgb(177, 235, 124)
HSL
hsl(91, 74%, 70%)
HSB
hsb(91, 47%, 92%)
CMYK
cmyk(25%, 0%, 47%, 8%)
Oklch
oklch(87.6% 0.154 131.6)

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

#D6F6F4

Jade · Lavender · Glacier Blue

HEX
#D6F6F4
RGB
rgb(214, 246, 244)
HSL
hsl(176, 64%, 90%)
HSB
hsb(176, 13%, 96%)
CMYK
cmyk(13%, 0%, 1%, 4%)
Oklch
oklch(95.0% 0.033 192.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

33201C
1B2E31

Analogous

311B23
33201C
312A1B

Triadic

33201C
1B311F
1F1B31

Split-Comp.

33201C
1B312A
1B2331

Tetradic

33201C
23311B
1B2E31
2A1B31

Contrast Matrix WCAG 2.1 Contrast

33201C
08CDD7
37FA37
B1EB7C
D6F6F4
—
7.9
AAA
10.9
AAA
11.0
AAA
13.5
AAA
7.9
AAA
—
1.4
Fail
1.4
Fail
1.7
Fail
10.9
AAA
1.4
Fail
—
1.0
Fail
1.2
Fail
11.0
AAA
1.4
Fail
1.0
Fail
—
1.2
Fail
13.5
AAA
1.7
Fail
1.2
Fail
1.2
Fail
—
White BG
15.4AAA
2.0Fail
1.4Fail
1.4Fail
1.1Fail
Black BG
1.4Fail
10.7AAA
14.9AAA
15.0AAA
18.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2B2B1D
5D5FD5
8B8D66
CACB97
E4E4F4

Deuteranopia

2C2D1D
5243D4
807272
C7C29D
E2E0F5

Tritanopia

321E1E
12D3D2
418B94
B4ACB1
D8F5F5

Achromatopsia

252525
939393
A9A9A9
CDCDCD
ECECEC

Shades & Tints Shades & Tints

#33201C

Dark
Light

#08CDD7

Dark
Light

#37FA37

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #33201c;
  --color-2: #08cdd7;
  --color-3: #37fa37;
  --color-4: #b1eb7c;
  --color-5: #d6f6f4;
}

SCSS

$color-1: #33201c;
$color-2: #08cdd7;
$color-3: #37fa37;
$color-4: #b1eb7c;
$color-5: #d6f6f4;

TAILWIND

colors: {
  'brand-1': '#33201c',
  'brand-2': '#08cdd7',
  'brand-3': '#37fa37',
  'brand-4': '#b1eb7c',
  'brand-5': '#d6f6f4',
}

RGB Array

[51, 32, 28], [8, 205, 215], [55, 250, 55], [177, 235, 124], [214, 246, 244]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #33201C, #08CDD7, #37FA37, #B1EB7C, #D6F6F4 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: #33201c; --color-2: #08cdd7; --color-3: #37fa37; --color-4: #b1eb7c; --color-5: #d6f6f4. 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