#2F3030 + #DED414 + #8F0707 + #918B0C + #3D403F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#2F3030

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#2F3030

RGB

rgb(47, 48, 48)

HSL

hsl(180, 1%, 19%)

HSB

hsb(180, 2%, 19%)

CMYK

cmyk(2%, 0%, 0%, 81%)

Oklch

oklch(30.8% 0.001 197.1)

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

#DED414

Autumn Sage · Gold · Honey Gold

HEX

#DED414

RGB

rgb(222, 212, 20)

HSL

hsl(57, 83%, 47%)

HSB

hsb(57, 91%, 87%)

CMYK

cmyk(0%, 5%, 91%, 13%)

Oklch

oklch(85.1% 0.179 106.1)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#8F0707

Vermilion · DarkRed · Wine Red

HEX

#8F0707

RGB

rgb(143, 7, 7)

HSL

hsl(0, 91%, 29%)

HSB

hsb(0, 95%, 56%)

CMYK

cmyk(0%, 95%, 95%, 44%)

Oklch

oklch(41.1% 0.164 28.6)

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

#918B0C

Autumn Sage · Olive · Honey Gold

HEX

#918B0C

RGB

rgb(145, 139, 12)

HSL

hsl(57, 85%, 31%)

HSB

hsb(57, 92%, 57%)

CMYK

cmyk(0%, 4%, 92%, 43%)

Oklch

oklch(62.2% 0.130 106.5)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#3D403F

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#3D403F

RGB

rgb(61, 64, 63)

HSL

hsl(160, 2%, 25%)

HSB

hsb(160, 5%, 25%)

CMYK

cmyk(5%, 0%, 2%, 75%)

Oklch

oklch(36.8% 0.004 174.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2F3030

313030

Analogous

303130

2F3030

303031

Triadic

2F3030

313031

313130

Split-Comp.

2F3030

313030

Tetradic

2F3030

303031

313030

303130

Contrast Matrix WCAG 2.1 Contrast

2F3030	DED414	8F0707	918B0C	3D403F
—	8.5 AAA	1.4 Fail	3.7 AA Large	1.3 Fail
8.5 AAA	—	6.1 AA	2.3 Fail	6.8 AA
1.4 Fail	6.1 AA	—	2.7 Fail	1.1 Fail
3.7 AA Large	2.3 Fail	2.7 Fail	—	2.9 Fail
1.3 Fail	6.8 AA	1.1 Fail	2.9 Fail	—

White BG

13.2AAA

1.6Fail

9.5AAA

3.6AA Large

10.5AAA

Black BG

1.6Fail

13.5AAA

2.2Fail

5.9AA

2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

2F2F30

DADA42

545307

8E8E2B

3E3E3F

Deuteranopia

2F2F30

DADB4E

5C6607

8F8F32

3E3E3F

Tritanopia

2F3030

DD676F

880707

914348

3D3F3F

Achromatopsia

303030

C1C1C1

303030

7E7E7E

3F3F3F

Shades & Tints Shades & Tints

#2F3030

Dark

Light

#DED414

Dark

Light

#8F0707

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2f3030;
  --color-2: #ded414;
  --color-3: #8f0707;
  --color-4: #918b0c;
  --color-5: #3d403f;
}

SCSS

$color-1: #2f3030;
$color-2: #ded414;
$color-3: #8f0707;
$color-4: #918b0c;
$color-5: #3d403f;

TAILWIND

colors: {
  'brand-1': '#2f3030',
  'brand-2': '#ded414',
  'brand-3': '#8f0707',
  'brand-4': '#918b0c',
  'brand-5': '#3d403f',
}

RGB Array

[47, 48, 48], [222, 212, 20], [143, 7, 7], [145, 139, 12], [61, 64, 63]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2F3030, #DED414, #8F0707, #918B0C, #3D403F 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: #2f3030; --color-2: #ded414; --color-3: #8f0707; --color-4: #918b0c; --color-5: #3d403f. 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