← Back to Editor

#AFA393 · #7B776B · #89A8BA · #3C3A3F · #906A53

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

#AFA393

Ginger · DarkGray · Warm Sun

HEX
#AFA393
RGB
rgb(175, 163, 147)
HSL
hsl(34, 15%, 63%)
HSB
hsb(34, 16%, 69%)
CMYK
cmyk(0%, 7%, 16%, 31%)
Oklch
oklch(72.1% 0.027 75.2)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#7B776B

Ink Gray · DimGray · Warm Gray

HEX
#7B776B
RGB
rgb(123, 119, 107)
HSL
hsl(45, 7%, 45%)
HSB
hsb(45, 13%, 48%)
CMYK
cmyk(0%, 3%, 13%, 52%)
Oklch
oklch(56.9% 0.019 91.7)

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

#89A8BA

Sky Blue · DarkGray · Cobalt Blue

HEX
#89A8BA
RGB
rgb(137, 168, 186)
HSL
hsl(202, 26%, 63%)
HSB
hsb(202, 26%, 73%)
CMYK
cmyk(26%, 10%, 0%, 27%)
Oklch
oklch(71.4% 0.043 233.7)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

#3C3A3F

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#3C3A3F
RGB
rgb(60, 58, 63)
HSL
hsl(264, 4%, 24%)
HSB
hsb(264, 8%, 25%)
CMYK
cmyk(5%, 8%, 0%, 75%)
Oklch
oklch(35.2% 0.009 304.0)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#906A53

Tangerine · DimGray · Amber Brown

HEX
#906A53
RGB
rgb(144, 106, 83)
HSL
hsl(23, 27%, 45%)
HSB
hsb(23, 42%, 56%)
CMYK
cmyk(0%, 26%, 42%, 44%)
Oklch
oklch(55.7% 0.060 52.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AFA393
929FAF

Analogous

AF9492
AFA393
ADAF92

Triadic

AFA393
92AFA3
A392AF

Split-Comp.

AFA393
92ADAF
9492AF

Tetradic

AFA393
92AF94
929FAF
AF92AD

Contrast Matrix WCAG 2.1 Contrast

AFA393
7B776B
89A8BA
3C3A3F
906A53
—
1.8
Fail
1.0
Fail
4.5
AA
1.9
Fail
1.8
Fail
—
1.8
Fail
2.5
Fail
1.1
Fail
1.0
Fail
1.8
Fail
—
4.5
AA Large
1.9
Fail
4.5
AA
2.5
Fail
4.5
AA Large
—
2.3
Fail
1.9
Fail
1.1
Fail
1.9
Fail
2.3
Fail
—
White BG
2.5Fail
4.5AA Large
2.5Fail
11.2AAA
4.8AA
Black BG
8.5AAA
4.7AA
8.4AAA
1.9Fail
4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

AAAA97
79796E
9697B6
3B3B3E
807F59

Deuteranopia

ABAB98
7A7A6F
9592B5
3B3B3D
82855A

Tritanopia

AE9A9B
7B7071
8BB2B1
3C3D3D
8E5D5E

Achromatopsia

A5A5A5
777777
A1A1A1
3B3B3B
737373

Shades & Tints Shades & Tints

#AFA393

Dark
Light

#7B776B

Dark
Light

#89A8BA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #afa393;
  --color-2: #7b776b;
  --color-3: #89a8ba;
  --color-4: #3c3a3f;
  --color-5: #906a53;
}

SCSS

$color-1: #afa393;
$color-2: #7b776b;
$color-3: #89a8ba;
$color-4: #3c3a3f;
$color-5: #906a53;

TAILWIND

colors: {
  'brand-1': '#afa393',
  'brand-2': '#7b776b',
  'brand-3': '#89a8ba',
  'brand-4': '#3c3a3f',
  'brand-5': '#906a53',
}

RGB Array

[175, 163, 147], [123, 119, 107], [137, 168, 186], [60, 58, 63], [144, 106, 83]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AFA393, #7B776B, #89A8BA, #3C3A3F, #906A53 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: #afa393; --color-2: #7b776b; --color-3: #89a8ba; --color-4: #3c3a3f; --color-5: #906a53. 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