#3B472F + #277F67 + #53A688 + #62C1A3 + #529548 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#3B472F

Celadon · DarkSlateGray · Forest Green

HEX

#3B472F

RGB

rgb(59, 71, 47)

HSL

hsl(90, 20%, 23%)

HSB

hsb(90, 34%, 28%)

CMYK

cmyk(17%, 0%, 34%, 72%)

Oklch

oklch(38.0% 0.042 129.8)

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

#277F67

Mineral Blue · SeaGreen · Mint Ice

HEX

#277F67

RGB

rgb(39, 127, 103)

HSL

hsl(164, 53%, 33%)

HSB

hsb(164, 69%, 50%)

CMYK

cmyk(69%, 0%, 19%, 50%)

Oklch

oklch(53.8% 0.091 171.0)

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

#53A688

Mineral Blue · CadetBlue · Olive Green

HEX

#53A688

RGB

rgb(83, 166, 136)

HSL

hsl(158, 33%, 49%)

HSB

hsb(158, 50%, 65%)

CMYK

cmyk(50%, 0%, 18%, 35%)

Oklch

oklch(66.4% 0.094 167.6)

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

#62C1A3

Mineral Blue · MediumAquaMarine · Lake Green

HEX

#62C1A3

RGB

rgb(98, 193, 163)

HSL

hsl(161, 43%, 57%)

HSB

hsb(161, 49%, 76%)

CMYK

cmyk(49%, 0%, 16%, 24%)

Oklch

oklch(74.4% 0.101 170.6)

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

#529548

Celadon · SeaGreen · Olive Green

HEX

#529548

RGB

rgb(82, 149, 72)

HSL

hsl(112, 35%, 43%)

HSB

hsb(112, 52%, 58%)

CMYK

cmyk(45%, 0%, 52%, 42%)

Oklch

oklch(60.7% 0.130 141.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3B472F

3B2F46

Analogous

46462F

3B472F

2F462F

Triadic

3B472F

2F3B46

462F3B

Split-Comp.

3B472F

2F2F46

462F46

Tetradic

3B472F

2F4646

3B2F46

462F2F

Contrast Matrix WCAG 2.1 Contrast

3B472F	277F67	53A688	62C1A3	529548
—	2.0 Fail	3.4 AA Large	4.5 AA	2.7 Fail
2.0 Fail	—	1.7 Fail	2.2 Fail	1.3 Fail
3.4 AA Large	1.7 Fail	—	1.3 Fail	1.2 Fail
4.5 AA	2.2 Fail	1.3 Fail	—	1.7 Fail
2.7 Fail	1.3 Fail	1.2 Fail	1.7 Fail	—

White BG

9.9AAA

4.9AA

2.9Fail

2.2Fail

3.7AA Large

Black BG

2.1Fail

4.3AA Large

7.2AAA

9.7AAA

5.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

404035

4D4E6D

77788F

8B8CAA

6F705B

Deuteranopia

403F36

48416E

726C91

867FAC

6B665F

Tritanopia

3C393A

2B7172

579596

67B0B1

55696D

Achromatopsia

414141

626262

8A8A8A

A1A1A1

787878

Shades & Tints Shades & Tints

#3B472F

Dark

Light

#277F67

Dark

Light

#53A688

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3b472f;
  --color-2: #277f67;
  --color-3: #53a688;
  --color-4: #62c1a3;
  --color-5: #529548;
}

SCSS

$color-1: #3b472f;
$color-2: #277f67;
$color-3: #53a688;
$color-4: #62c1a3;
$color-5: #529548;

TAILWIND

colors: {
  'brand-1': '#3b472f',
  'brand-2': '#277f67',
  'brand-3': '#53a688',
  'brand-4': '#62c1a3',
  'brand-5': '#529548',
}

RGB Array

[59, 71, 47], [39, 127, 103], [83, 166, 136], [98, 193, 163], [82, 149, 72]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3B472F, #277F67, #53A688, #62C1A3, #529548 is ideal for: corporate websites, product showcases, portfolios. 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: #3b472f; --color-2: #277f67; --color-3: #53a688; --color-4: #62c1a3; --color-5: #529548. 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. 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