← Back to Editor

#363131 · #D62C1F · #85E0B1 · #FFF9F1 · #78685F

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#363131

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#363131
RGB
rgb(54, 49, 49)
HSL
hsl(0, 5%, 20%)
HSB
hsb(0, 9%, 21%)
CMYK
cmyk(0%, 9%, 9%, 79%)
Oklch
oklch(31.8% 0.007 17.5)

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

#D62C1F

Vermilion · FireBrick · Passion Red

HEX
#D62C1F
RGB
rgb(214, 44, 31)
HSL
hsl(4, 75%, 48%)
HSB
hsb(4, 86%, 84%)
CMYK
cmyk(0%, 79%, 86%, 16%)
Oklch
oklch(57.0% 0.207 29.5)

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

#85E0B1

Emerald · MediumAquaMarine · Apple Green

HEX
#85E0B1
RGB
rgb(133, 224, 177)
HSL
hsl(149, 59%, 70%)
HSB
hsb(149, 41%, 88%)
CMYK
cmyk(41%, 0%, 21%, 12%)
Oklch
oklch(83.7% 0.111 160.2)

Traditional「Emerald」· Paint「Apple Green」· Creative Mint Breeze

#FFF9F1

Goose Yellow · SeaShell · Peach Orange

HEX
#FFF9F1
RGB
rgb(255, 249, 241)
HSL
hsl(34, 100%, 97%)
HSB
hsb(34, 5%, 100%)
CMYK
cmyk(0%, 2%, 5%, 0%)
Oklch
oklch(98.5% 0.012 75.4)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#78685F

Tangerine · DimGray · Amber Brown

HEX
#78685F
RGB
rgb(120, 104, 95)
HSL
hsl(22, 12%, 42%)
HSB
hsb(22, 21%, 47%)
CMYK
cmyk(0%, 13%, 21%, 53%)
Oklch
oklch(53.0% 0.025 51.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

363131
303636

Analogous

363033
363131
363330

Triadic

363131
303630
303036

Split-Comp.

363131
303633
303336

Tetradic

363131
333630
303636
333036

Contrast Matrix WCAG 2.1 Contrast

363131
D62C1F
85E0B1
FFF9F1
78685F
—
2.6
Fail
8.1
AAA
12.2
AAA
2.4
Fail
2.6
Fail
—
3.1
AA Large
4.7
AA
1.1
Fail
8.1
AAA
3.1
AA Large
—
1.5
Fail
3.4
AA Large
12.2
AAA
4.7
AA
1.5
Fail
—
5.1
AA
2.4
Fail
1.1
Fail
3.4
AA Large
5.1
AA
—
White BG
12.8AAA
5.0AA
1.6Fail
1.0Fail
5.3AA
Black BG
1.6Fail
4.2AA Large
13.3AAA
20.1AAA
3.9AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

343431
8C8B22
ACADBC
FCFCF3
717161

Deuteranopia

343531
96A323
A7A0BF
FDFDF3
727362

Tritanopia

363131
CD2525
8AC5C7
FFF4F5
776363

Achromatopsia

323232
5D5D5D
BFBFBF
FAFAFA
6C6C6C

Shades & Tints Shades & Tints

#363131

Dark
Light

#D62C1F

Dark
Light

#85E0B1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #363131;
  --color-2: #d62c1f;
  --color-3: #85e0b1;
  --color-4: #fff9f1;
  --color-5: #78685f;
}

SCSS

$color-1: #363131;
$color-2: #d62c1f;
$color-3: #85e0b1;
$color-4: #fff9f1;
$color-5: #78685f;

TAILWIND

colors: {
  'brand-1': '#363131',
  'brand-2': '#d62c1f',
  'brand-3': '#85e0b1',
  'brand-4': '#fff9f1',
  'brand-5': '#78685f',
}

RGB Array

[54, 49, 49], [214, 44, 31], [133, 224, 177], [255, 249, 241], [120, 104, 95]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #363131, #D62C1F, #85E0B1, #FFF9F1, #78685F is ideal for: 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: #363131; --color-2: #d62c1f; --color-3: #85e0b1; --color-4: #fff9f1; --color-5: #78685f. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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