← Back to Editor

#9AB8A0 · #BDCEAA · #61D8BA · #3E786A · #131313

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 LibraryData Visualization

Color Details Color Details

#9AB8A0

Celadon · DarkSeaGreen · Apple Green

HEX
#9AB8A0
RGB
rgb(154, 184, 160)
HSL
hsl(132, 17%, 66%)
HSB
hsb(132, 16%, 72%)
CMYK
cmyk(16%, 0%, 13%, 28%)
Oklch
oklch(75.3% 0.047 151.0)

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

#BDCEAA

Willow Green · Silver · Apple Green

HEX
#BDCEAA
RGB
rgb(189, 206, 170)
HSL
hsl(88, 27%, 74%)
HSB
hsb(88, 17%, 81%)
CMYK
cmyk(8%, 0%, 17%, 19%)
Oklch
oklch(82.9% 0.052 128.1)

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

#61D8BA

Jade · MediumAquaMarine · Lake Green

HEX
#61D8BA
RGB
rgb(97, 216, 186)
HSL
hsl(165, 60%, 61%)
HSB
hsb(165, 55%, 85%)
CMYK
cmyk(55%, 0%, 14%, 15%)
Oklch
oklch(80.6% 0.116 174.2)

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

#3E786A

Mineral Blue · SeaGreen · Mint Ice

HEX
#3E786A
RGB
rgb(62, 120, 106)
HSL
hsl(166, 32%, 36%)
HSB
hsb(166, 48%, 47%)
CMYK
cmyk(48%, 0%, 12%, 53%)
Oklch
oklch(52.9% 0.065 176.1)

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

#131313

Ink Black · Black · Jet Black

HEX
#131313
RGB
rgb(19, 19, 19)
HSL
hsl(0, 0%, 7%)
HSB
hsb(0, 0%, 7%)
CMYK
cmyk(0%, 0%, 0%, 93%)
Oklch
oklch(18.7% 0.000 89.9)

Traditional「Ink Black」· Paint「Jet Black」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9AB8A0
B79AB1

Analogous

A2B79A
9AB8A0
9AB7AE

Triadic

9AB8A0
9F9AB7
B79F9A

Split-Comp.

9AB8A0
AE9AB7
B79AA2

Tetradic

9AB8A0
9AA2B7
B79AB1
B7AE9A

Contrast Matrix WCAG 2.1 Contrast

9AB8A0
BDCEAA
61D8BA
3E786A
131313
—
1.3
Fail
1.2
Fail
2.4
Fail
8.6
AAA
1.3
Fail
—
1.0
Fail
3.1
AA Large
11.1
AAA
1.2
Fail
1.0
Fail
—
2.9
Fail
10.7
AAA
2.4
Fail
3.1
AA Large
2.9
Fail
—
3.6
AA Large
8.6
AAA
11.1
AAA
10.7
AAA
3.6
AA Large
—
White BG
2.2Fail
1.7Fail
1.7Fail
5.1AA
18.6AAA
Black BG
9.7AAA
12.6AAA
12.0AAA
4.1AA Large
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A7A7A6
C4C5B3
9596C1
57586D
131313

Deuteranopia

A5A3A7
C3C2B5
8E85C3
544F6E
131313

Tritanopia

9BAAAB
BEBABB
67C7C8
417071
131313

Achromatopsia

ACACAC
C5C5C5
B1B1B1
656565
131313

Shades & Tints Shades & Tints

#9AB8A0

Dark
Light

#BDCEAA

Dark
Light

#61D8BA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9ab8a0;
  --color-2: #bdceaa;
  --color-3: #61d8ba;
  --color-4: #3e786a;
  --color-5: #131313;
}

SCSS

$color-1: #9ab8a0;
$color-2: #bdceaa;
$color-3: #61d8ba;
$color-4: #3e786a;
$color-5: #131313;

TAILWIND

colors: {
  'brand-1': '#9ab8a0',
  'brand-2': '#bdceaa',
  'brand-3': '#61d8ba',
  'brand-4': '#3e786a',
  'brand-5': '#131313',
}

RGB Array

[154, 184, 160], [189, 206, 170], [97, 216, 186], [62, 120, 106], [19, 19, 19]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9AB8A0, #BDCEAA, #61D8BA, #3E786A, #131313 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #9ab8a0; --color-2: #bdceaa; --color-3: #61d8ba; --color-4: #3e786a; --color-5: #131313. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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