#17111E + #4F2433 + #694E29 + #508544 + #30AB73 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#17111E

Deep Indigo · Black · Dark Purple

HEX

#17111E

RGB

rgb(23, 17, 30)

HSL

hsl(268, 28%, 9%)

HSB

hsb(268, 43%, 12%)

CMYK

cmyk(23%, 43%, 0%, 88%)

Oklch

oklch(19.2% 0.027 305.1)

Traditional「Deep Indigo」· Paint「Dark Purple」· Creative Blush Sunrise

#4F2433

Dark Violet · DarkSlateGray · Raspberry

HEX

#4F2433

RGB

rgb(79, 36, 51)

HSL

hsl(339, 37%, 23%)

HSB

hsb(339, 54%, 31%)

CMYK

cmyk(0%, 54%, 35%, 69%)

Oklch

oklch(32.5% 0.067 359.4)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

#694E29

Ochre · DarkOliveGreen · Amber Brown

HEX

#694E29

RGB

rgb(105, 78, 41)

HSL

hsl(35, 44%, 29%)

HSB

hsb(35, 61%, 41%)

CMYK

cmyk(0%, 26%, 61%, 59%)

Oklch

oklch(44.4% 0.064 73.6)

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

#508544

Celadon · DarkOliveGreen · Forest Green

HEX

#508544

RGB

rgb(80, 133, 68)

HSL

hsl(109, 32%, 39%)

HSB

hsb(109, 49%, 52%)

CMYK

cmyk(40%, 0%, 49%, 48%)

Oklch

oklch(56.3% 0.111 139.9)

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

#30AB73

Mineral Blue · MediumSeaGreen · Olive Green

HEX

#30AB73

RGB

rgb(48, 171, 115)

HSL

hsl(153, 56%, 43%)

HSB

hsb(153, 72%, 67%)

CMYK

cmyk(72%, 0%, 33%, 33%)

Oklch

oklch(66.1% 0.136 158.8)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

17111E

171D11

Analogous

11111D

17111E

1D111D

Triadic

17111E

1D1711

111D17

Split-Comp.

17111E

1D1D11

111D11

Tetradic

17111E

1D1111

171D11

111D1D

Contrast Matrix WCAG 2.1 Contrast

17111E	4F2433	694E29	508544	30AB73
—	1.4 Fail	2.4 Fail	4.2 AA Large	6.3 AA
1.4 Fail	—	1.7 Fail	2.9 Fail	4.4 AA Large
2.4 Fail	1.7 Fail	—	1.8 Fail	2.6 Fail
4.2 AA Large	2.9 Fail	1.8 Fail	—	1.5 Fail
6.3 AA	4.4 AA Large	2.6 Fail	1.5 Fail	—

White BG

18.5AAA

12.9AAA

7.7AAA

4.4AA Large

2.9Fail

Black BG

1.1Fail

1.6Fail

2.7Fail

4.8AA

7.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

14141B

3C3C2F

5D5D32

676754

656681

Deuteranopia

15151A

3F422E

5F6134

646058

5E5584

Tritanopia

171818

4D2D2C

68393B

536063

368B8E

Achromatopsia

141414

333333

525252

6E6E6E

808080

Shades & Tints Shades & Tints

#17111E

Dark

Light

#4F2433

Dark

Light

#694E29

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #17111e;
  --color-2: #4f2433;
  --color-3: #694e29;
  --color-4: #508544;
  --color-5: #30ab73;
}

SCSS

$color-1: #17111e;
$color-2: #4f2433;
$color-3: #694e29;
$color-4: #508544;
$color-5: #30ab73;

TAILWIND

colors: {
  'brand-1': '#17111e',
  'brand-2': '#4f2433',
  'brand-3': '#694e29',
  'brand-4': '#508544',
  'brand-5': '#30ab73',
}

RGB Array

[23, 17, 30], [79, 36, 51], [105, 78, 41], [80, 133, 68], [48, 171, 115]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #17111E, #4F2433, #694E29, #508544, #30AB73 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: #17111e; --color-2: #4f2433; --color-3: #694e29; --color-4: #508544; --color-5: #30ab73. 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