← Back to Editor

#FFBF51 · #D56B43 · #514A40 · #3A312C · #321F25

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#FFBF51

Ginger · SandyBrown · Warm Sun

HEX
#FFBF51
RGB
rgb(255, 191, 81)
HSL
hsl(38, 100%, 66%)
HSB
hsb(38, 68%, 100%)
CMYK
cmyk(0%, 25%, 68%, 0%)
Oklch
oklch(84.4% 0.144 77.9)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#D56B43

Tangerine · Chocolate · Warm Sun

HEX
#D56B43
RGB
rgb(213, 107, 67)
HSL
hsl(16, 63%, 55%)
HSB
hsb(16, 69%, 84%)
CMYK
cmyk(0%, 50%, 69%, 16%)
Oklch
oklch(64.5% 0.144 40.7)

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

#514A40

Ochre · DarkOliveGreen · Amber Brown

HEX
#514A40
RGB
rgb(81, 74, 64)
HSL
hsl(35, 12%, 28%)
HSB
hsb(35, 21%, 32%)
CMYK
cmyk(0%, 9%, 21%, 68%)
Oklch
oklch(41.3% 0.019 76.9)

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

#3A312C

Tangerine · DarkSlateGray · Cinnamon

HEX
#3A312C
RGB
rgb(58, 49, 44)
HSL
hsl(21, 14%, 20%)
HSB
hsb(21, 24%, 23%)
CMYK
cmyk(0%, 16%, 24%, 77%)
Oklch
oklch(32.1% 0.016 50.9)

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

#321F25

Dark Violet · DarkSlateGray · Raspberry

HEX
#321F25
RGB
rgb(50, 31, 37)
HSL
hsl(341, 23%, 16%)
HSB
hsb(341, 38%, 20%)
CMYK
cmyk(0%, 38%, 26%, 80%)
Oklch
oklch(26.6% 0.031 358.9)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFBF51
5291FF

Analogous

FF6952
FFBF51
E8FF52

Triadic

FFBF51
52FFBF
BF52FF

Split-Comp.

FFBF51
52E8FF
6952FF

Tetradic

FFBF51
52FF69
5291FF
FF52E8

Contrast Matrix WCAG 2.1 Contrast

FFBF51
D56B43
514A40
3A312C
321F25
—
2.1
Fail
5.3
AA
7.7
AAA
9.4
AAA
2.1
Fail
—
2.5
Fail
3.6
AA Large
4.4
AA Large
5.3
AA
2.5
Fail
—
1.5
Fail
1.8
Fail
7.7
AAA
3.6
AA Large
1.5
Fail
—
1.2
Fail
9.4
AAA
4.4
AA Large
1.8
Fail
1.2
Fail
—
White BG
1.6Fail
3.5AA Large
8.7AAA
12.7AAA
15.5AAA
Black BG
12.8AAA
6.0AA
2.4Fail
1.7Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E3E36C
A7A64D
4E4E42
36362D
2A2A24

Deuteranopia

E7EC72
ADB54F
4E4F43
37372E
2B2C23

Tritanopia

FC8185
D05456
514445
3A2E2E
312222

Achromatopsia

C6C6C6
868686
4B4B4B
333333
252525

Shades & Tints Shades & Tints

#FFBF51

Dark
Light

#D56B43

Dark
Light

#514A40

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffbf51;
  --color-2: #d56b43;
  --color-3: #514a40;
  --color-4: #3a312c;
  --color-5: #321f25;
}

SCSS

$color-1: #ffbf51;
$color-2: #d56b43;
$color-3: #514a40;
$color-4: #3a312c;
$color-5: #321f25;

TAILWIND

colors: {
  'brand-1': '#ffbf51',
  'brand-2': '#d56b43',
  'brand-3': '#514a40',
  'brand-4': '#3a312c',
  'brand-5': '#321f25',
}

RGB Array

[255, 191, 81], [213, 107, 67], [81, 74, 64], [58, 49, 44], [50, 31, 37]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFBF51, #D56B43, #514A40, #3A312C, #321F25 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #ffbf51; --color-2: #d56b43; --color-3: #514a40; --color-4: #3a312c; --color-5: #321f25. 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 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