← Back to Editor

#DBB716 · #F77331 · #B86840 · #1C130F · #586607

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 AppData Visualization

Color Details Color Details

#DBB716

Ochre · GoldenRod · Honey Gold

HEX
#DBB716
RGB
rgb(219, 183, 22)
HSL
hsl(49, 82%, 47%)
HSB
hsb(49, 90%, 86%)
CMYK
cmyk(0%, 16%, 90%, 14%)
Oklch
oklch(78.8% 0.158 94.2)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#F77331

Tangerine · Tomato · Warm Sun

HEX
#F77331
RGB
rgb(247, 115, 49)
HSL
hsl(20, 93%, 58%)
HSB
hsb(20, 80%, 97%)
CMYK
cmyk(0%, 53%, 80%, 3%)
Oklch
oklch(70.3% 0.179 44.1)

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

#B86840

Tangerine · Sienna · Amber Brown

HEX
#B86840
RGB
rgb(184, 104, 64)
HSL
hsl(20, 48%, 49%)
HSB
hsb(20, 65%, 72%)
CMYK
cmyk(0%, 43%, 65%, 28%)
Oklch
oklch(60.0% 0.116 46.2)

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

#1C130F

Tangerine · Black · Cinnamon

HEX
#1C130F
RGB
rgb(28, 19, 15)
HSL
hsl(18, 30%, 8%)
HSB
hsb(18, 46%, 11%)
CMYK
cmyk(0%, 32%, 46%, 89%)
Oklch
oklch(19.7% 0.017 45.1)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#586607

Autumn Sage · DarkOliveGreen · Amber Gold

HEX
#586607
RGB
rgb(88, 102, 7)
HSL
hsl(69, 87%, 21%)
HSB
hsb(69, 93%, 40%)
CMYK
cmyk(14%, 0%, 93%, 60%)
Oklch
oklch(48.2% 0.110 118.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DBB716
163ADA

Analogous

DA5416
DBB716
9CDA16

Triadic

DBB716
16DAB6
B616DA

Split-Comp.

DBB716
169CDA
5416DA

Tetradic

DBB716
16DA54
163ADA
DA169C

Contrast Matrix WCAG 2.1 Contrast

DBB716
F77331
B86840
1C130F
586607
—
1.4
Fail
2.1
Fail
9.4
AAA
3.3
AA Large
1.4
Fail
—
1.5
Fail
6.5
AA
2.2
Fail
2.1
Fail
1.5
Fail
—
4.4
AA Large
1.5
Fail
9.4
AAA
6.5
AA
4.4
AA Large
—
2.9
Fail
3.3
AA Large
2.2
Fail
1.5
Fail
2.9
Fail
—
White BG
1.9Fail
2.8Fail
4.1AA Large
18.3AAA
6.3AA
Black BG
10.8AAA
7.5AAA
5.1AA
1.1Fail
3.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

CBCB3D
BEBD41
95954A
181810
5E5E1E

Deuteranopia

CED046
C6CF45
9AA04C
191910
5D5C24

Tritanopia

D95C62
F04E50
B45153
1C1111
593034

Achromatopsia

AFAFAF
939393
7B7B7B
151515
575757

Shades & Tints Shades & Tints

#DBB716

Dark
Light

#F77331

Dark
Light

#B86840

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dbb716;
  --color-2: #f77331;
  --color-3: #b86840;
  --color-4: #1c130f;
  --color-5: #586607;
}

SCSS

$color-1: #dbb716;
$color-2: #f77331;
$color-3: #b86840;
$color-4: #1c130f;
$color-5: #586607;

TAILWIND

colors: {
  'brand-1': '#dbb716',
  'brand-2': '#f77331',
  'brand-3': '#b86840',
  'brand-4': '#1c130f',
  'brand-5': '#586607',
}

RGB Array

[219, 183, 22], [247, 115, 49], [184, 104, 64], [28, 19, 15], [88, 102, 7]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DBB716, #F77331, #B86840, #1C130F, #586607 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. 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: #dbb716; --color-2: #f77331; --color-3: #b86840; --color-4: #1c130f; --color-5: #586607. 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 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