#206863 + #976101 + #5D3030 + #38123E + #171724 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#206863

Mineral Blue · DarkSlateGray · Mint Ice

HEX

#206863

RGB

rgb(32, 104, 99)

HSL

hsl(176, 53%, 27%)

HSB

hsb(176, 69%, 41%)

CMYK

cmyk(69%, 0%, 5%, 59%)

Oklch

oklch(47.2% 0.070 188.5)

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

#976101

Ochre · Olive · Amber Brown

HEX

#976101

RGB

rgb(151, 97, 1)

HSL

hsl(38, 99%, 30%)

HSB

hsb(38, 99%, 59%)

CMYK

cmyk(0%, 36%, 99%, 41%)

Oklch

oklch(53.9% 0.115 71.6)

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

#5D3030

Crimson · DarkOliveGreen · Wine Red

HEX

#5D3030

RGB

rgb(93, 48, 48)

HSL

hsl(0, 32%, 28%)

HSB

hsb(0, 48%, 36%)

CMYK

cmyk(0%, 48%, 48%, 64%)

Oklch

oklch(36.8% 0.066 20.7)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#38123E

Royal Purple · MidnightBlue · Dark Purple

HEX

#38123E

RGB

rgb(56, 18, 62)

HSL

hsl(292, 55%, 16%)

HSB

hsb(292, 71%, 24%)

CMYK

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

Oklch

oklch(26.4% 0.089 322.0)

Traditional「Royal Purple」· Paint「Dark Purple」· Creative Blush Sunrise

#171724

Deep Indigo · Black · Deep Sea Blue

HEX

#171724

RGB

rgb(23, 23, 36)

HSL

hsl(240, 22%, 12%)

HSB

hsb(240, 36%, 14%)

CMYK

cmyk(36%, 36%, 0%, 86%)

Oklch

oklch(21.1% 0.026 284.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

206863

692025

Analogous

206940

206863

204A69

Triadic

206863

642069

696420

Split-Comp.

206863

69204A

694020

Tetradic

206863

402069

692025

4A6920

Contrast Matrix WCAG 2.1 Contrast

206863	976101	5D3030	38123E	171724
—	1.2 Fail	1.7 Fail	2.4 Fail	2.7 Fail
1.2 Fail	—	2.1 Fail	3.0 AA Large	3.4 AA Large
1.7 Fail	2.1 Fail	—	1.5 Fail	1.6 Fail
2.4 Fail	3.0 AA Large	1.5 Fail	—	1.1 Fail
2.7 Fail	3.4 AA Large	1.6 Fail	1.1 Fail	—

White BG

6.5AA

5.2AA

10.9AAA

15.9AAA

17.7AAA

Black BG

3.2AA Large

4.0AA Large

1.9Fail

1.3Fail

1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

3F4064

807F18

4A4930

282733

171721

Deuteranopia

3B3665

83871E

4C5030

2A2D31

171720

Tritanopia

246565

942B2F

5B3030

362B29

171E1E

Achromatopsia

525252

666666

3D3D3D

222222

181818

Shades & Tints Shades & Tints

#206863

Dark

Light

#976101

Dark

Light

#5D3030

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #206863;
  --color-2: #976101;
  --color-3: #5d3030;
  --color-4: #38123e;
  --color-5: #171724;
}

SCSS

$color-1: #206863;
$color-2: #976101;
$color-3: #5d3030;
$color-4: #38123e;
$color-5: #171724;

TAILWIND

colors: {
  'brand-1': '#206863',
  'brand-2': '#976101',
  'brand-3': '#5d3030',
  'brand-4': '#38123e',
  'brand-5': '#171724',
}

RGB Array

[32, 104, 99], [151, 97, 1], [93, 48, 48], [56, 18, 62], [23, 23, 36]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #206863, #976101, #5D3030, #38123E, #171724 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: #206863; --color-2: #976101; --color-3: #5d3030; --color-4: #38123e; --color-5: #171724. 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