← Back to Editor

#484B5A · #7F5640 · #564237 · #9B2F3F · #2B1E18

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarmCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporate

Color Details Color Details

#484B5A

Indigo · DarkSlateGray · Prussian Blue

HEX
#484B5A
RGB
rgb(72, 75, 90)
HSL
hsl(230, 11%, 32%)
HSB
hsb(230, 20%, 35%)
CMYK
cmyk(20%, 17%, 0%, 65%)
Oklch
oklch(41.6% 0.025 276.3)

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

#7F5640

Tangerine · Sienna · Amber Brown

HEX
#7F5640
RGB
rgb(127, 86, 64)
HSL
hsl(21, 33%, 37%)
HSB
hsb(21, 50%, 50%)
CMYK
cmyk(0%, 32%, 50%, 50%)
Oklch
oklch(49.2% 0.064 49.0)

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

#564237

Tangerine · DarkOliveGreen · Amber Brown

HEX
#564237
RGB
rgb(86, 66, 55)
HSL
hsl(21, 22%, 28%)
HSB
hsb(21, 36%, 34%)
CMYK
cmyk(0%, 23%, 36%, 66%)
Oklch
oklch(39.7% 0.033 50.2)

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

#9B2F3F

Crimson · Brown · Wine Red

HEX
#9B2F3F
RGB
rgb(155, 47, 63)
HSL
hsl(351, 53%, 40%)
HSB
hsb(351, 70%, 61%)
CMYK
cmyk(0%, 70%, 59%, 39%)
Oklch
oklch(47.2% 0.143 16.1)

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

#2B1E18

Tangerine · Black · Cinnamon

HEX
#2B1E18
RGB
rgb(43, 30, 24)
HSL
hsl(19, 28%, 13%)
HSB
hsb(19, 44%, 17%)
CMYK
cmyk(0%, 30%, 44%, 83%)
Oklch
oklch(24.9% 0.023 45.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

484B5A
5B5849

Analogous

49555B
484B5A
4F495B

Triadic

484B5A
5B494C
4C5B49

Split-Comp.

484B5A
5B4F49
555B49

Tetradic

484B5A
5B4955
5B5849
495B4F

Contrast Matrix WCAG 2.1 Contrast

484B5A
7F5640
564237
9B2F3F
2B1E18
—
1.4
Fail
1.1
Fail
1.2
Fail
1.9
Fail
1.4
Fail
—
1.5
Fail
1.2
Fail
2.5
Fail
1.1
Fail
1.5
Fail
—
1.3
Fail
1.7
Fail
1.2
Fail
1.2
Fail
1.3
Fail
—
2.2
Fail
1.9
Fail
2.5
Fail
1.7
Fail
2.2
Fail
—
White BG
8.6AAA
6.3AA
9.4AAA
7.3AAA
16.1AAA
Black BG
2.4Fail
3.3AA Large
2.2Fail
2.9Fail
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

494956
6D6D45
4D4D3A
6C6B3B
252519

Deuteranopia

494956
707347
4F503A
737B3A
26271A

Tritanopia

485453
7D4A4A
553C3C
963837
2A1B1B

Achromatopsia

4C4C4C
606060
474747
515151
212121

Shades & Tints Shades & Tints

#484B5A

Dark
Light

#7F5640

Dark
Light

#564237

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #484b5a;
  --color-2: #7f5640;
  --color-3: #564237;
  --color-4: #9b2f3f;
  --color-5: #2b1e18;
}

SCSS

$color-1: #484b5a;
$color-2: #7f5640;
$color-3: #564237;
$color-4: #9b2f3f;
$color-5: #2b1e18;

TAILWIND

colors: {
  'brand-1': '#484b5a',
  'brand-2': '#7f5640',
  'brand-3': '#564237',
  'brand-4': '#9b2f3f',
  'brand-5': '#2b1e18',
}

RGB Array

[72, 75, 90], [127, 86, 64], [86, 66, 55], [155, 47, 63], [43, 30, 24]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #484B5A, #7F5640, #564237, #9B2F3F, #2B1E18 is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #484b5a; --color-2: #7f5640; --color-3: #564237; --color-4: #9b2f3f; --color-5: #2b1e18. 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 finance, legal, luxury industries. Restrained colors convey professionalism and trust. 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