← Back to Editor

#D7F23D · #34B830 · #2E5C50 · #333A4D · #3C153A

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#D7F23D

Autumn Sage · GreenYellow · Sunflower

HEX
#D7F23D
RGB
rgb(215, 242, 61)
HSL
hsl(69, 87%, 59%)
HSB
hsb(69, 75%, 95%)
CMYK
cmyk(11%, 0%, 75%, 5%)
Oklch
oklch(91.1% 0.195 118.0)

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

#34B830

Pine Green · LimeGreen · Olive Green

HEX
#34B830
RGB
rgb(52, 184, 48)
HSL
hsl(118, 59%, 45%)
HSB
hsb(118, 74%, 72%)
CMYK
cmyk(72%, 0%, 74%, 28%)
Oklch
oklch(68.6% 0.206 142.6)

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

#2E5C50

Mineral Blue · DarkSlateGray · Mint Ice

HEX
#2E5C50
RGB
rgb(46, 92, 80)
HSL
hsl(164, 33%, 27%)
HSB
hsb(164, 50%, 36%)
CMYK
cmyk(50%, 0%, 13%, 64%)
Oklch
oklch(43.8% 0.055 174.7)

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

#333A4D

Indigo · DarkSlateGray · Prussian Blue

HEX
#333A4D
RGB
rgb(51, 58, 77)
HSL
hsl(224, 20%, 25%)
HSB
hsb(224, 34%, 30%)
CMYK
cmyk(34%, 25%, 0%, 70%)
Oklch
oklch(35.0% 0.035 268.9)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#3C153A

Rose Purple · DarkSlateGray · Dark Purple

HEX
#3C153A
RGB
rgb(60, 21, 58)
HSL
hsl(303, 48%, 16%)
HSB
hsb(303, 65%, 24%)
CMYK
cmyk(0%, 65%, 3%, 76%)
Oklch
oklch(27.3% 0.082 329.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D7F23D
573BF1

Analogous

F1B23B
D7F23D
7BF13B

Triadic

D7F23D
3BD6F1
F13BD6

Split-Comp.

D7F23D
3B7BF1
B23BF1

Tetradic

D7F23D
3BF1B2
573BF1
F13B7B

Contrast Matrix WCAG 2.1 Contrast

D7F23D
34B830
2E5C50
333A4D
3C153A
—
2.1
Fail
6.0
AA
9.0
AAA
12.2
AAA
2.1
Fail
—
2.9
Fail
4.3
AA Large
5.9
AA
6.0
AA
2.9
Fail
—
1.5
Fail
2.0
Fail
9.0
AAA
4.3
AA Large
1.5
Fail
—
1.4
Fail
12.2
AAA
5.9
AA
2.0
Fail
1.4
Fail
—
White BG
1.3Fail
2.6Fail
7.6AAA
11.3AAA
15.4AAA
Black BG
16.7AAA
8.0AAA
2.8Fail
1.9Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E3E369
6D6E51
424253
363648
2B2B31

Deuteranopia

E1DF73
665C59
3F3C54
363547
2D302F

Tritanopia

D88B93
3B6B71
305556
334544
3A2A28

Achromatopsia

D5D5D5
818181
4D4D4D
3A3A3A
252525

Shades & Tints Shades & Tints

#D7F23D

Dark
Light

#34B830

Dark
Light

#2E5C50

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d7f23d;
  --color-2: #34b830;
  --color-3: #2e5c50;
  --color-4: #333a4d;
  --color-5: #3c153a;
}

SCSS

$color-1: #d7f23d;
$color-2: #34b830;
$color-3: #2e5c50;
$color-4: #333a4d;
$color-5: #3c153a;

TAILWIND

colors: {
  'brand-1': '#d7f23d',
  'brand-2': '#34b830',
  'brand-3': '#2e5c50',
  'brand-4': '#333a4d',
  'brand-5': '#3c153a',
}

RGB Array

[215, 242, 61], [52, 184, 48], [46, 92, 80], [51, 58, 77], [60, 21, 58]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D7F23D, #34B830, #2E5C50, #333A4D, #3C153A is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #d7f23d; --color-2: #34b830; --color-3: #2e5c50; --color-4: #333a4d; --color-5: #3c153a. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 tech, SaaS, healthcare, eco industries. 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