#848B91 + #4F786D + #416639 + #5C4111 + #53190A · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#848B91

Ash · LightSlateGray · Warm Gray

HEX

#848B91

RGB

rgb(132, 139, 145)

HSL

hsl(208, 6%, 54%)

HSB

hsb(208, 9%, 57%)

CMYK

cmyk(9%, 4%, 0%, 43%)

Oklch

oklch(63.3% 0.012 243.8)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#4F786D

Mineral Blue · DimGray · Mint Ice

HEX

#4F786D

RGB

rgb(79, 120, 109)

HSL

hsl(164, 21%, 39%)

HSB

hsb(164, 34%, 47%)

CMYK

cmyk(34%, 0%, 9%, 53%)

Oklch

oklch(53.9% 0.049 175.7)

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

#416639

Celadon · DarkOliveGreen · Forest Green

HEX

#416639

RGB

rgb(65, 102, 57)

HSL

hsl(109, 28%, 31%)

HSB

hsb(109, 44%, 40%)

CMYK

cmyk(36%, 0%, 44%, 60%)

Oklch

oklch(47.0% 0.082 140.1)

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

#5C4111

Ochre · DarkOliveGreen · Cinnamon

HEX

#5C4111

RGB

rgb(92, 65, 17)

HSL

hsl(38, 69%, 21%)

HSB

hsb(38, 82%, 36%)

CMYK

cmyk(0%, 29%, 82%, 64%)

Oklch

oklch(39.6% 0.072 77.6)

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

#53190A

Vermilion · Maroon · Deep Berry

HEX

#53190A

RGB

rgb(83, 25, 10)

HSL

hsl(12, 78%, 18%)

HSB

hsb(12, 88%, 33%)

CMYK

cmyk(0%, 70%, 88%, 67%)

Oklch

oklch(30.5% 0.090 35.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

848B91

918983

Analogous

839190

848B91

838391

Triadic

848B91

91838A

8A9183

Split-Comp.

848B91

918383

919083

Tetradic

848B91

908391

918983

839183

Contrast Matrix WCAG 2.1 Contrast

848B91	4F786D	416639	5C4111	53190A
—	1.4 Fail	1.9 Fail	2.7 Fail	4.0 AA Large
1.4 Fail	—	1.3 Fail	1.9 Fail	2.8 Fail
1.9 Fail	1.3 Fail	—	1.4 Fail	2.1 Fail
2.7 Fail	1.9 Fail	1.4 Fail	—	1.5 Fail
4.0 AA Large	2.8 Fail	2.1 Fail	1.5 Fail	—

White BG

3.5AA Large

5.0AA

6.6AA

9.5AAA

13.9AAA

Black BG

6.1AA

4.2AA Large

3.2AA Large

2.2Fail

1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

878790

616170

515144

50501D

3A390E

Deuteranopia

87868F

5E5B70

4F4C47

52541F

3D420F

Tritanopia

848E8E

517272

434C4E

5B2628

501011

Achromatopsia

8A8A8A

6A6A6A

565656

444444

292929

Shades & Tints Shades & Tints

#848B91

Dark

Light

#4F786D

Dark

Light

#416639

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #848b91;
  --color-2: #4f786d;
  --color-3: #416639;
  --color-4: #5c4111;
  --color-5: #53190a;
}

SCSS

$color-1: #848b91;
$color-2: #4f786d;
$color-3: #416639;
$color-4: #5c4111;
$color-5: #53190a;

TAILWIND

colors: {
  'brand-1': '#848b91',
  'brand-2': '#4f786d',
  'brand-3': '#416639',
  'brand-4': '#5c4111',
  'brand-5': '#53190a',
}

RGB Array

[132, 139, 145], [79, 120, 109], [65, 102, 57], [92, 65, 17], [83, 25, 10]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #848B91, #4F786D, #416639, #5C4111, #53190A 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: #848b91; --color-2: #4f786d; --color-3: #416639; --color-4: #5c4111; --color-5: #53190a. 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 warm-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