← Back to Editor

#7D7F77 · #A2957C · #A5A38C · #A5BFAE · #AFAB9E

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

#7D7F77

Ink Gray · Gray · Warm Gray

HEX
#7D7F77
RGB
rgb(125, 127, 119)
HSL
hsl(75, 3%, 48%)
HSB
hsb(75, 6%, 50%)
CMYK
cmyk(2%, 0%, 6%, 50%)
Oklch
oklch(59.2% 0.012 118.2)

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

#A2957C

Ginger · Gray · Warm Sun

HEX
#A2957C
RGB
rgb(162, 149, 124)
HSL
hsl(39, 17%, 56%)
HSB
hsb(39, 23%, 64%)
CMYK
cmyk(0%, 8%, 23%, 36%)
Oklch
oklch(67.4% 0.039 83.7)

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

#A5A38C

Autumn Sage · DarkGray · Sunflower

HEX
#A5A38C
RGB
rgb(165, 163, 140)
HSL
hsl(55, 12%, 60%)
HSB
hsb(55, 15%, 65%)
CMYK
cmyk(0%, 1%, 15%, 35%)
Oklch
oklch(71.1% 0.032 103.1)

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

#A5BFAE

Celadon · DarkGray · Apple Green

HEX
#A5BFAE
RGB
rgb(165, 191, 174)
HSL
hsl(141, 17%, 70%)
HSB
hsb(141, 14%, 75%)
CMYK
cmyk(14%, 0%, 9%, 25%)
Oklch
oklch(78.0% 0.037 156.8)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#AFAB9E

Ginger · DarkGray · Sunflower

HEX
#AFAB9E
RGB
rgb(175, 171, 158)
HSL
hsl(46, 10%, 65%)
HSB
hsb(46, 10%, 69%)
CMYK
cmyk(0%, 2%, 10%, 31%)
Oklch
oklch(74.1% 0.019 92.7)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7D7F77
79777E

Analogous

7E7C77
7D7F77
797E77

Triadic

7D7F77
777C7E
7E777C

Split-Comp.

7D7F77
77797E
7C777E

Tetradic

7D7F77
777E7C
79777E
7E7779

Contrast Matrix WCAG 2.1 Contrast

7D7F77
A2957C
A5A38C
A5BFAE
AFAB9E
—
1.4
Fail
1.6
Fail
2.1
Fail
1.8
Fail
1.4
Fail
—
1.2
Fail
1.5
Fail
1.3
Fail
1.6
Fail
1.2
Fail
—
1.3
Fail
1.1
Fail
2.1
Fail
1.5
Fail
1.3
Fail
—
1.2
Fail
1.8
Fail
1.3
Fail
1.1
Fail
1.2
Fail
—
White BG
4.1AA Large
2.9Fail
2.6Fail
2.0Fail
2.3Fail
Black BG
5.2AA
7.1AAA
8.2AAA
10.7AAA
9.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7E7E79
9C9C82
A4A492
B0B0B2
ADADA1

Deuteranopia

7E7E79
9D9E84
A4A493
AFADB3
AEAEA2

Tritanopia

7D7A7B
A18788
A59697
A6B5B6
AFA4A4

Achromatopsia

7D7D7D
969696
A1A1A1
B5B5B5
ABABAB

Shades & Tints Shades & Tints

#7D7F77

Dark
Light

#A2957C

Dark
Light

#A5A38C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7d7f77;
  --color-2: #a2957c;
  --color-3: #a5a38c;
  --color-4: #a5bfae;
  --color-5: #afab9e;
}

SCSS

$color-1: #7d7f77;
$color-2: #a2957c;
$color-3: #a5a38c;
$color-4: #a5bfae;
$color-5: #afab9e;

TAILWIND

colors: {
  'brand-1': '#7d7f77',
  'brand-2': '#a2957c',
  'brand-3': '#a5a38c',
  'brand-4': '#a5bfae',
  'brand-5': '#afab9e',
}

RGB Array

[125, 127, 119], [162, 149, 124], [165, 163, 140], [165, 191, 174], [175, 171, 158]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7D7F77, #A2957C, #A5A38C, #A5BFAE, #AFAB9E 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: #7d7f77; --color-2: #a2957c; --color-3: #a5a38c; --color-4: #a5bfae; --color-5: #afab9e. 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