← Back to Editor

#DF8D01 · #A56B25 · #5D4746 · #E6DD7B · #65A496

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

#DF8D01

Ochre · GoldenRod · Amber Brown

HEX
#DF8D01
RGB
rgb(223, 141, 1)
HSL
hsl(38, 99%, 44%)
HSB
hsb(38, 100%, 87%)
CMYK
cmyk(0%, 37%, 100%, 13%)
Oklch
oklch(71.1% 0.155 69.0)

TraditionalOchre」· PaintAmber Brown」· Creative Blush Sunrise

#A56B25

Ochre · Sienna · Amber Brown

HEX
#A56B25
RGB
rgb(165, 107, 37)
HSL
hsl(33, 63%, 40%)
HSB
hsb(33, 78%, 65%)
CMYK
cmyk(0%, 35%, 78%, 35%)
Oklch
oklch(57.8% 0.111 66.8)

TraditionalOchre」· PaintAmber Brown」· Creative Blush Sunrise

#5D4746

Crimson · DarkOliveGreen · Wine Red

HEX
#5D4746
RGB
rgb(93, 71, 70)
HSL
hsl(3, 14%, 32%)
HSB
hsb(3, 25%, 36%)
CMYK
cmyk(0%, 24%, 25%, 64%)
Oklch
oklch(42.1% 0.030 21.4)

TraditionalCrimson」· PaintWine Red」· Creative Blush Sunrise

#E6DD7B

Fresh Green · Khaki · Sunflower

HEX
#E6DD7B
RGB
rgb(230, 221, 123)
HSL
hsl(55, 68%, 69%)
HSB
hsb(55, 47%, 90%)
CMYK
cmyk(0%, 4%, 47%, 10%)
Oklch
oklch(88.4% 0.121 103.9)

TraditionalFresh Green」· PaintSunflower」· Creative Lemon Fizz

#65A496

Mineral Blue · CadetBlue · Lake Green

HEX
#65A496
RGB
rgb(101, 164, 150)
HSL
hsl(167, 26%, 52%)
HSB
hsb(167, 38%, 64%)
CMYK
cmyk(38%, 0%, 9%, 36%)
Oklch
oklch(67.2% 0.069 178.4)

TraditionalMineral Blue」· PaintLake Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DF8D01
0153DF

Analogous

DF1F01
DF8D01
C2DF01

Triadic

DF8D01
01DF8E
8E01DF

Split-Comp.

DF8D01
01C2DF
1F01DF

Tetradic

DF8D01
01DF1F
0153DF
DF01C2

Contrast Matrix WCAG 2.1 Contrast

DF8D01
A56B25
5D4746
E6DD7B
65A496
1.7
Fail
3.2
AA Large
1.9
Fail
1.1
Fail
1.7
Fail
1.9
Fail
3.2
AA Large
1.5
Fail
3.2
AA Large
1.9
Fail
6.1
AA
3.0
Fail
1.9
Fail
3.2
AA Large
6.1
AA
2.1
Fail
1.1
Fail
1.5
Fail
3.0
Fail
2.1
Fail
White BG
2.6Fail
4.4AA Large
8.6AAA
1.4Fail
2.9Fail
Black BG
7.9AAA
4.7AA
2.5Fail
15.0AAA
7.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BBBB23
8C8B36
535346
E2E293
808199

Deuteranopia

C0C62B
8F943A
555646
E3E398
7D789A

Tritanopia

DB3E44
A24346
5C4646
E6A5AA
689C9D

Achromatopsia

969696
747474
4D4D4D
D5D5D5
909090

Shades & Tints Shades & Tints

#DF8D01

Dark
Light

#A56B25

Dark
Light

#5D4746

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #df8d01;
  --color-2: #a56b25;
  --color-3: #5d4746;
  --color-4: #e6dd7b;
  --color-5: #65a496;
}

SCSS

$color-1: #df8d01;
$color-2: #a56b25;
$color-3: #5d4746;
$color-4: #e6dd7b;
$color-5: #65a496;

TAILWIND

colors: {
  'brand-1': '#df8d01',
  'brand-2': '#a56b25',
  'brand-3': '#5d4746',
  'brand-4': '#e6dd7b',
  'brand-5': '#65a496',
}

RGB Array

[223, 141, 1], [165, 107, 37], [93, 71, 70], [230, 221, 123], [101, 164, 150]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DF8D01, #A56B25, #5D4746, #E6DD7B, #65A496 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: #df8d01; --color-2: #a56b25; --color-3: #5d4746; --color-4: #e6dd7b; --color-5: #65a496. 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