← Back to Editor

#312F07 · #969117 · #F2FD03 · #9F4117 · #80145C

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#312F07

Autumn Sage · Black · Amber Gold

HEX
#312F07
RGB
rgb(49, 47, 7)
HSL
hsl(57, 75%, 11%)
HSB
hsb(57, 86%, 19%)
CMYK
cmyk(0%, 4%, 86%, 81%)
Oklch
oklch(29.8% 0.057 106.5)

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

#969117

Autumn Sage · Olive · Honey Gold

HEX
#969117
RGB
rgb(150, 145, 23)
HSL
hsl(58, 73%, 34%)
HSB
hsb(58, 85%, 59%)
CMYK
cmyk(0%, 3%, 85%, 41%)
Oklch
oklch(64.1% 0.131 107.0)

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

#F2FD03

Autumn Sage · Yellow · Honey Gold

HEX
#F2FD03
RGB
rgb(242, 253, 3)
HSL
hsl(63, 98%, 50%)
HSB
hsb(63, 99%, 99%)
CMYK
cmyk(4%, 0%, 99%, 1%)
Oklch
oklch(95.4% 0.212 112.9)

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

#9F4117

Tangerine · Sienna · Amber Brown

HEX
#9F4117
RGB
rgb(159, 65, 23)
HSL
hsl(19, 75%, 36%)
HSB
hsb(19, 86%, 62%)
CMYK
cmyk(0%, 59%, 86%, 38%)
Oklch
oklch(49.6% 0.136 41.6)

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

#80145C

Rose Purple · Purple · Camellia

HEX
#80145C
RGB
rgb(128, 20, 92)
HSL
hsl(320, 73%, 29%)
HSB
hsb(320, 84%, 50%)
CMYK
cmyk(0%, 84%, 28%, 50%)
Oklch
oklch(40.9% 0.157 345.8)

Traditional「Rose Purple」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

312F07
070931

Analogous

311A07
312F07
1E3107

Triadic

312F07
07312F
2F0731

Split-Comp.

312F07
071E31
1A0731

Tetradic

312F07
07311A
070931
31071E

Contrast Matrix WCAG 2.1 Contrast

312F07
969117
F2FD03
9F4117
80145C
—
4.1
AA Large
12.2
AAA
2.1
Fail
1.4
Fail
4.1
AA Large
—
3.0
Fail
2.0
Fail
2.9
Fail
12.2
AAA
3.0
Fail
—
5.8
AA
8.7
AAA
2.1
Fail
2.0
Fail
5.8
AA
—
1.5
Fail
1.4
Fail
2.9
Fail
8.7
AAA
1.5
Fail
—
White BG
13.6AAA
3.3AA Large
1.1Fail
6.5AA
9.7AAA
Black BG
1.5Fail
6.4AA
18.8AAA
3.2AA Large
2.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

303011
949435
F7F740
767521
51504B

Deuteranopia

303013
94953C
F6F54E
7C8324
586046

Tritanopia

31181A
964C51
F36F7A
9A292B
7B3D3A

Achromatopsia

2B2B2B
858585
DDDDDD
585858
3D3D3D

Shades & Tints Shades & Tints

#312F07

Dark
Light

#969117

Dark
Light

#F2FD03

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #312f07;
  --color-2: #969117;
  --color-3: #f2fd03;
  --color-4: #9f4117;
  --color-5: #80145c;
}

SCSS

$color-1: #312f07;
$color-2: #969117;
$color-3: #f2fd03;
$color-4: #9f4117;
$color-5: #80145c;

TAILWIND

colors: {
  'brand-1': '#312f07',
  'brand-2': '#969117',
  'brand-3': '#f2fd03',
  'brand-4': '#9f4117',
  'brand-5': '#80145c',
}

RGB Array

[49, 47, 7], [150, 145, 23], [242, 253, 3], [159, 65, 23], [128, 20, 92]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #312F07, #969117, #F2FD03, #9F4117, #80145C is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #312f07; --color-2: #969117; --color-3: #f2fd03; --color-4: #9f4117; --color-5: #80145c. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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