#96ABA5 + #C9622E + #167875 + #01627A + #3E3A38 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#96ABA5

Jade · DarkGray · Lake Green

HEX

#96ABA5

RGB

rgb(150, 171, 165)

HSL

hsl(163, 11%, 63%)

HSB

hsb(163, 12%, 67%)

CMYK

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

Oklch

oklch(72.3% 0.025 176.5)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#C9622E

Tangerine · Chocolate · Amber Brown

HEX

#C9622E

RGB

rgb(201, 98, 46)

HSL

hsl(20, 63%, 48%)

HSB

hsb(20, 77%, 79%)

CMYK

cmyk(0%, 51%, 77%, 21%)

Oklch

oklch(61.2% 0.146 44.9)

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

#167875

Mineral Blue · Teal · Mint Ice

HEX

#167875

RGB

rgb(22, 120, 117)

HSL

hsl(178, 69%, 28%)

HSB

hsb(178, 82%, 47%)

CMYK

cmyk(82%, 0%, 3%, 53%)

Oklch

oklch(52.0% 0.084 191.7)

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

#01627A

Lake Blue · Teal · Peacock Green

HEX

#01627A

RGB

rgb(1, 98, 122)

HSL

hsl(192, 98%, 24%)

HSB

hsb(192, 99%, 48%)

CMYK

cmyk(99%, 20%, 0%, 52%)

Oklch

oklch(46.0% 0.085 222.3)

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

#3E3A38

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#3E3A38

RGB

rgb(62, 58, 56)

HSL

hsl(20, 5%, 23%)

HSB

hsb(20, 10%, 24%)

CMYK

cmyk(0%, 6%, 10%, 76%)

Oklch

oklch(35.2% 0.007 48.5)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

96ABA5

AB969C

Analogous

96AB9B

96ABA5

96A7AB

Triadic

96ABA5

A596AB

ABA596

Split-Comp.

96ABA5

AB96A7

AB9B96

Tetradic

96ABA5

9B96AB

AB969C

A7AB96

Contrast Matrix WCAG 2.1 Contrast

96ABA5	C9622E	167875	01627A	3E3A38
—	1.6 Fail	2.2 Fail	2.9 Fail	4.6 AA
1.6 Fail	—	1.3 Fail	1.7 Fail	2.8 Fail
2.2 Fail	1.3 Fail	—	1.3 Fail	2.1 Fail
2.9 Fail	1.7 Fail	1.3 Fail	—	1.6 Fail
4.6 AA	2.8 Fail	2.1 Fail	1.6 Fail	—

White BG

2.4Fail

4.0AA Large

5.3AA

6.9AA

11.2AAA

Black BG

8.7AAA

5.3AA

4.0AA Large

3.0AA Large

1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9F9FA6

9C9B3B

404176

2B2C74

3C3C38

Deuteranopia

9E9CA7

A2AA3E

3B3376

251E73

3D3D39

Tritanopia

97A8A8

C44547

1B7676

06706F

3E3939

Achromatopsia

A4A4A4

7B7B7B

5A5A5A

484848

3B3B3B

Shades & Tints Shades & Tints

#96ABA5

Dark

Light

#C9622E

Dark

Light

#167875

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #96aba5;
  --color-2: #c9622e;
  --color-3: #167875;
  --color-4: #01627a;
  --color-5: #3e3a38;
}

SCSS

$color-1: #96aba5;
$color-2: #c9622e;
$color-3: #167875;
$color-4: #01627a;
$color-5: #3e3a38;

TAILWIND

colors: {
  'brand-1': '#96aba5',
  'brand-2': '#c9622e',
  'brand-3': '#167875',
  'brand-4': '#01627a',
  'brand-5': '#3e3a38',
}

RGB Array

[150, 171, 165], [201, 98, 46], [22, 120, 117], [1, 98, 122], [62, 58, 56]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #96ABA5, #C9622E, #167875, #01627A, #3E3A38 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: #96aba5; --color-2: #c9622e; --color-3: #167875; --color-4: #01627a; --color-5: #3e3a38. 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