← Back to Editor

#9AD2BC · #AAC987 · #B2B489 · #AE9484 · #617871

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

#9AD2BC

Jade · Silver · Apple Green

HEX
#9AD2BC
RGB
rgb(154, 210, 188)
HSL
hsl(156, 38%, 71%)
HSB
hsb(156, 27%, 82%)
CMYK
cmyk(27%, 0%, 10%, 18%)
Oklch
oklch(81.9% 0.066 168.5)

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

#AAC987

Willow Green · DarkSeaGreen · Apple Green

HEX
#AAC987
RGB
rgb(170, 201, 135)
HSL
hsl(88, 38%, 66%)
HSB
hsb(88, 33%, 79%)
CMYK
cmyk(15%, 0%, 33%, 21%)
Oklch
oklch(79.7% 0.095 128.8)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#B2B489

Fresh Green · Tan · Sunflower

HEX
#B2B489
RGB
rgb(178, 180, 137)
HSL
hsl(63, 22%, 62%)
HSB
hsb(63, 24%, 71%)
CMYK
cmyk(1%, 0%, 24%, 29%)
Oklch
oklch(75.7% 0.059 109.9)

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

#AE9484

Tangerine · DarkGray · Warm Sun

HEX
#AE9484
RGB
rgb(174, 148, 132)
HSL
hsl(23, 21%, 60%)
HSB
hsb(23, 24%, 68%)
CMYK
cmyk(0%, 15%, 24%, 32%)
Oklch
oklch(68.6% 0.039 53.5)

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

#617871

Mineral Blue · DimGray · Mint Ice

HEX
#617871
RGB
rgb(97, 120, 113)
HSL
hsl(162, 11%, 43%)
HSB
hsb(162, 19%, 47%)
CMYK
cmyk(19%, 0%, 6%, 53%)
Oklch
oklch(55.2% 0.029 174.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9AD2BC
D199AF

Analogous

99D19F
9AD2BC
99CCD1

Triadic

9AD2BC
BB99D1
D1BB99

Split-Comp.

9AD2BC
D199CC
D19F99

Tetradic

9AD2BC
9F99D1
D199AF
CCD199

Contrast Matrix WCAG 2.1 Contrast

9AD2BC
AAC987
B2B489
AE9484
617871
—
1.1
Fail
1.3
Fail
1.7
Fail
2.8
Fail
1.1
Fail
—
1.2
Fail
1.5
Fail
2.6
Fail
1.3
Fail
1.2
Fail
—
1.3
Fail
2.2
Fail
1.7
Fail
1.5
Fail
1.3
Fail
—
1.7
Fail
2.8
Fail
2.6
Fail
2.2
Fail
1.7
Fail
—
White BG
1.7Fail
1.8Fail
2.1Fail
2.8Fail
4.7AA
Black BG
12.3AAA
11.4AAA
9.8AAA
7.4AAA
4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

B2B3C1
B7B897
B3B393
A3A388
6B6B73

Deuteranopia

AFABC3
B6B39B
B3B396
A4A689
6A6873

Tritanopia

9DC6C6
ACA4A6
B29C9D
AD8B8C
627474

Achromatopsia

BFBFBF
B8B8B8
AFAFAF
9A9A9A
707070

Shades & Tints Shades & Tints

#9AD2BC

Dark
Light

#AAC987

Dark
Light

#B2B489

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9ad2bc;
  --color-2: #aac987;
  --color-3: #b2b489;
  --color-4: #ae9484;
  --color-5: #617871;
}

SCSS

$color-1: #9ad2bc;
$color-2: #aac987;
$color-3: #b2b489;
$color-4: #ae9484;
$color-5: #617871;

TAILWIND

colors: {
  'brand-1': '#9ad2bc',
  'brand-2': '#aac987',
  'brand-3': '#b2b489',
  'brand-4': '#ae9484',
  'brand-5': '#617871',
}

RGB Array

[154, 210, 188], [170, 201, 135], [178, 180, 137], [174, 148, 132], [97, 120, 113]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9AD2BC, #AAC987, #B2B489, #AE9484, #617871 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: #9ad2bc; --color-2: #aac987; --color-3: #b2b489; --color-4: #ae9484; --color-5: #617871. 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