← Back to Editor

#280400 · #F8AE2B · #7D633E · #374139 · #253340

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

#280400

Vermilion · Black · Deep Berry

HEX
#280400
RGB
rgb(40, 4, 0)
HSL
hsl(6, 100%, 8%)
HSB
hsb(6, 100%, 16%)
CMYK
cmyk(0%, 90%, 100%, 84%)
Oklch
oklch(18.2% 0.064 35.2)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

#F8AE2B

Ginger · GoldenRod · Warm Sun

HEX
#F8AE2B
RGB
rgb(248, 174, 43)
HSL
hsl(38, 94%, 57%)
HSB
hsb(38, 83%, 97%)
CMYK
cmyk(0%, 30%, 83%, 3%)
Oklch
oklch(80.2% 0.158 75.7)

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

#7D633E

Ochre · Sienna · Amber Brown

HEX
#7D633E
RGB
rgb(125, 99, 62)
HSL
hsl(35, 34%, 37%)
HSB
hsb(35, 50%, 49%)
CMYK
cmyk(0%, 21%, 50%, 51%)
Oklch
oklch(51.7% 0.062 75.4)

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

#374139

Celadon · DarkSlateGray · Dark Stone

HEX
#374139
RGB
rgb(55, 65, 57)
HSL
hsl(132, 8%, 24%)
HSB
hsb(132, 15%, 25%)
CMYK
cmyk(15%, 0%, 12%, 75%)
Oklch
oklch(36.3% 0.019 151.2)

Traditional「Celadon」· Paint「Dark Stone」· Creative Midnight Shadow

#253340

Slate Blue · DarkSlateGray · Deep Sea Blue

HEX
#253340
RGB
rgb(37, 51, 64)
HSL
hsl(209, 27%, 20%)
HSB
hsb(209, 42%, 25%)
CMYK
cmyk(42%, 20%, 0%, 75%)
Oklch
oklch(31.4% 0.030 246.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

280400
002529

Analogous

290010
280400
291800

Triadic

280400
002904
040029

Split-Comp.

280400
002918
001029

Tetradic

280400
102900
002529
180029

Contrast Matrix WCAG 2.1 Contrast

280400
F8AE2B
7D633E
374139
253340
—
10.0
AAA
3.4
AA Large
1.8
Fail
1.5
Fail
10.0
AAA
—
3.0
Fail
5.6
AA
6.8
AA
3.4
AA Large
3.0
Fail
—
1.9
Fail
2.3
Fail
1.8
Fail
5.6
AA
1.9
Fail
—
1.2
Fail
1.5
Fail
6.8
AA
2.3
Fail
1.2
Fail
—
White BG
19.0AAA
1.9Fail
5.6AA
10.6AAA
12.9AAA
Black BG
1.1Fail
11.1AAA
3.7AA Large
2.0Fail
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

181801
D8D74B
727247
3B3B3B
2B2B3D

Deuteranopia

1B1D01
DCE252
737549
3B3A3B
2A293C

Tritanopia

260202
F46469
7C4E50
383C3D
263A3A

Achromatopsia

0E0E0E
B5B5B5
676767
3D3D3D
303030

Shades & Tints Shades & Tints

#280400

Dark
Light

#F8AE2B

Dark
Light

#7D633E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #280400;
  --color-2: #f8ae2b;
  --color-3: #7d633e;
  --color-4: #374139;
  --color-5: #253340;
}

SCSS

$color-1: #280400;
$color-2: #f8ae2b;
$color-3: #7d633e;
$color-4: #374139;
$color-5: #253340;

TAILWIND

colors: {
  'brand-1': '#280400',
  'brand-2': '#f8ae2b',
  'brand-3': '#7d633e',
  'brand-4': '#374139',
  'brand-5': '#253340',
}

RGB Array

[40, 4, 0], [248, 174, 43], [125, 99, 62], [55, 65, 57], [37, 51, 64]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #280400, #F8AE2B, #7D633E, #374139, #253340 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: #280400; --color-2: #f8ae2b; --color-3: #7d633e; --color-4: #374139; --color-5: #253340. 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