← Back to Editor

#705B53 · #59453B · #A35CAD · #DB709B · #FF5B14

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 Library

Color Details Color Details

#705B53

Tangerine · DimGray · Amber Brown

HEX
#705B53
RGB
rgb(112, 91, 83)
HSL
hsl(17, 15%, 38%)
HSB
hsb(17, 26%, 44%)
CMYK
cmyk(0%, 19%, 26%, 56%)
Oklch
oklch(49.0% 0.030 41.9)

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

#59453B

Tangerine · DarkOliveGreen · Amber Brown

HEX
#59453B
RGB
rgb(89, 69, 59)
HSL
hsl(20, 20%, 29%)
HSB
hsb(20, 34%, 35%)
CMYK
cmyk(0%, 22%, 34%, 65%)
Oklch
oklch(40.9% 0.032 47.9)

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

#A35CAD

Dark Plum · MediumOrchid · Violet

HEX
#A35CAD
RGB
rgb(163, 92, 173)
HSL
hsl(293, 33%, 52%)
HSB
hsb(293, 47%, 68%)
CMYK
cmyk(6%, 47%, 0%, 32%)
Oklch
oklch(58.7% 0.142 322.5)

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

#DB709B

Rouge · LightCoral · Rose Pink

HEX
#DB709B
RGB
rgb(219, 112, 155)
HSL
hsl(336, 60%, 65%)
HSB
hsb(336, 49%, 86%)
CMYK
cmyk(0%, 49%, 29%, 14%)
Oklch
oklch(68.0% 0.141 356.1)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#FF5B14

Tangerine · OrangeRed · Warm Sun

HEX
#FF5B14
RGB
rgb(255, 91, 20)
HSL
hsl(18, 100%, 54%)
HSB
hsb(18, 92%, 100%)
CMYK
cmyk(0%, 64%, 92%, 0%)
Oklch
oklch(68.3% 0.211 39.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

705B53
52676F

Analogous

6F5259
705B53
6F6952

Triadic

705B53
526F5B
5B526F

Split-Comp.

705B53
526F69
52596F

Tetradic

705B53
596F52
52676F
69526F

Contrast Matrix WCAG 2.1 Contrast

705B53
59453B
A35CAD
DB709B
FF5B14
—
1.4
Fail
1.4
Fail
2.1
Fail
2.0
Fail
1.4
Fail
—
2.0
Fail
2.9
Fail
2.9
Fail
1.4
Fail
2.0
Fail
—
1.5
Fail
1.4
Fail
2.1
Fail
2.9
Fail
1.5
Fail
—
1.0
Fail
2.0
Fail
2.9
Fail
1.4
Fail
1.0
Fail
—
White BG
6.3AA
9.0AAA
4.5AA Large
3.1AA Large
3.1AA Large
Black BG
3.3AA Large
2.3Fail
4.7AA
6.8AA
6.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

676755
50503D
848499
ADAC91
B8B725

Deuteranopia

686A55
52533E
888E95
B3BB8E
C2CE29

Tritanopia

6F5657
583F40
9F8A87
D68887
F73336

Achromatopsia

606060
4A4A4A
7A7A7A
959595
848484

Shades & Tints Shades & Tints

#705B53

Dark
Light

#59453B

Dark
Light

#A35CAD

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #705b53;
  --color-2: #59453b;
  --color-3: #a35cad;
  --color-4: #db709b;
  --color-5: #ff5b14;
}

SCSS

$color-1: #705b53;
$color-2: #59453b;
$color-3: #a35cad;
$color-4: #db709b;
$color-5: #ff5b14;

TAILWIND

colors: {
  'brand-1': '#705b53',
  'brand-2': '#59453b',
  'brand-3': '#a35cad',
  'brand-4': '#db709b',
  'brand-5': '#ff5b14',
}

RGB Array

[112, 91, 83], [89, 69, 59], [163, 92, 173], [219, 112, 155], [255, 91, 20]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #705B53, #59453B, #A35CAD, #DB709B, #FF5B14 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: #705b53; --color-2: #59453b; --color-3: #a35cad; --color-4: #db709b; --color-5: #ff5b14. 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