← Back to Editor

#281930 · #312F3D · #195E55 · #F7B00A · #F37D2C

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

#281930

Dark Plum · DarkSlateGray · Dark Purple

HEX
#281930
RGB
rgb(40, 25, 48)
HSL
hsl(279, 32%, 14%)
HSB
hsb(279, 48%, 19%)
CMYK
cmyk(17%, 48%, 0%, 81%)
Oklch
oklch(24.4% 0.047 313.2)

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

#312F3D

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#312F3D
RGB
rgb(49, 47, 61)
HSL
hsl(249, 13%, 21%)
HSB
hsb(249, 23%, 24%)
CMYK
cmyk(20%, 23%, 0%, 76%)
Oklch
oklch(31.3% 0.025 291.4)

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

#195E55

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#195E55
RGB
rgb(25, 94, 85)
HSL
hsl(172, 58%, 23%)
HSB
hsb(172, 73%, 37%)
CMYK
cmyk(73%, 0%, 10%, 63%)
Oklch
oklch(43.7% 0.069 182.6)

Traditional「Mineral Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#F7B00A

Ochre · Orange · Honey Gold

HEX
#F7B00A
RGB
rgb(247, 176, 10)
HSL
hsl(42, 94%, 50%)
HSB
hsb(42, 96%, 97%)
CMYK
cmyk(0%, 29%, 96%, 3%)
Oklch
oklch(80.4% 0.165 79.1)

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

#F37D2C

Tangerine · Coral · Warm Sun

HEX
#F37D2C
RGB
rgb(243, 125, 44)
HSL
hsl(24, 89%, 56%)
HSB
hsb(24, 82%, 95%)
CMYK
cmyk(0%, 49%, 82%, 5%)
Oklch
oklch(71.2% 0.169 50.2)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

281930
202F18

Analogous

1C182F
281930
2F182C

Triadic

281930
2F2718
182F27

Split-Comp.

281930
2C2F18
182F1C

Tetradic

281930
2F1C18
202F18
182C2F

Contrast Matrix WCAG 2.1 Contrast

281930
312F3D
195E55
F7B00A
F37D2C
—
1.3
Fail
2.2
Fail
8.8
AAA
6.1
AA
1.3
Fail
—
1.7
Fail
7.0
AA
4.8
AA
2.2
Fail
1.7
Fail
—
4.0
AA Large
2.8
Fail
8.8
AAA
7.0
AA
4.0
AA Large
—
1.4
Fail
6.1
AA
4.8
AA
2.8
Fail
1.4
Fail
—
White BG
16.5AAA
13.1AAA
7.6AAA
1.9Fail
2.7Fail
Black BG
1.3Fail
1.6Fail
2.8Fail
11.2AAA
7.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

22212A
30303A
373757
D8D832
C0BF40

Deuteranopia

222429
303039
332E58
DCE23C
C7D044

Tritanopia

272625
313736
1C5959
F35259
ED4F52

Achromatopsia

202020
313131
484848
B2B2B2
979797

Shades & Tints Shades & Tints

#281930

Dark
Light

#312F3D

Dark
Light

#195E55

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #281930;
  --color-2: #312f3d;
  --color-3: #195e55;
  --color-4: #f7b00a;
  --color-5: #f37d2c;
}

SCSS

$color-1: #281930;
$color-2: #312f3d;
$color-3: #195e55;
$color-4: #f7b00a;
$color-5: #f37d2c;

TAILWIND

colors: {
  'brand-1': '#281930',
  'brand-2': '#312f3d',
  'brand-3': '#195e55',
  'brand-4': '#f7b00a',
  'brand-5': '#f37d2c',
}

RGB Array

[40, 25, 48], [49, 47, 61], [25, 94, 85], [247, 176, 10], [243, 125, 44]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #281930, #312F3D, #195E55, #F7B00A, #F37D2C 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: #281930; --color-2: #312f3d; --color-3: #195e55; --color-4: #f7b00a; --color-5: #f37d2c. 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