← Back to Editor

#253342 · #BFA976 · #CF3A10 · #827149 · #201528

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

#253342

Indigo · DarkSlateGray · Deep Sea Blue

HEX
#253342
RGB
rgb(37, 51, 66)
HSL
hsl(211, 28%, 20%)
HSB
hsb(211, 44%, 26%)
CMYK
cmyk(44%, 23%, 0%, 74%)
Oklch
oklch(31.5% 0.033 250.6)

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

#BFA976

Ginger · Tan · Sunflower

HEX
#BFA976
RGB
rgb(191, 169, 118)
HSL
hsl(42, 36%, 61%)
HSB
hsb(42, 38%, 75%)
CMYK
cmyk(0%, 12%, 38%, 25%)
Oklch
oklch(74.2% 0.073 87.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#CF3A10

Vermilion · FireBrick · Passion Red

HEX
#CF3A10
RGB
rgb(207, 58, 16)
HSL
hsl(13, 86%, 44%)
HSB
hsb(13, 92%, 81%)
CMYK
cmyk(0%, 72%, 92%, 19%)
Oklch
oklch(56.8% 0.192 34.8)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#827149

Ochre · DimGray · Honey Gold

HEX
#827149
RGB
rgb(130, 113, 73)
HSL
hsl(42, 28%, 40%)
HSB
hsb(42, 44%, 51%)
CMYK
cmyk(0%, 13%, 44%, 49%)
Oklch
oklch(55.5% 0.060 87.4)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#201528

Dark Plum · Black · Dark Purple

HEX
#201528
RGB
rgb(32, 21, 40)
HSL
hsl(275, 31%, 12%)
HSB
hsb(275, 48%, 16%)
CMYK
cmyk(20%, 47%, 0%, 84%)
Oklch
oklch(21.9% 0.039 310.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

253342
413325

Analogous

254141
253342
252541

Triadic

253342
412533
334125

Split-Comp.

253342
412525
414125

Tetradic

253342
412541
413325
254125

Contrast Matrix WCAG 2.1 Contrast

253342
BFA976
CF3A10
827149
201528
—
5.6
AA
2.6
Fail
2.7
Fail
1.4
Fail
5.6
AA
—
2.1
Fail
2.1
Fail
7.6
AAA
2.6
Fail
2.1
Fail
—
1.0
Fail
3.6
AA Large
2.7
Fail
2.1
Fail
1.0
Fail
—
3.7
AA Large
1.4
Fail
7.6
AAA
3.6
AA Large
3.7
AA Large
—
White BG
12.9AAA
2.3Fail
4.9AA
4.8AA
17.5AAA
Black BG
1.6Fail
9.2AAA
4.3AA Large
4.4AA Large
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

2B2B3E
B5B582
8E8D1A
7B7A53
1B1B23

Deuteranopia

2A293D
B7B885
97A21D
7C7D55
1C1D22

Tritanopia

263C3B
BE8C8E
C82224
815A5C
1F201F

Achromatopsia

313131
AAAAAA
626262
727272
1A1A1A

Shades & Tints Shades & Tints

#253342

Dark
Light

#BFA976

Dark
Light

#CF3A10

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #253342;
  --color-2: #bfa976;
  --color-3: #cf3a10;
  --color-4: #827149;
  --color-5: #201528;
}

SCSS

$color-1: #253342;
$color-2: #bfa976;
$color-3: #cf3a10;
$color-4: #827149;
$color-5: #201528;

TAILWIND

colors: {
  'brand-1': '#253342',
  'brand-2': '#bfa976',
  'brand-3': '#cf3a10',
  'brand-4': '#827149',
  'brand-5': '#201528',
}

RGB Array

[37, 51, 66], [191, 169, 118], [207, 58, 16], [130, 113, 73], [32, 21, 40]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #253342, #BFA976, #CF3A10, #827149, #201528 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: #253342; --color-2: #bfa976; --color-3: #cf3a10; --color-4: #827149; --color-5: #201528. 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