← Back to Editor

#AFAF6F · #D69F20 · #CE5E37 · #B3703A · #715F4D

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

#AFAF6F

Autumn Sage · Tan · Sunflower

HEX
#AFAF6F
RGB
rgb(175, 175, 111)
HSL
hsl(60, 29%, 56%)
HSB
hsb(60, 37%, 69%)
CMYK
cmyk(0%, 0%, 37%, 31%)
Oklch
oklch(73.9% 0.085 108.3)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#D69F20

Ochre · GoldenRod · Honey Gold

HEX
#D69F20
RGB
rgb(214, 159, 32)
HSL
hsl(42, 74%, 48%)
HSB
hsb(42, 85%, 84%)
CMYK
cmyk(0%, 26%, 85%, 16%)
Oklch
oklch(73.6% 0.144 82.1)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#CE5E37

Tangerine · Chocolate · Warm Sun

HEX
#CE5E37
RGB
rgb(206, 94, 55)
HSL
hsl(15, 61%, 51%)
HSB
hsb(15, 73%, 81%)
CMYK
cmyk(0%, 54%, 73%, 19%)
Oklch
oklch(61.4% 0.152 39.2)

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

#B3703A

Tangerine · Sienna · Amber Brown

HEX
#B3703A
RGB
rgb(179, 112, 58)
HSL
hsl(27, 51%, 46%)
HSB
hsb(27, 68%, 70%)
CMYK
cmyk(0%, 37%, 68%, 30%)
Oklch
oklch(60.7% 0.110 57.4)

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

#715F4D

Ochre · DimGray · Amber Brown

HEX
#715F4D
RGB
rgb(113, 95, 77)
HSL
hsl(30, 19%, 37%)
HSB
hsb(30, 32%, 44%)
CMYK
cmyk(0%, 16%, 32%, 56%)
Oklch
oklch(49.8% 0.036 66.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AFAF6F
6E6EAF

Analogous

AF8F6E
AFAF6F
8FAF6E

Triadic

AFAF6F
6EAFAF
AF6EAF

Split-Comp.

AFAF6F
6E8FAF
8F6EAF

Tetradic

AFAF6F
6EAF8F
6E6EAF
AF6E8F

Contrast Matrix WCAG 2.1 Contrast

AFAF6F
D69F20
CE5E37
B3703A
715F4D
—
1.0
Fail
1.7
Fail
1.7
Fail
2.7
Fail
1.0
Fail
—
1.7
Fail
1.7
Fail
2.6
Fail
1.7
Fail
1.7
Fail
—
1.0
Fail
1.5
Fail
1.7
Fail
1.7
Fail
1.0
Fail
—
1.5
Fail
2.7
Fail
2.6
Fail
1.5
Fail
1.5
Fail
—
White BG
2.3Fail
2.4Fail
4.0AA Large
4.0AA Large
6.1AA
Black BG
9.2AAA
8.8AAA
5.3AA
5.3AA
3.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

AFAF7E
BEBE3F
9E9C40
969547
696951

Deuteranopia

AFAF82
C1C546
A4AC43
9A9F4A
6A6C52

Tritanopia

AF8B8D
D3575C
C8484A
B05154
705556

Achromatopsia

A8A8A8
A1A1A1
7B7B7B
7E7E7E
626262

Shades & Tints Shades & Tints

#AFAF6F

Dark
Light

#D69F20

Dark
Light

#CE5E37

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #afaf6f;
  --color-2: #d69f20;
  --color-3: #ce5e37;
  --color-4: #b3703a;
  --color-5: #715f4d;
}

SCSS

$color-1: #afaf6f;
$color-2: #d69f20;
$color-3: #ce5e37;
$color-4: #b3703a;
$color-5: #715f4d;

TAILWIND

colors: {
  'brand-1': '#afaf6f',
  'brand-2': '#d69f20',
  'brand-3': '#ce5e37',
  'brand-4': '#b3703a',
  'brand-5': '#715f4d',
}

RGB Array

[175, 175, 111], [214, 159, 32], [206, 94, 55], [179, 112, 58], [113, 95, 77]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AFAF6F, #D69F20, #CE5E37, #B3703A, #715F4D 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: #afaf6f; --color-2: #d69f20; --color-3: #ce5e37; --color-4: #b3703a; --color-5: #715f4d. 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