#14B879 + #58A65E + #6B9117 + #575224 + #362D1F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#14B879

Mineral Blue · MediumSeaGreen · Forest Green

HEX

#14B879

RGB

rgb(20, 184, 121)

HSL

hsl(157, 80%, 40%)

HSB

hsb(157, 89%, 72%)

CMYK

cmyk(89%, 0%, 34%, 28%)

Oklch

oklch(69.2% 0.154 159.5)

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

#58A65E

Celadon · MediumSeaGreen · Olive Green

HEX

#58A65E

RGB

rgb(88, 166, 94)

HSL

hsl(125, 31%, 50%)

HSB

hsb(125, 47%, 65%)

CMYK

cmyk(47%, 0%, 43%, 35%)

Oklch

oklch(65.7% 0.130 145.5)

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

#6B9117

Grass Green · Olive · Forest Green

HEX

#6B9117

RGB

rgb(107, 145, 23)

HSL

hsl(79, 73%, 33%)

HSB

hsb(79, 84%, 57%)

CMYK

cmyk(26%, 0%, 84%, 43%)

Oklch

oklch(60.6% 0.147 126.5)

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

#575224

Autumn Sage · DarkOliveGreen · Amber Gold

HEX

#575224

RGB

rgb(87, 82, 36)

HSL

hsl(54, 41%, 24%)

HSB

hsb(54, 59%, 34%)

CMYK

cmyk(0%, 6%, 59%, 66%)

Oklch

oklch(43.3% 0.066 103.1)

Traditional「Autumn Sage」· Paint「Amber Gold」· Creative Blush Sunrise

#362D1F

Ochre · DarkSlateGray · Cinnamon

HEX

#362D1F

RGB

rgb(54, 45, 31)

HSL

hsl(37, 27%, 17%)

HSB

hsb(37, 43%, 21%)

CMYK

cmyk(0%, 17%, 43%, 79%)

Oklch

oklch(30.3% 0.027 78.5)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

14B879

B81453

Analogous

14B827

14B879

14A5B8

Triadic

14B879

7914B8

B87914

Split-Comp.

14B879

B814A5

B82714

Tetradic

14B879

2714B8

B81453

A5B814

Contrast Matrix WCAG 2.1 Contrast

14B879	58A65E	6B9117	575224	362D1F
—	1.2 Fail	1.4 Fail	3.1 AA Large	5.3 AA
1.2 Fail	—	1.2 Fail	2.7 Fail	4.5 AA
1.4 Fail	1.2 Fail	—	2.2 Fail	3.7 AA Large
3.1 AA Large	2.7 Fail	2.2 Fail	—	1.7 Fail
5.3 AA	4.5 AA	3.7 AA Large	1.7 Fail	—

White BG

2.6Fail

3.0Fail

3.7AA Large

8.0AAA

13.5AAA

Black BG

8.2AAA

7.0AAA

5.7AA

2.6Fail

1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

5B5C88

7A7A6F

7B7C35

55552F

323222

Deuteranopia

52458C

756F74

79763C

555632

333323

Tritanopia

1C9497

5C7D80

6D4C51

57383A

362526

Achromatopsia

808080

868686

787878

4E4E4E

2E2E2E

Shades & Tints Shades & Tints

#14B879

Dark

Light

#58A65E

Dark

Light

#6B9117

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #14b879;
  --color-2: #58a65e;
  --color-3: #6b9117;
  --color-4: #575224;
  --color-5: #362d1f;
}

SCSS

$color-1: #14b879;
$color-2: #58a65e;
$color-3: #6b9117;
$color-4: #575224;
$color-5: #362d1f;

TAILWIND

colors: {
  'brand-1': '#14b879',
  'brand-2': '#58a65e',
  'brand-3': '#6b9117',
  'brand-4': '#575224',
  'brand-5': '#362d1f',
}

RGB Array

[20, 184, 121], [88, 166, 94], [107, 145, 23], [87, 82, 36], [54, 45, 31]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #14B879, #58A65E, #6B9117, #575224, #362D1F is ideal for: tech websites, dark mode UIs, game UIs. 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: #14b879; --color-2: #58a65e; --color-3: #6b9117; --color-4: #575224; --color-5: #362d1f. 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. 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