← Back to Editor

#2D5473 · #21262A · #4F282B · #A77250 · #D9C391

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#2D5473

Slate Blue · DarkSlateGray · Prussian Blue

HEX
#2D5473
RGB
rgb(45, 84, 115)
HSL
hsl(207, 44%, 31%)
HSB
hsb(207, 61%, 45%)
CMYK
cmyk(61%, 27%, 0%, 55%)
Oklch
oklch(43.1% 0.068 244.3)

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

#21262A

Slate Blue · DarkSlateGray · Deep Sea Blue

HEX
#21262A
RGB
rgb(33, 38, 42)
HSL
hsl(207, 12%, 15%)
HSB
hsb(207, 21%, 16%)
CMYK
cmyk(21%, 10%, 0%, 84%)
Oklch
oklch(26.5% 0.010 242.1)

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

#4F282B

Crimson · DarkSlateGray · Wine Red

HEX
#4F282B
RGB
rgb(79, 40, 43)
HSL
hsl(355, 33%, 23%)
HSB
hsb(355, 49%, 31%)
CMYK
cmyk(0%, 49%, 46%, 69%)
Oklch
oklch(33.0% 0.058 15.9)

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

#A77250

Tangerine · Sienna · Amber Brown

HEX
#A77250
RGB
rgb(167, 114, 80)
HSL
hsl(23, 35%, 48%)
HSB
hsb(23, 52%, 65%)
CMYK
cmyk(0%, 32%, 52%, 35%)
Oklch
oklch(59.9% 0.083 53.2)

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

#D9C391

Goose Yellow · BurlyWood · Sunflower

HEX
#D9C391
RGB
rgb(217, 195, 145)
HSL
hsl(42, 49%, 71%)
HSB
hsb(42, 33%, 85%)
CMYK
cmyk(0%, 10%, 33%, 15%)
Oklch
oklch(82.4% 0.070 87.0)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2D5473
724C2C

Analogous

2C726E
2D5473
2C3072

Triadic

2D5473
722C53
53722C

Split-Comp.

2D5473
722C30
726E2C

Tetradic

2D5473
6E2C72
724C2C
30722C

Contrast Matrix WCAG 2.1 Contrast

2D5473
21262A
4F282B
A77250
D9C391
—
1.9
Fail
1.6
Fail
2.0
Fail
4.6
AA
1.9
Fail
—
1.2
Fail
3.8
AA Large
8.8
AAA
1.6
Fail
1.2
Fail
—
3.1
AA Large
7.3
AAA
2.0
Fail
3.8
AA Large
3.1
AA Large
—
2.4
Fail
4.6
AA
8.8
AAA
7.3
AAA
2.4
Fail
—
White BG
8.0AAA
15.3AAA
12.6AAA
4.1AA Large
1.7Fail
Black BG
2.6Fail
1.4Fail
1.7Fail
5.2AA
12.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3E3E6B
232329
3E3E2A
909058
CFCF9D

Deuteranopia

3C396A
232329
40432A
93975A
D1D2A0

Tritanopia

2F6664
212828
4D2A2A
A45F60
D8A7A9

Achromatopsia

4C4C4C
252525
343434
7E7E7E
C4C4C4

Shades & Tints Shades & Tints

#2D5473

Dark
Light

#21262A

Dark
Light

#4F282B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2d5473;
  --color-2: #21262a;
  --color-3: #4f282b;
  --color-4: #a77250;
  --color-5: #d9c391;
}

SCSS

$color-1: #2d5473;
$color-2: #21262a;
$color-3: #4f282b;
$color-4: #a77250;
$color-5: #d9c391;

TAILWIND

colors: {
  'brand-1': '#2d5473',
  'brand-2': '#21262a',
  'brand-3': '#4f282b',
  'brand-4': '#a77250',
  'brand-5': '#d9c391',
}

RGB Array

[45, 84, 115], [33, 38, 42], [79, 40, 43], [167, 114, 80], [217, 195, 145]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2D5473, #21262A, #4F282B, #A77250, #D9C391 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #2d5473; --color-2: #21262a; --color-3: #4f282b; --color-4: #a77250; --color-5: #d9c391. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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