← Back to Editor

#FF5805 · #D96830 · #B36B47 · #67568F · #673FC4

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#FF5805

Tangerine · OrangeRed · Warm Sun

HEX
#FF5805
RGB
rgb(255, 88, 5)
HSL
hsl(20, 100%, 51%)
HSB
hsb(20, 98%, 100%)
CMYK
cmyk(0%, 65%, 98%, 0%)
Oklch
oklch(67.9% 0.215 39.3)

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

#D96830

Tangerine · Chocolate · Warm Sun

HEX
#D96830
RGB
rgb(217, 104, 48)
HSL
hsl(20, 69%, 52%)
HSB
hsb(20, 78%, 85%)
CMYK
cmyk(0%, 52%, 78%, 15%)
Oklch
oklch(64.4% 0.158 44.4)

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

#B36B47

Tangerine · Sienna · Amber Brown

HEX
#B36B47
RGB
rgb(179, 107, 71)
HSL
hsl(20, 43%, 49%)
HSB
hsb(20, 60%, 70%)
CMYK
cmyk(0%, 40%, 60%, 30%)
Oklch
oklch(60.0% 0.105 46.6)

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

#67568F

Deep Indigo · DarkSlateBlue · Navy Blue

HEX
#67568F
RGB
rgb(103, 86, 143)
HSL
hsl(258, 25%, 45%)
HSB
hsb(258, 40%, 56%)
CMYK
cmyk(28%, 40%, 0%, 44%)
Oklch
oklch(49.5% 0.091 296.7)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#673FC4

Deep Indigo · SlateBlue · Navy Blue

HEX
#673FC4
RGB
rgb(103, 63, 196)
HSL
hsl(258, 53%, 51%)
HSB
hsb(258, 68%, 77%)
CMYK
cmyk(47%, 68%, 0%, 23%)
Oklch
oklch(49.2% 0.195 291.3)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF5805
05ACFF

Analogous

FF052F
FF5805
FFD505

Triadic

FF5805
05FF58
5805FF

Split-Comp.

FF5805
05FFD5
052FFF

Tetradic

FF5805
2FFF05
05ACFF
D505FF

Contrast Matrix WCAG 2.1 Contrast

FF5805
D96830
B36B47
67568F
673FC4
—
1.1
Fail
1.3
Fail
2.0
Fail
2.2
Fail
1.1
Fail
—
1.2
Fail
1.8
Fail
1.9
Fail
1.3
Fail
1.2
Fail
—
1.5
Fail
1.7
Fail
2.0
Fail
1.8
Fail
1.5
Fail
—
1.1
Fail
2.2
Fail
1.9
Fail
1.7
Fail
1.1
Fail
—
White BG
3.2AA Large
3.5AA Large
4.1AA Large
6.4AA
6.8AA
Black BG
6.7AA
6.0AA
5.1AA
3.3AA Large
3.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

B7B519
A8A73E
949350
605F81
5655A4

Deuteranopia

C0CD1E
AFB741
989D52
61627E
585B9C

Tritanopia

F7292C
D3484B
AF5758
667674
658A85

Achromatopsia

808080
838383
7C7C7C
626262
5A5A5A

Shades & Tints Shades & Tints

#FF5805

Dark
Light

#D96830

Dark
Light

#B36B47

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff5805;
  --color-2: #d96830;
  --color-3: #b36b47;
  --color-4: #67568f;
  --color-5: #673fc4;
}

SCSS

$color-1: #ff5805;
$color-2: #d96830;
$color-3: #b36b47;
$color-4: #67568f;
$color-5: #673fc4;

TAILWIND

colors: {
  'brand-1': '#ff5805',
  'brand-2': '#d96830',
  'brand-3': '#b36b47',
  'brand-4': '#67568f',
  'brand-5': '#673fc4',
}

RGB Array

[255, 88, 5], [217, 104, 48], [179, 107, 71], [103, 86, 143], [103, 63, 196]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF5805, #D96830, #B36B47, #67568F, #673FC4 is ideal for: corporate websites, product showcases, portfolios. 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: #ff5805; --color-2: #d96830; --color-3: #b36b47; --color-4: #67568f; --color-5: #673fc4. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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