← Back to Editor

#C9AE20 · #FB5A6C · #DD54D1 · #7E87A4 · #A29C9F

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

#C9AE20

Autumn Sage · GoldenRod · Honey Gold

HEX
#C9AE20
RGB
rgb(201, 174, 32)
HSL
hsl(50, 73%, 46%)
HSB
hsb(50, 84%, 79%)
CMYK
cmyk(0%, 13%, 84%, 21%)
Oklch
oklch(75.2% 0.148 97.2)

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

#FB5A6C

Peach Pink · Tomato · Coral Red

HEX
#FB5A6C
RGB
rgb(251, 90, 108)
HSL
hsl(353, 95%, 67%)
HSB
hsb(353, 64%, 98%)
CMYK
cmyk(0%, 64%, 57%, 2%)
Oklch
oklch(68.5% 0.196 17.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#DD54D1

Rose Purple · Orchid · Violet

HEX
#DD54D1
RGB
rgb(221, 84, 209)
HSL
hsl(305, 67%, 60%)
HSB
hsb(305, 62%, 87%)
CMYK
cmyk(0%, 62%, 5%, 13%)
Oklch
oklch(66.9% 0.220 331.3)

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

#7E87A4

Azure · LightSlateGray · Navy Blue

HEX
#7E87A4
RGB
rgb(126, 135, 164)
HSL
hsl(226, 17%, 57%)
HSB
hsb(226, 23%, 64%)
CMYK
cmyk(23%, 18%, 0%, 36%)
Oklch
oklch(62.6% 0.045 271.5)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#A29C9F

Ash · DarkGray · Silver Sand

HEX
#A29C9F
RGB
rgb(162, 156, 159)
HSL
hsl(330, 3%, 62%)
HSB
hsb(330, 4%, 64%)
CMYK
cmyk(0%, 4%, 2%, 36%)
Oklch
oklch(69.9% 0.008 345.4)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C9AE20
203CCB

Analogous

CB5920
C9AE20
92CB20

Triadic

C9AE20
20CBAE
AE20CB

Split-Comp.

C9AE20
2092CB
5920CB

Tetradic

C9AE20
20CB59
203CCB
CB2092

Contrast Matrix WCAG 2.1 Contrast

C9AE20
FB5A6C
DD54D1
7E87A4
A29C9F
—
1.4
Fail
1.5
Fail
1.6
Fail
1.2
Fail
1.4
Fail
—
1.1
Fail
1.2
Fail
1.1
Fail
1.5
Fail
1.1
Fail
—
1.1
Fail
1.2
Fail
1.6
Fail
1.2
Fail
1.1
Fail
—
1.3
Fail
1.2
Fail
1.1
Fail
1.2
Fail
1.3
Fail
—
White BG
2.2Fail
3.1AA Large
3.4AA Large
3.6AA Large
2.7Fail
Black BG
9.6AAA
6.8AA
6.3AA
5.9AA
7.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BDBD42
B5B468
A2A0B3
82829D
9F9F9E

Deuteranopia

BFC14B
BFCB67
AAB4AB
81819B
A0A09E

Tritanopia

C85D63
F36463
D69B96
7E9796
A29E9E

Achromatopsia

A6A6A6
8C8C8C
8B8B8B
888888
9E9E9E

Shades & Tints Shades & Tints

#C9AE20

Dark
Light

#FB5A6C

Dark
Light

#DD54D1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c9ae20;
  --color-2: #fb5a6c;
  --color-3: #dd54d1;
  --color-4: #7e87a4;
  --color-5: #a29c9f;
}

SCSS

$color-1: #c9ae20;
$color-2: #fb5a6c;
$color-3: #dd54d1;
$color-4: #7e87a4;
$color-5: #a29c9f;

TAILWIND

colors: {
  'brand-1': '#c9ae20',
  'brand-2': '#fb5a6c',
  'brand-3': '#dd54d1',
  'brand-4': '#7e87a4',
  'brand-5': '#a29c9f',
}

RGB Array

[201, 174, 32], [251, 90, 108], [221, 84, 209], [126, 135, 164], [162, 156, 159]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C9AE20, #FB5A6C, #DD54D1, #7E87A4, #A29C9F 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: #c9ae20; --color-2: #fb5a6c; --color-3: #dd54d1; --color-4: #7e87a4; --color-5: #a29c9f. 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