← Back to Editor

#FD8507 · #BB8A47 · #7D7757 · #992F00 · #030300

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

#FD8507

Ginger · Orange · Warm Sun

HEX
#FD8507
RGB
rgb(253, 133, 7)
HSL
hsl(31, 98%, 51%)
HSB
hsb(31, 97%, 99%)
CMYK
cmyk(0%, 47%, 97%, 1%)
Oklch
oklch(73.7% 0.180 55.3)

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

#BB8A47

Ginger · GoldenRod · Warm Sun

HEX
#BB8A47
RGB
rgb(187, 138, 71)
HSL
hsl(35, 46%, 51%)
HSB
hsb(35, 62%, 73%)
CMYK
cmyk(0%, 26%, 62%, 27%)
Oklch
oklch(66.8% 0.103 73.0)

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

#7D7757

Autumn Sage · DimGray · Honey Gold

HEX
#7D7757
RGB
rgb(125, 119, 87)
HSL
hsl(51, 18%, 42%)
HSB
hsb(51, 30%, 49%)
CMYK
cmyk(0%, 5%, 30%, 51%)
Oklch
oklch(56.6% 0.047 98.7)

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

#992F00

Tangerine · Brown · Amber Brown

HEX
#992F00
RGB
rgb(153, 47, 0)
HSL
hsl(18, 100%, 30%)
HSB
hsb(18, 100%, 60%)
CMYK
cmyk(0%, 69%, 100%, 40%)
Oklch
oklch(46.1% 0.149 38.6)

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

#030300

Autumn Sage · Black · Amber Gold

HEX
#030300
RGB
rgb(3, 3, 0)
HSL
hsl(60, 100%, 1%)
HSB
hsb(60, 100%, 1%)
CMYK
cmyk(0%, 0%, 100%, 99%)
Oklch
oklch(9.4% 0.020 109.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FD8507
087EFD

Analogous

FD0C08
FD8507
F8FD08

Triadic

FD8507
08FD86
8608FD

Split-Comp.

FD8507
08F8FD
0C08FD

Tetradic

FD8507
08FD0C
087EFD
FD08F8

Contrast Matrix WCAG 2.1 Contrast

FD8507
BB8A47
7D7757
992F00
030300
—
1.2
Fail
1.8
Fail
3.1
AA Large
8.4
AAA
1.2
Fail
—
1.5
Fail
2.5
Fail
6.7
AA
1.8
Fail
1.5
Fail
—
1.7
Fail
4.6
AA
3.1
AA Large
2.5
Fail
1.7
Fail
—
2.7
Fail
8.4
AAA
6.7
AA
4.6
AA
2.7
Fail
—
White BG
2.5Fail
3.1AA Large
4.5AA
7.6AAA
20.7AAA
Black BG
8.5AAA
6.8AA
4.6AA
2.8Fail
1.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C9C825
A6A557
7A7A5F
6B6A0B
030301

Deuteranopia

D0D92D
A9AC5B
7B7B61
71790E
030301

Tritanopia

F73E43
B96467
7D6566
941416
030101

Achromatopsia

9B9B9B
919191
757575
494949
030303

Shades & Tints Shades & Tints

#FD8507

Dark
Light

#BB8A47

Dark
Light

#7D7757

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fd8507;
  --color-2: #bb8a47;
  --color-3: #7d7757;
  --color-4: #992f00;
  --color-5: #030300;
}

SCSS

$color-1: #fd8507;
$color-2: #bb8a47;
$color-3: #7d7757;
$color-4: #992f00;
$color-5: #030300;

TAILWIND

colors: {
  'brand-1': '#fd8507',
  'brand-2': '#bb8a47',
  'brand-3': '#7d7757',
  'brand-4': '#992f00',
  'brand-5': '#030300',
}

RGB Array

[253, 133, 7], [187, 138, 71], [125, 119, 87], [153, 47, 0], [3, 3, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FD8507, #BB8A47, #7D7757, #992F00, #030300 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: #fd8507; --color-2: #bb8a47; --color-3: #7d7757; --color-4: #992f00; --color-5: #030300. 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