#62A06F + #5C9167 + #54584A + #35382F + #C74E09 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#62A06F

Celadon · MediumSeaGreen · Olive Green

HEX

#62A06F

RGB

rgb(98, 160, 111)

HSL

hsl(133, 25%, 51%)

HSB

hsb(133, 39%, 63%)

CMYK

cmyk(39%, 0%, 31%, 37%)

Oklch

oklch(65.0% 0.097 149.7)

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

#5C9167

Celadon · DimGray · Olive Green

HEX

#5C9167

RGB

rgb(92, 145, 103)

HSL

hsl(132, 22%, 46%)

HSB

hsb(132, 37%, 57%)

CMYK

cmyk(37%, 0%, 29%, 43%)

Oklch

oklch(60.8% 0.085 149.9)

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

#54584A

Grass Green · DarkOliveGreen · Charcoal

HEX

#54584A

RGB

rgb(84, 88, 74)

HSL

hsl(77, 9%, 32%)

HSB

hsb(77, 16%, 35%)

CMYK

cmyk(5%, 0%, 16%, 65%)

Oklch

oklch(45.2% 0.023 120.3)

Traditional「Grass Green」· Paint「Charcoal」· Creative Midnight Shadow

#35382F

Grass Green · DarkSlateGray · Dark Stone

HEX

#35382F

RGB

rgb(53, 56, 47)

HSL

hsl(80, 9%, 20%)

HSB

hsb(80, 16%, 22%)

CMYK

cmyk(5%, 0%, 16%, 78%)

Oklch

oklch(33.5% 0.016 122.3)

Traditional「Grass Green」· Paint「Dark Stone」· Creative Midnight Shadow

#C74E09

Tangerine · Chocolate · Amber Brown

HEX

#C74E09

RGB

rgb(199, 78, 9)

HSL

hsl(22, 91%, 41%)

HSB

hsb(22, 95%, 78%)

CMYK

cmyk(0%, 61%, 95%, 22%)

Oklch

oklch(57.8% 0.168 42.7)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

62A06F

A16394

Analogous

75A163

62A06F

63A190

Triadic

62A06F

7063A1

A17063

Split-Comp.

62A06F

9063A1

A16375

Tetradic

62A06F

6375A1

A16394

A19063

Contrast Matrix WCAG 2.1 Contrast

62A06F	5C9167	54584A	35382F	C74E09
—	1.2 Fail	2.4 Fail	3.9 AA Large	1.5 Fail
1.2 Fail	—	2.0 Fail	3.2 AA Large	1.3 Fail
2.4 Fail	2.0 Fail	—	1.6 Fail	1.6 Fail
3.9 AA Large	3.2 AA Large	1.6 Fail	—	2.6 Fail
1.5 Fail	1.3 Fail	1.6 Fail	2.6 Fail	—

White BG

3.1AA Large

3.7AA Large

7.3AAA

11.9AAA

4.6AA

Black BG

6.8AA

5.7AA

2.9Fail

1.8Fail

4.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7D7D7B

737371

56564D

363631

93921A

Deuteranopia

79757E

706C74

56554E

363632

9AA31E

Tritanopia

658486

5F797B

545051

353333

C1272A

Achromatopsia

888888

7C7C7C

555555

363636

6A6A6A

Shades & Tints Shades & Tints

#62A06F

Dark

Light

#5C9167

Dark

Light

#54584A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #62a06f;
  --color-2: #5c9167;
  --color-3: #54584a;
  --color-4: #35382f;
  --color-5: #c74e09;
}

SCSS

$color-1: #62a06f;
$color-2: #5c9167;
$color-3: #54584a;
$color-4: #35382f;
$color-5: #c74e09;

TAILWIND

colors: {
  'brand-1': '#62a06f',
  'brand-2': '#5c9167',
  'brand-3': '#54584a',
  'brand-4': '#35382f',
  'brand-5': '#c74e09',
}

RGB Array

[98, 160, 111], [92, 145, 103], [84, 88, 74], [53, 56, 47], [199, 78, 9]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #62A06F, #5C9167, #54584A, #35382F, #C74E09 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: #62a06f; --color-2: #5c9167; --color-3: #54584a; --color-4: #35382f; --color-5: #c74e09. 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