#20ABA4 + #403E30 + #995939 + #998739 + #94A630 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#20ABA4

Mineral Blue · LightSeaGreen · Mint Ice

HEX

#20ABA4

RGB

rgb(32, 171, 164)

HSL

hsl(177, 68%, 40%)

HSB

hsb(177, 81%, 67%)

CMYK

cmyk(81%, 0%, 4%, 33%)

Oklch

oklch(67.1% 0.110 189.5)

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

#403E30

Autumn Sage · DarkSlateGray · Amber Gold

HEX

#403E30

RGB

rgb(64, 62, 48)

HSL

hsl(53, 14%, 22%)

HSB

hsb(53, 25%, 25%)

CMYK

cmyk(0%, 3%, 25%, 75%)

Oklch

oklch(36.1% 0.023 100.7)

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

#995939

Tangerine · Sienna · Amber Brown

HEX

#995939

RGB

rgb(153, 89, 57)

HSL

hsl(20, 46%, 41%)

HSB

hsb(20, 63%, 60%)

CMYK

cmyk(0%, 42%, 63%, 40%)

Oklch

oklch(53.1% 0.096 46.5)

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

#998739

Ochre · Sienna · Honey Gold

HEX

#998739

RGB

rgb(153, 135, 57)

HSL

hsl(49, 46%, 41%)

HSB

hsb(49, 63%, 60%)

CMYK

cmyk(0%, 12%, 63%, 40%)

Oklch

oklch(62.4% 0.100 96.3)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#94A630

Autumn Sage · DarkGoldenRod · Honey Gold

HEX

#94A630

RGB

rgb(148, 166, 48)

HSL

hsl(69, 55%, 42%)

HSB

hsb(69, 71%, 65%)

CMYK

cmyk(11%, 0%, 71%, 35%)

Oklch

oklch(68.9% 0.141 117.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

20ABA4

AB2128

Analogous

21AB5F

20ABA4

216DAB

Triadic

20ABA4

A421AB

ABA421

Split-Comp.

20ABA4

AB216D

AB5F21

Tetradic

20ABA4

5F21AB

AB2128

6DAB21

Contrast Matrix WCAG 2.1 Contrast

20ABA4	403E30	995939	998739	94A630
—	3.8 AA Large	1.9 Fail	1.3 Fail	1.0 Fail
3.8 AA Large	—	2.0 Fail	3.0 AA Large	4.0 AA Large
1.9 Fail	2.0 Fail	—	1.5 Fail	2.0 Fail
1.3 Fail	3.0 AA Large	1.5 Fail	—	1.3 Fail
1.0 Fail	4.0 AA Large	2.0 Fail	1.3 Fail	—

White BG

2.8Fail

10.8AAA

5.5AA

3.6AA Large

2.7Fail

Black BG

7.4AAA

1.9Fail

3.8AA Large

5.9AA

7.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5C5DA6

3F3F33

7D7D41

91914C

9C9C4D

Deuteranopia

544AA6

3F3F34

818643

929450

9B9953

Tritanopia

27A7A7

403637

964748

985B5E

956368

Achromatopsia

818181

3D3D3D

686868

838383

939393

Shades & Tints Shades & Tints

#20ABA4

Dark

Light

#403E30

Dark

Light

#995939

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #20aba4;
  --color-2: #403e30;
  --color-3: #995939;
  --color-4: #998739;
  --color-5: #94a630;
}

SCSS

$color-1: #20aba4;
$color-2: #403e30;
$color-3: #995939;
$color-4: #998739;
$color-5: #94a630;

TAILWIND

colors: {
  'brand-1': '#20aba4',
  'brand-2': '#403e30',
  'brand-3': '#995939',
  'brand-4': '#998739',
  'brand-5': '#94a630',
}

RGB Array

[32, 171, 164], [64, 62, 48], [153, 89, 57], [153, 135, 57], [148, 166, 48]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #20ABA4, #403E30, #995939, #998739, #94A630 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: #20aba4; --color-2: #403e30; --color-3: #995939; --color-4: #998739; --color-5: #94a630. 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