#1171AA + #466647 + #58531E + #593814 + #4F1A11 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#1171AA

Lake Blue · Teal · Prussian Blue

HEX

#1171AA

RGB

rgb(17, 113, 170)

HSL

hsl(202, 82%, 37%)

HSB

hsb(202, 90%, 67%)

CMYK

cmyk(90%, 34%, 0%, 33%)

Oklch

oklch(52.7% 0.121 242.5)

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

#466647

Celadon · DarkOliveGreen · Forest Green

HEX

#466647

RGB

rgb(70, 102, 71)

HSL

hsl(122, 19%, 34%)

HSB

hsb(122, 31%, 40%)

CMYK

cmyk(31%, 0%, 30%, 60%)

Oklch

oklch(47.6% 0.062 145.3)

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

#58531E

Autumn Sage · DarkOliveGreen · Amber Gold

HEX

#58531E

RGB

rgb(88, 83, 30)

HSL

hsl(55, 49%, 23%)

HSB

hsb(55, 66%, 35%)

CMYK

cmyk(0%, 6%, 66%, 65%)

Oklch

oklch(43.5% 0.073 103.9)

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

#593814

Ochre · DarkOliveGreen · Cinnamon

HEX

#593814

RGB

rgb(89, 56, 20)

HSL

hsl(31, 63%, 21%)

HSB

hsb(31, 78%, 35%)

CMYK

cmyk(0%, 37%, 78%, 65%)

Oklch

oklch(37.3% 0.068 65.0)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

#4F1A11

Vermilion · Maroon · Deep Berry

HEX

#4F1A11

RGB

rgb(79, 26, 17)

HSL

hsl(9, 65%, 19%)

HSB

hsb(9, 78%, 31%)

CMYK

cmyk(0%, 67%, 78%, 69%)

Oklch

oklch(29.9% 0.082 31.8)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1171AA

AC4A11

Analogous

11AC97

1171AA

1126AC

Triadic

1171AA

AC1173

73AC11

Split-Comp.

1171AA

AC1126

AC9711

Tetradic

1171AA

9711AC

AC4A11

26AC11

Contrast Matrix WCAG 2.1 Contrast

1171AA	466647	58531E	593814	4F1A11
—	1.2 Fail	1.5 Fail	2.0 Fail	2.7 Fail
1.2 Fail	—	1.2 Fail	1.6 Fail	2.2 Fail
1.5 Fail	1.2 Fail	—	1.3 Fail	1.8 Fail
2.0 Fail	1.6 Fail	1.3 Fail	—	1.3 Fail
2.7 Fail	2.2 Fail	1.8 Fail	1.3 Fail	—

White BG

5.3AA

6.5AA

7.9AAA

10.5AAA

14.1AAA

Black BG

4.0AA Large

3.3AA Large

2.7Fail

2.0Fail

1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

3B3B9C

54544F

56562B

4B4A1D

383813

Deuteranopia

352E99

525050

56572E

4D4F1F

3B3F14

Tritanopia

16918F

485456

583537

572425

4C1515

Achromatopsia

5B5B5B

595959

4E4E4E

3E3E3E

292929

Shades & Tints Shades & Tints

#1171AA

Dark

Light

#466647

Dark

Light

#58531E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1171aa;
  --color-2: #466647;
  --color-3: #58531e;
  --color-4: #593814;
  --color-5: #4f1a11;
}

SCSS

$color-1: #1171aa;
$color-2: #466647;
$color-3: #58531e;
$color-4: #593814;
$color-5: #4f1a11;

TAILWIND

colors: {
  'brand-1': '#1171aa',
  'brand-2': '#466647',
  'brand-3': '#58531e',
  'brand-4': '#593814',
  'brand-5': '#4f1a11',
}

RGB Array

[17, 113, 170], [70, 102, 71], [88, 83, 30], [89, 56, 20], [79, 26, 17]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #1171AA, #466647, #58531E, #593814, #4F1A11 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: #1171aa; --color-2: #466647; --color-3: #58531e; --color-4: #593814; --color-5: #4f1a11. 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