#1A9C77 + #2A8787 + #376070 + #374459 + #363645 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#1A9C77

Mineral Blue · Teal · Mint Ice

HEX

#1A9C77

RGB

rgb(26, 156, 119)

HSL

hsl(163, 71%, 36%)

HSB

hsb(163, 83%, 61%)

CMYK

cmyk(83%, 0%, 24%, 39%)

Oklch

oklch(61.8% 0.120 167.6)

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

#2A8787

Lake Blue · Teal · Mint Ice

HEX

#2A8787

RGB

rgb(42, 135, 135)

HSL

hsl(180, 53%, 35%)

HSB

hsb(180, 69%, 53%)

CMYK

cmyk(69%, 0%, 0%, 47%)

Oklch

oklch(57.1% 0.085 195.0)

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

#376070

Slate Blue · DarkSlateGray · Mint Ice

HEX

#376070

RGB

rgb(55, 96, 112)

HSL

hsl(197, 34%, 33%)

HSB

hsb(197, 51%, 44%)

CMYK

cmyk(51%, 14%, 0%, 56%)

Oklch

oklch(46.6% 0.053 225.1)

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

#374459

Indigo · DarkSlateGray · Prussian Blue

HEX

#374459

RGB

rgb(55, 68, 89)

HSL

hsl(217, 24%, 28%)

HSB

hsb(217, 38%, 35%)

CMYK

cmyk(38%, 24%, 0%, 65%)

Oklch

oklch(38.4% 0.040 259.9)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#363645

Deep Indigo · DarkSlateGray · Prussian Blue

HEX

#363645

RGB

rgb(54, 54, 69)

HSL

hsl(240, 12%, 24%)

HSB

hsb(240, 22%, 27%)

CMYK

cmyk(22%, 22%, 0%, 73%)

Oklch

oklch(33.9% 0.026 284.9)

Traditional「Deep Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1A9C77

9D1B40

Analogous

1B9D37

1A9C77

1B819D

Triadic

1A9C77

781B9D

9D781B

Split-Comp.

1A9C77

9D1B81

9D371B

Tetradic

1A9C77

371B9D

9D1B40

819D1B

Contrast Matrix WCAG 2.1 Contrast

1A9C77	2A8787	376070	374459	363645
—	1.2 Fail	2.0 Fail	2.8 Fail	3.4 AA Large
1.2 Fail	—	1.6 Fail	2.3 Fail	2.8 Fail
2.0 Fail	1.6 Fail	—	1.4 Fail	1.7 Fail
2.8 Fail	2.3 Fail	1.4 Fail	—	1.2 Fail
3.4 AA Large	2.8 Fail	1.7 Fail	1.2 Fail	—

White BG

3.5AA Large

4.3AA Large

6.8AA

9.8AAA

11.9AAA

Black BG

6.1AA

4.9AA

3.1AA Large

2.1Fail

1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

525380

525387

49496C

3D3D54

363641

Deuteranopia

4B4182

4D4687

46436B

3C3B53

363641

Tritanopia

218789

2F8787

396968

38504F

363F3E

Achromatopsia

717171

6B6B6B

565656

434343

383838

Shades & Tints Shades & Tints

#1A9C77

Dark

Light

#2A8787

Dark

Light

#376070

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1a9c77;
  --color-2: #2a8787;
  --color-3: #376070;
  --color-4: #374459;
  --color-5: #363645;
}

SCSS

$color-1: #1a9c77;
$color-2: #2a8787;
$color-3: #376070;
$color-4: #374459;
$color-5: #363645;

TAILWIND

colors: {
  'brand-1': '#1a9c77',
  'brand-2': '#2a8787',
  'brand-3': '#376070',
  'brand-4': '#374459',
  'brand-5': '#363645',
}

RGB Array

[26, 156, 119], [42, 135, 135], [55, 96, 112], [55, 68, 89], [54, 54, 69]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #1A9C77, #2A8787, #376070, #374459, #363645 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: #1a9c77; --color-2: #2a8787; --color-3: #376070; --color-4: #374459; --color-5: #363645. 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