#464247 + #FF310A + #FF6C0A + #4B5047 + #475C5C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#464247

Dark Cyan · DarkSlateGray · Charcoal

HEX

#464247

RGB

rgb(70, 66, 71)

HSL

hsl(288, 4%, 27%)

HSB

hsb(288, 7%, 28%)

CMYK

cmyk(1%, 7%, 0%, 72%)

Oklch

oklch(38.5% 0.010 319.5)

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

#FF310A

Vermilion · OrangeRed · Passion Red

HEX

#FF310A

RGB

rgb(255, 49, 10)

HSL

hsl(10, 100%, 52%)

HSB

hsb(10, 96%, 100%)

CMYK

cmyk(0%, 81%, 96%, 0%)

Oklch

oklch(64.5% 0.242 31.8)

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

#FF6C0A

Tangerine · OrangeRed · Warm Sun

HEX

#FF6C0A

RGB

rgb(255, 108, 10)

HSL

hsl(24, 100%, 52%)

HSB

hsb(24, 96%, 100%)

CMYK

cmyk(0%, 58%, 96%, 0%)

Oklch

oklch(70.4% 0.199 44.9)

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

#4B5047

Dark Cyan · DarkSlateGray · Charcoal

HEX

#4B5047

RGB

rgb(75, 80, 71)

HSL

hsl(93, 6%, 30%)

HSB

hsb(93, 11%, 31%)

CMYK

cmyk(6%, 0%, 11%, 69%)

Oklch

oklch(42.4% 0.016 131.0)

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

#475C5C

Slate Blue · DarkSlateGray · Mint Ice

HEX

#475C5C

RGB

rgb(71, 92, 92)

HSL

hsl(180, 13%, 32%)

HSB

hsb(180, 23%, 36%)

CMYK

cmyk(23%, 0%, 0%, 64%)

Oklch

oklch(45.8% 0.026 196.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

464247

434842

Analogous

444248

464247

484246

Triadic

464247

484742

424847

Split-Comp.

464247

464842

424844

Tetradic

464247

484442

434842

424648

Contrast Matrix WCAG 2.1 Contrast

464247	FF310A	FF6C0A	4B5047	475C5C
—	2.7 Fail	3.5 AA Large	1.2 Fail	1.4 Fail
2.7 Fail	—	1.3 Fail	2.2 Fail	1.9 Fail
3.5 AA Large	1.3 Fail	—	2.9 Fail	2.5 Fail
1.2 Fail	2.2 Fail	2.9 Fail	—	1.2 Fail
1.4 Fail	1.9 Fail	2.5 Fail	1.2 Fail	—

White BG

9.9AAA

3.7AA Large

2.8Fail

8.3AAA

7.1AAA

Black BG

2.1Fail

5.7AA

7.4AAA

2.5Fail

3.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

444446

A6A413

BFBE22

4D4D49

50505C

Deuteranopia

454546

B2C116

C8D327

4D4D4A

4F4D5C

Tritanopia

464545

F51B1D

F83439

4B4B4B

485C5C

Achromatopsia

444444

6A6A6A

8D8D8D

4D4D4D

565656

Shades & Tints Shades & Tints

#464247

Dark

Light

#FF310A

Dark

Light

#FF6C0A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #464247;
  --color-2: #ff310a;
  --color-3: #ff6c0a;
  --color-4: #4b5047;
  --color-5: #475c5c;
}

SCSS

$color-1: #464247;
$color-2: #ff310a;
$color-3: #ff6c0a;
$color-4: #4b5047;
$color-5: #475c5c;

TAILWIND

colors: {
  'brand-1': '#464247',
  'brand-2': '#ff310a',
  'brand-3': '#ff6c0a',
  'brand-4': '#4b5047',
  'brand-5': '#475c5c',
}

RGB Array

[70, 66, 71], [255, 49, 10], [255, 108, 10], [75, 80, 71], [71, 92, 92]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #464247, #FF310A, #FF6C0A, #4B5047, #475C5C is ideal for: tech websites, dark mode UIs, game UIs. 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: #464247; --color-2: #ff310a; --color-3: #ff6c0a; --color-4: #4b5047; --color-5: #475c5c. 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. 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