← Back to Editor

#2D033F · #0A5F70 · #3FAB95 · #34DD97 · #F4E7CE

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

#2D033F

Royal Purple · MidnightBlue · Dark Purple

HEX
#2D033F
RGB
rgb(45, 3, 63)
HSL
hsl(282, 91%, 13%)
HSB
hsb(282, 95%, 25%)
CMYK
cmyk(29%, 95%, 0%, 75%)
Oklch
oklch(22.8% 0.107 312.7)

Traditional「Royal Purple」· Paint「Dark Purple」· Creative Blush Sunrise

#0A5F70

Lake Blue · Teal · Peacock Green

HEX
#0A5F70
RGB
rgb(10, 95, 112)
HSL
hsl(190, 84%, 24%)
HSB
hsb(190, 91%, 44%)
CMYK
cmyk(91%, 15%, 0%, 56%)
Oklch
oklch(44.8% 0.077 216.2)

Traditional「Lake Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#3FAB95

Mineral Blue · CadetBlue · Mint Ice

HEX
#3FAB95
RGB
rgb(63, 171, 149)
HSL
hsl(168, 46%, 46%)
HSB
hsb(168, 63%, 67%)
CMYK
cmyk(63%, 0%, 13%, 33%)
Oklch
oklch(67.3% 0.104 177.0)

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

#34DD97

Mineral Blue · LightSeaGreen · Olive Green

HEX
#34DD97
RGB
rgb(52, 221, 151)
HSL
hsl(155, 71%, 54%)
HSB
hsb(155, 76%, 87%)
CMYK
cmyk(76%, 0%, 32%, 13%)
Oklch
oklch(79.8% 0.168 160.0)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#F4E7CE

Goose Yellow · Bisque · Peach Orange

HEX
#F4E7CE
RGB
rgb(244, 231, 206)
HSL
hsl(39, 63%, 88%)
HSB
hsb(39, 16%, 96%)
CMYK
cmyk(0%, 5%, 16%, 4%)
Oklch
oklch(93.2% 0.036 83.8)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2D033F
153F03

Analogous

0F033F
2D033F
3F0333

Triadic

2D033F
3F2D03
033F2D

Split-Comp.

2D033F
333F03
033F0F

Tetradic

2D033F
3F0F03
153F03
03333F

Contrast Matrix WCAG 2.1 Contrast

2D033F
0A5F70
3FAB95
34DD97
F4E7CE
—
2.4
Fail
6.2
AA
10.0
AAA
14.4
AAA
2.4
Fail
—
2.6
Fail
4.1
AA Large
6.0
AA
6.2
AA
2.6
Fail
—
1.6
Fail
2.3
Fail
10.0
AAA
4.1
AA Large
1.6
Fail
—
1.4
Fail
14.4
AAA
6.0
AA
2.3
Fail
1.4
Fail
—
White BG
17.6AAA
7.3AAA
2.8Fail
1.8Fail
1.2Fail
Black BG
1.2Fail
2.9Fail
7.5AAA
11.9AAA
17.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1B1A30
2F306C
6E6F9A
7D7FA8
EEEED4

Deuteranopia

1D202D
2A246B
685F9C
7367AC
EFF0D6

Tritanopia

2B2523
0E6968
449F9F
3CB5B8
F3D9DA

Achromatopsia

161616
484848
888888
A2A2A2
E8E8E8

Shades & Tints Shades & Tints

#2D033F

Dark
Light

#0A5F70

Dark
Light

#3FAB95

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2d033f;
  --color-2: #0a5f70;
  --color-3: #3fab95;
  --color-4: #34dd97;
  --color-5: #f4e7ce;
}

SCSS

$color-1: #2d033f;
$color-2: #0a5f70;
$color-3: #3fab95;
$color-4: #34dd97;
$color-5: #f4e7ce;

TAILWIND

colors: {
  'brand-1': '#2d033f',
  'brand-2': '#0a5f70',
  'brand-3': '#3fab95',
  'brand-4': '#34dd97',
  'brand-5': '#f4e7ce',
}

RGB Array

[45, 3, 63], [10, 95, 112], [63, 171, 149], [52, 221, 151], [244, 231, 206]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2D033F, #0A5F70, #3FAB95, #34DD97, #F4E7CE 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: #2d033f; --color-2: #0a5f70; --color-3: #3fab95; --color-4: #34dd97; --color-5: #f4e7ce. 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