← Back to Editor

#3B5A3F · #217238 · #47C53B · #5097A5 · #A1D0DA

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#3B5A3F

Celadon · DarkSlateGray · Forest Green

HEX
#3B5A3F
RGB
rgb(59, 90, 63)
HSL
hsl(128, 21%, 29%)
HSB
hsb(128, 34%, 35%)
CMYK
cmyk(34%, 0%, 30%, 65%)
Oklch
oklch(43.5% 0.057 147.8)

Traditional「Celadon」· Paint「Forest Green」· Creative Blush Sunrise

#217238

Pine Green · ForestGreen · Forest Green

HEX
#217238
RGB
rgb(33, 114, 56)
HSL
hsl(137, 55%, 29%)
HSB
hsb(137, 71%, 45%)
CMYK
cmyk(71%, 0%, 51%, 55%)
Oklch
oklch(48.9% 0.119 149.0)

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

#47C53B

Pine Green · LimeGreen · Olive Green

HEX
#47C53B
RGB
rgb(71, 197, 59)
HSL
hsl(115, 54%, 50%)
HSB
hsb(115, 70%, 77%)
CMYK
cmyk(64%, 0%, 70%, 23%)
Oklch
oklch(72.7% 0.208 141.9)

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

#5097A5

Slate Blue · CadetBlue · Mint Ice

HEX
#5097A5
RGB
rgb(80, 151, 165)
HSL
hsl(190, 35%, 48%)
HSB
hsb(190, 52%, 65%)
CMYK
cmyk(52%, 8%, 0%, 35%)
Oklch
oklch(63.6% 0.074 211.9)

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

#A1D0DA

Sky Blue · LightBlue · Lake Green

HEX
#A1D0DA
RGB
rgb(161, 208, 218)
HSL
hsl(191, 44%, 74%)
HSB
hsb(191, 26%, 85%)
CMYK
cmyk(26%, 5%, 0%, 15%)
Oklch
oklch(82.8% 0.051 212.1)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3B5A3F
593A55

Analogous

46593A
3B5A3F
3A594E

Triadic

3B5A3F
3F3A59
593F3A

Split-Comp.

3B5A3F
4E3A59
593A46

Tetradic

3B5A3F
3A4659
593A55
594E3A

Contrast Matrix WCAG 2.1 Contrast

3B5A3F
217238
47C53B
5097A5
A1D0DA
—
1.3
Fail
3.4
AA Large
2.3
Fail
4.6
AA
1.3
Fail
—
2.6
Fail
1.8
Fail
3.6
AA Large
3.4
AA Large
2.6
Fail
—
1.5
Fail
1.3
Fail
2.3
Fail
1.8
Fail
1.5
Fail
—
2.0
Fail
4.6
AA
3.6
AA Large
1.3
Fail
2.0
Fail
—
White BG
7.7AAA
6.0AA
2.3Fail
3.3AA Large
1.7Fail
Black BG
2.7Fail
3.5AA Large
9.3AAA
6.3AA
12.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

484946
444546
7E7F5C
6F6FA2
B5B6D8

Deuteranopia

474447
3F3949
766D64
6B65A1
B3AFD7

Tritanopia

3D4B4C
255154
4D777D
549F9E
A3D6D5

Achromatopsia

4E4E4E
535353
909090
838383
C3C3C3

Shades & Tints Shades & Tints

#3B5A3F

Dark
Light

#217238

Dark
Light

#47C53B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3b5a3f;
  --color-2: #217238;
  --color-3: #47c53b;
  --color-4: #5097a5;
  --color-5: #a1d0da;
}

SCSS

$color-1: #3b5a3f;
$color-2: #217238;
$color-3: #47c53b;
$color-4: #5097a5;
$color-5: #a1d0da;

TAILWIND

colors: {
  'brand-1': '#3b5a3f',
  'brand-2': '#217238',
  'brand-3': '#47c53b',
  'brand-4': '#5097a5',
  'brand-5': '#a1d0da',
}

RGB Array

[59, 90, 63], [33, 114, 56], [71, 197, 59], [80, 151, 165], [161, 208, 218]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3B5A3F, #217238, #47C53B, #5097A5, #A1D0DA is ideal for: 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: #3b5a3f; --color-2: #217238; --color-3: #47c53b; --color-4: #5097a5; --color-5: #a1d0da. 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 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