← Back to Editor

#54A8A8 · #9F7E8F · #A98A85 · #C9B489 · #D4D7AA

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

#54A8A8

Slate Blue · CadetBlue · Mint Ice

HEX
#54A8A8
RGB
rgb(84, 168, 168)
HSL
hsl(180, 33%, 49%)
HSB
hsb(180, 50%, 66%)
CMYK
cmyk(50%, 0%, 0%, 34%)
Oklch
oklch(68.0% 0.082 195.4)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#9F7E8F

Rose Purple · Gray · Rose Pink

HEX
#9F7E8F
RGB
rgb(159, 126, 143)
HSL
hsl(329, 15%, 56%)
HSB
hsb(329, 21%, 62%)
CMYK
cmyk(0%, 21%, 10%, 38%)
Oklch
oklch(63.0% 0.047 346.2)

Traditional「Rose Purple」· Paint「Rose Pink」· Creative Blush Sunrise

#A98A85

Crimson · Gray · Passion Red

HEX
#A98A85
RGB
rgb(169, 138, 133)
HSL
hsl(8, 17%, 59%)
HSB
hsb(8, 21%, 66%)
CMYK
cmyk(0%, 18%, 21%, 34%)
Oklch
oklch(66.1% 0.039 28.8)

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

#C9B489

Ginger · Tan · Sunflower

HEX
#C9B489
RGB
rgb(201, 180, 137)
HSL
hsl(40, 37%, 66%)
HSB
hsb(40, 32%, 79%)
CMYK
cmyk(0%, 10%, 32%, 21%)
Oklch
oklch(77.7% 0.062 84.9)

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

#D4D7AA

Fresh Green · Wheat · Sunflower

HEX
#D4D7AA
RGB
rgb(212, 215, 170)
HSL
hsl(64, 36%, 75%)
HSB
hsb(64, 21%, 84%)
CMYK
cmyk(1%, 0%, 21%, 16%)
Oklch
oklch(86.5% 0.060 110.7)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

54A8A8
A65454

Analogous

54A67D
54A8A8
547DA6

Triadic

54A8A8
A654A6
A6A654

Split-Comp.

54A8A8
A6547D
A67D54

Tetradic

54A8A8
7D54A6
A65454
7DA654

Contrast Matrix WCAG 2.1 Contrast

54A8A8
9F7E8F
A98A85
C9B489
D4D7AA
—
1.3
Fail
1.1
Fail
1.4
Fail
1.9
Fail
1.3
Fail
—
1.1
Fail
1.8
Fail
2.4
Fail
1.1
Fail
1.1
Fail
—
1.6
Fail
2.1
Fail
1.4
Fail
1.8
Fail
1.6
Fail
—
1.4
Fail
1.9
Fail
2.4
Fail
2.1
Fail
1.4
Fail
—
White BG
2.8Fail
3.6AA Large
3.2AA Large
2.0Fail
1.5Fail
Black BG
7.5AAA
5.9AA
6.7AA
10.4AAA
14.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7879A8
91908B
9C9B86
C0C093
D5D5B5

Deuteranopia

746DA8
93958A
9DA087
C1C396
D5D5B8

Tritanopia

58A8A8
9D8887
A78787
C89C9D
D4BDBF

Achromatopsia

8F8F8F
8A8A8A
939393
B5B5B5
D1D1D1

Shades & Tints Shades & Tints

#54A8A8

Dark
Light

#9F7E8F

Dark
Light

#A98A85

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #54a8a8;
  --color-2: #9f7e8f;
  --color-3: #a98a85;
  --color-4: #c9b489;
  --color-5: #d4d7aa;
}

SCSS

$color-1: #54a8a8;
$color-2: #9f7e8f;
$color-3: #a98a85;
$color-4: #c9b489;
$color-5: #d4d7aa;

TAILWIND

colors: {
  'brand-1': '#54a8a8',
  'brand-2': '#9f7e8f',
  'brand-3': '#a98a85',
  'brand-4': '#c9b489',
  'brand-5': '#d4d7aa',
}

RGB Array

[84, 168, 168], [159, 126, 143], [169, 138, 133], [201, 180, 137], [212, 215, 170]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #54A8A8, #9F7E8F, #A98A85, #C9B489, #D4D7AA 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: #54a8a8; --color-2: #9f7e8f; --color-3: #a98a85; --color-4: #c9b489; --color-5: #d4d7aa. 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