← Back to Editor

#AA406C · #C89997 · #CD9A6A · #BB9C46 · #A89E21

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

#AA406C

Dark Violet · MediumVioletRed · Camellia

HEX
#AA406C
RGB
rgb(170, 64, 108)
HSL
hsl(335, 45%, 46%)
HSB
hsb(335, 62%, 67%)
CMYK
cmyk(0%, 62%, 36%, 33%)
Oklch
oklch(52.9% 0.146 357.5)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#C89997

Peach Pink · Tan · Coral Red

HEX
#C89997
RGB
rgb(200, 153, 151)
HSL
hsl(2, 31%, 69%)
HSB
hsb(2, 25%, 78%)
CMYK
cmyk(0%, 24%, 25%, 22%)
Oklch
oklch(72.6% 0.057 21.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#CD9A6A

Apricot · DarkSalmon · Warm Sun

HEX
#CD9A6A
RGB
rgb(205, 154, 106)
HSL
hsl(29, 50%, 61%)
HSB
hsb(29, 48%, 80%)
CMYK
cmyk(0%, 25%, 48%, 20%)
Oklch
oklch(72.4% 0.088 64.0)

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

#BB9C46

Ochre · GoldenRod · Honey Gold

HEX
#BB9C46
RGB
rgb(187, 156, 70)
HSL
hsl(44, 46%, 50%)
HSB
hsb(44, 63%, 73%)
CMYK
cmyk(0%, 17%, 63%, 27%)
Oklch
oklch(70.4% 0.111 89.4)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#A89E21

Autumn Sage · DarkGoldenRod · Honey Gold

HEX
#A89E21
RGB
rgb(168, 158, 33)
HSL
hsl(56, 67%, 39%)
HSB
hsb(56, 80%, 66%)
CMYK
cmyk(0%, 6%, 80%, 34%)
Oklch
oklch(68.7% 0.136 104.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AA406C
41AA7E

Analogous

AA41A1
AA406C
AA4941

Triadic

AA406C
6DAA41
416DAA

Split-Comp.

AA406C
41AA49
41A1AA

Tetradic

AA406C
A1AA41
41AA7E
4941AA

Contrast Matrix WCAG 2.1 Contrast

AA406C
C89997
CD9A6A
BB9C46
A89E21
—
2.3
Fail
2.3
Fail
2.2
Fail
2.1
Fail
2.3
Fail
—
1.0
Fail
1.1
Fail
1.1
Fail
2.3
Fail
1.0
Fail
—
1.1
Fail
1.1
Fail
2.2
Fail
1.1
Fail
1.1
Fail
—
1.1
Fail
2.1
Fail
1.1
Fail
1.1
Fail
1.1
Fail
—
White BG
5.7AA
2.5Fail
2.5Fail
2.6Fail
2.8Fail
Black BG
3.7AA Large
8.5AAA
8.4AAA
8.0AAA
7.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7C7B61
B4B397
B7B676
AEAD5B
A4A43F

Deuteranopia

828A5F
B6BA98
BABE78
AFB260
A4A547

Tritanopia

A55957
C69898
CA7F81
B96B6F
A8575C

Achromatopsia

656565
A7A7A7
A4A4A4
9B9B9B
939393

Shades & Tints Shades & Tints

#AA406C

Dark
Light

#C89997

Dark
Light

#CD9A6A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #aa406c;
  --color-2: #c89997;
  --color-3: #cd9a6a;
  --color-4: #bb9c46;
  --color-5: #a89e21;
}

SCSS

$color-1: #aa406c;
$color-2: #c89997;
$color-3: #cd9a6a;
$color-4: #bb9c46;
$color-5: #a89e21;

TAILWIND

colors: {
  'brand-1': '#aa406c',
  'brand-2': '#c89997',
  'brand-3': '#cd9a6a',
  'brand-4': '#bb9c46',
  'brand-5': '#a89e21',
}

RGB Array

[170, 64, 108], [200, 153, 151], [205, 154, 106], [187, 156, 70], [168, 158, 33]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AA406C, #C89997, #CD9A6A, #BB9C46, #A89E21 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: #aa406c; --color-2: #c89997; --color-3: #cd9a6a; --color-4: #bb9c46; --color-5: #a89e21. 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