#36A9A1 + #256770 + #3D323B + #5C513D + #A66B00 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#36A9A1

Mineral Blue · LightSeaGreen · Mint Ice

HEX

#36A9A1

RGB

rgb(54, 169, 161)

HSL

hsl(176, 52%, 44%)

HSB

hsb(176, 68%, 66%)

CMYK

cmyk(68%, 0%, 5%, 34%)

Oklch

oklch(67.0% 0.101 188.3)

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

#256770

Slate Blue · DarkSlateGray · Mint Ice

HEX

#256770

RGB

rgb(37, 103, 112)

HSL

hsl(187, 50%, 29%)

HSB

hsb(187, 67%, 44%)

CMYK

cmyk(67%, 8%, 0%, 56%)

Oklch

oklch(47.6% 0.067 207.7)

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

#3D323B

Rose Purple · DarkSlateGray · Eggplant

HEX

#3D323B

RGB

rgb(61, 50, 59)

HSL

hsl(311, 10%, 22%)

HSB

hsb(311, 18%, 24%)

CMYK

cmyk(0%, 18%, 3%, 76%)

Oklch

oklch(33.2% 0.022 332.2)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

#5C513D

Ochre · DarkOliveGreen · Amber Brown

HEX

#5C513D

RGB

rgb(92, 81, 61)

HSL

hsl(39, 20%, 30%)

HSB

hsb(39, 34%, 36%)

CMYK

cmyk(0%, 12%, 34%, 64%)

Oklch

oklch(44.0% 0.034 82.3)

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

#A66B00

Ochre · DarkGoldenRod · Amber Brown

HEX

#A66B00

RGB

rgb(166, 107, 0)

HSL

hsl(39, 100%, 33%)

HSB

hsb(39, 100%, 65%)

CMYK

cmyk(0%, 36%, 100%, 35%)

Oklch

oklch(57.7% 0.124 71.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

36A9A1

AB363E

Analogous

36AB68

36A9A1

3678AB

Triadic

36A9A1

A336AB

ABA336

Split-Comp.

36A9A1

AB3678

AB6836

Tetradic

36A9A1

6836AB

AB363E

78AB36

Contrast Matrix WCAG 2.1 Contrast

36A9A1	256770	3D323B	5C513D	A66B00
—	2.3 Fail	4.3 AA Large	2.7 Fail	1.6 Fail
2.3 Fail	—	1.9 Fail	1.2 Fail	1.5 Fail
4.3 AA Large	1.9 Fail	—	1.6 Fail	2.8 Fail
2.7 Fail	1.2 Fail	1.6 Fail	—	1.8 Fail
1.6 Fail	1.5 Fail	2.8 Fail	1.8 Fail	—

White BG

2.9Fail

6.5AA

12.2AAA

7.8AAA

4.4AA Large

Black BG

7.3AAA

3.3AA Large

1.7Fail

2.7Fail

4.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6869A3

42426E

383839

575742

8C8C1A

Deuteranopia

6159A3

3E396D

393A38

585943

909420

Tritanopia

3CA4A5

286C6C

3C3737

5B4647

A32E33

Achromatopsia

868686

545454

363636

525252

707070

Shades & Tints Shades & Tints

#36A9A1

Dark

Light

#256770

Dark

Light

#3D323B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #36a9a1;
  --color-2: #256770;
  --color-3: #3d323b;
  --color-4: #5c513d;
  --color-5: #a66b00;
}

SCSS

$color-1: #36a9a1;
$color-2: #256770;
$color-3: #3d323b;
$color-4: #5c513d;
$color-5: #a66b00;

TAILWIND

colors: {
  'brand-1': '#36a9a1',
  'brand-2': '#256770',
  'brand-3': '#3d323b',
  'brand-4': '#5c513d',
  'brand-5': '#a66b00',
}

RGB Array

[54, 169, 161], [37, 103, 112], [61, 50, 59], [92, 81, 61], [166, 107, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #36A9A1, #256770, #3D323B, #5C513D, #A66B00 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: #36a9a1; --color-2: #256770; --color-3: #3d323b; --color-4: #5c513d; --color-5: #a66b00. 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