← Back to Editor

#080733 · #312145 · #395D53 · #B8B774 · #F7CF87

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

#080733

Deep Indigo · Black · Deep Sea Blue

HEX
#080733
RGB
rgb(8, 7, 51)
HSL
hsl(241, 76%, 11%)
HSB
hsb(241, 86%, 20%)
CMYK
cmyk(84%, 86%, 0%, 80%)
Oklch
oklch(17.2% 0.083 274.4)

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

#312145

Deep Indigo · DarkSlateGray · Dark Purple

HEX
#312145
RGB
rgb(49, 33, 69)
HSL
hsl(267, 35%, 20%)
HSB
hsb(267, 52%, 27%)
CMYK
cmyk(29%, 52%, 0%, 73%)
Oklch
oklch(28.6% 0.066 303.0)

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

#395D53

Mineral Blue · DarkSlateGray · Mint Ice

HEX
#395D53
RGB
rgb(57, 93, 83)
HSL
hsl(163, 24%, 29%)
HSB
hsb(163, 39%, 36%)
CMYK
cmyk(39%, 0%, 11%, 64%)
Oklch
oklch(44.8% 0.045 174.7)

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

#B8B774

Autumn Sage · Tan · Sunflower

HEX
#B8B774
RGB
rgb(184, 183, 116)
HSL
hsl(59, 32%, 59%)
HSB
hsb(59, 37%, 72%)
CMYK
cmyk(0%, 1%, 37%, 28%)
Oklch
oklch(76.5% 0.088 107.6)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#F7CF87

Goose Yellow · Khaki · Warm Sun

HEX
#F7CF87
RGB
rgb(247, 207, 135)
HSL
hsl(39, 88%, 75%)
HSB
hsb(39, 45%, 97%)
CMYK
cmyk(0%, 16%, 45%, 3%)
Oklch
oklch(87.3% 0.101 81.5)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

080733
313107

Analogous

071B31
080733
1D0731

Triadic

080733
310707
073107

Split-Comp.

080733
311D07
1B3107

Tetradic

080733
31071B
313107
07311D

Contrast Matrix WCAG 2.1 Contrast

080733
312145
395D53
B8B774
F7CF87
—
1.3
Fail
2.6
Fail
9.2
AAA
13.1
AAA
1.3
Fail
—
2.0
Fail
7.0
AAA
9.9
AAA
2.6
Fail
2.0
Fail
—
3.5
AA Large
5.0
AA
9.2
AAA
7.0
AAA
3.5
AA Large
—
1.4
Fail
13.1
AAA
9.9
AAA
5.0
AA
1.4
Fail
—
White BG
19.3AAA
14.6AAA
7.3AAA
2.1Fail
1.5Fail
Black BG
1.1Fail
1.4Fail
2.9Fail
10.1AAA
14.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

080828
2A2A3C
494955
B8B884
E6E598

Deuteranopia

080826
2B2C3A
474456
B8B888
E8EB9D

Tritanopia

08201E
303534
3B5758
B89194
F5A6A9

Achromatopsia

0C0C0C
2A2A2A
515151
B0B0B0
D3D3D3

Shades & Tints Shades & Tints

#080733

Dark
Light

#312145

Dark
Light

#395D53

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #080733;
  --color-2: #312145;
  --color-3: #395d53;
  --color-4: #b8b774;
  --color-5: #f7cf87;
}

SCSS

$color-1: #080733;
$color-2: #312145;
$color-3: #395d53;
$color-4: #b8b774;
$color-5: #f7cf87;

TAILWIND

colors: {
  'brand-1': '#080733',
  'brand-2': '#312145',
  'brand-3': '#395d53',
  'brand-4': '#b8b774',
  'brand-5': '#f7cf87',
}

RGB Array

[8, 7, 51], [49, 33, 69], [57, 93, 83], [184, 183, 116], [247, 207, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #080733, #312145, #395D53, #B8B774, #F7CF87 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: #080733; --color-2: #312145; --color-3: #395d53; --color-4: #b8b774; --color-5: #f7cf87. 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