← Back to Editor

#AAABC6 · #9FB3A9 · #EFBC68 · #CCB28A · #BF9C62

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#AAABC6

Azure · DarkGray · Cobalt Blue

HEX
#AAABC6
RGB
rgb(170, 171, 198)
HSL
hsl(238, 20%, 72%)
HSB
hsb(238, 14%, 78%)
CMYK
cmyk(14%, 14%, 0%, 22%)
Oklch
oklch(74.9% 0.039 283.7)

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

#9FB3A9

Jade · DarkGray · Apple Green

HEX
#9FB3A9
RGB
rgb(159, 179, 169)
HSL
hsl(150, 12%, 66%)
HSB
hsb(150, 11%, 70%)
CMYK
cmyk(11%, 0%, 6%, 30%)
Oklch
oklch(74.8% 0.026 164.2)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#EFBC68

Ginger · SandyBrown · Warm Sun

HEX
#EFBC68
RGB
rgb(239, 188, 104)
HSL
hsl(37, 81%, 67%)
HSB
hsb(37, 56%, 94%)
CMYK
cmyk(0%, 21%, 56%, 6%)
Oklch
oklch(82.4% 0.118 78.4)

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

#CCB28A

Ginger · Tan · Warm Sun

HEX
#CCB28A
RGB
rgb(204, 178, 138)
HSL
hsl(36, 39%, 67%)
HSB
hsb(36, 32%, 80%)
CMYK
cmyk(0%, 13%, 32%, 20%)
Oklch
oklch(77.6% 0.062 78.3)

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

#BF9C62

Ginger · DarkSalmon · Warm Sun

HEX
#BF9C62
RGB
rgb(191, 156, 98)
HSL
hsl(37, 42%, 57%)
HSB
hsb(37, 49%, 75%)
CMYK
cmyk(0%, 18%, 49%, 25%)
Oklch
oklch(71.2% 0.086 79.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AAABC6
C6C5A9

Analogous

A9B9C6
AAABC6
B7A9C6

Triadic

AAABC6
C6A9AA
AAC6A9

Split-Comp.

AAABC6
C6B7A9
B9C6A9

Tetradic

AAABC6
C6A9B9
C6C5A9
A9C6B7

Contrast Matrix WCAG 2.1 Contrast

AAABC6
9FB3A9
EFBC68
CCB28A
BF9C62
—
1.0
Fail
1.3
Fail
1.1
Fail
1.1
Fail
1.0
Fail
—
1.3
Fail
1.1
Fail
1.2
Fail
1.3
Fail
1.3
Fail
—
1.2
Fail
1.5
Fail
1.1
Fail
1.1
Fail
1.2
Fail
—
1.3
Fail
1.1
Fail
1.2
Fail
1.5
Fail
1.3
Fail
—
White BG
2.2Fail
2.2Fail
1.7Fail
2.0Fail
2.6Fail
Black BG
9.3AAA
9.5AAA
12.1AAA
10.3AAA
8.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AAAABF
A8A8AB
D9D87C
C1C194
B0B070

Deuteranopia

AAAABE
A7A5AC
DCE081
C2C496
B2B573

Tritanopia

AABAB9
A0ADAE
EC8C90
CB9B9D
BD7B7E

Achromatopsia

AEAEAE
ACACAC
C2C2C2
B5B5B5
A0A0A0

Shades & Tints Shades & Tints

#AAABC6

Dark
Light

#9FB3A9

Dark
Light

#EFBC68

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #aaabc6;
  --color-2: #9fb3a9;
  --color-3: #efbc68;
  --color-4: #ccb28a;
  --color-5: #bf9c62;
}

SCSS

$color-1: #aaabc6;
$color-2: #9fb3a9;
$color-3: #efbc68;
$color-4: #ccb28a;
$color-5: #bf9c62;

TAILWIND

colors: {
  'brand-1': '#aaabc6',
  'brand-2': '#9fb3a9',
  'brand-3': '#efbc68',
  'brand-4': '#ccb28a',
  'brand-5': '#bf9c62',
}

RGB Array

[170, 171, 198], [159, 179, 169], [239, 188, 104], [204, 178, 138], [191, 156, 98]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AAABC6, #9FB3A9, #EFBC68, #CCB28A, #BF9C62 is ideal for: health products, baby brands, fresh-style blogs. 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: #aaabc6; --color-2: #9fb3a9; --color-3: #efbc68; --color-4: #ccb28a; --color-5: #bf9c62. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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