← Back to Editor

#AF9981 · #D0B05D · #9F9D53 · #718878 · #766063

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

#AF9981

Ginger · DarkGray · Warm Sun

HEX
#AF9981
RGB
rgb(175, 153, 129)
HSL
hsl(31, 22%, 60%)
HSB
hsb(31, 26%, 69%)
CMYK
cmyk(0%, 13%, 26%, 31%)
Oklch
oklch(69.6% 0.043 69.5)

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

#D0B05D

Ginger · SandyBrown · Sunflower

HEX
#D0B05D
RGB
rgb(208, 176, 93)
HSL
hsl(43, 55%, 59%)
HSB
hsb(43, 55%, 82%)
CMYK
cmyk(0%, 15%, 55%, 18%)
Oklch
oklch(76.8% 0.109 88.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#9F9D53

Autumn Sage · Gray · Honey Gold

HEX
#9F9D53
RGB
rgb(159, 157, 83)
HSL
hsl(58, 31%, 47%)
HSB
hsb(58, 48%, 62%)
CMYK
cmyk(0%, 1%, 48%, 38%)
Oklch
oklch(68.1% 0.097 107.3)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#718878

Celadon · Gray · Warm Gray

HEX
#718878
RGB
rgb(113, 136, 120)
HSL
hsl(138, 9%, 49%)
HSB
hsb(138, 17%, 53%)
CMYK
cmyk(17%, 0%, 12%, 47%)
Oklch
oklch(60.4% 0.036 154.9)

Traditional「Celadon」· Paint「Warm Gray」· Creative Urban Concrete

#766063

Crimson · DimGray · Passion Red

HEX
#766063
RGB
rgb(118, 96, 99)
HSL
hsl(352, 10%, 42%)
HSB
hsb(352, 19%, 46%)
CMYK
cmyk(0%, 19%, 16%, 54%)
Oklch
oklch(51.2% 0.029 8.9)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AF9981
8398AF

Analogous

AF8383
AF9981
AFAF83

Triadic

AF9981
83AF9A
9A83AF

Split-Comp.

AF9981
83AFAF
8383AF

Tetradic

AF9981
83AF83
8398AF
AF83AF

Contrast Matrix WCAG 2.1 Contrast

AF9981
D0B05D
9F9D53
718878
766063
—
1.3
Fail
1.0
Fail
1.4
Fail
2.1
Fail
1.3
Fail
—
1.4
Fail
1.8
Fail
2.8
Fail
1.0
Fail
1.4
Fail
—
1.4
Fail
2.0
Fail
1.4
Fail
1.8
Fail
1.4
Fail
—
1.5
Fail
2.1
Fail
2.8
Fail
2.0
Fail
1.5
Fail
—
White BG
2.7Fail
2.1Fail
2.8Fail
3.8AA Large
5.8AA
Black BG
7.7AAA
10.1AAA
7.4AAA
5.5AA
3.6AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

A5A587
C2C271
9E9E65
7B7B7C
6C6C62

Deuteranopia

A7A888
C4C676
9E9E69
7A787D
6E6F62

Tritanopia

AE8B8C
CE8184
9F7376
727F80
756262

Achromatopsia

9D9D9D
B0B0B0
959595
7F7F7F
676767

Shades & Tints Shades & Tints

#AF9981

Dark
Light

#D0B05D

Dark
Light

#9F9D53

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #af9981;
  --color-2: #d0b05d;
  --color-3: #9f9d53;
  --color-4: #718878;
  --color-5: #766063;
}

SCSS

$color-1: #af9981;
$color-2: #d0b05d;
$color-3: #9f9d53;
$color-4: #718878;
$color-5: #766063;

TAILWIND

colors: {
  'brand-1': '#af9981',
  'brand-2': '#d0b05d',
  'brand-3': '#9f9d53',
  'brand-4': '#718878',
  'brand-5': '#766063',
}

RGB Array

[175, 153, 129], [208, 176, 93], [159, 157, 83], [113, 136, 120], [118, 96, 99]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AF9981, #D0B05D, #9F9D53, #718878, #766063 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #af9981; --color-2: #d0b05d; --color-3: #9f9d53; --color-4: #718878; --color-5: #766063. 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. Restrained colors convey professionalism and trust. 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