#818493 + #AABCA9 + #D2F4BF + #9CEDBC + #2BBCAF - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#818493

Azure · LightSlateGray · Warm Gray

HEX

#818493

RGB

rgb(129, 132, 147)

HSL

hsl(230, 8%, 54%)

HSB

hsb(230, 12%, 58%)

CMYK

cmyk(12%, 10%, 0%, 42%)

Oklch

oklch(61.6% 0.023 276.7)

Traditional「Azure」· Paint「Warm Gray」· Creative Urban Concrete

#AABCA9

Celadon · DarkGray · Apple Green

HEX

#AABCA9

RGB

rgb(170, 188, 169)

HSL

hsl(117, 12%, 70%)

HSB

hsb(117, 10%, 74%)

CMYK

cmyk(10%, 0%, 10%, 26%)

Oklch

oklch(77.6% 0.033 143.8)

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

#D2F4BF

Emerald · LightGray · Mint Green

HEX

#D2F4BF

RGB

rgb(210, 244, 191)

HSL

hsl(98, 71%, 85%)

HSB

hsb(98, 22%, 96%)

CMYK

cmyk(14%, 0%, 22%, 4%)

Oklch

oklch(92.9% 0.079 134.4)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

#9CEDBC

Emerald · LightGreen · Apple Green

HEX

#9CEDBC

RGB

rgb(156, 237, 188)

HSL

hsl(144, 69%, 77%)

HSB

hsb(144, 34%, 93%)

CMYK

cmyk(34%, 0%, 21%, 7%)

Oklch

oklch(88.1% 0.105 156.9)

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

#2BBCAF

Mineral Blue · LightSeaGreen · Mint Ice

HEX

#2BBCAF

RGB

rgb(43, 188, 175)

HSL

hsl(175, 63%, 45%)

HSB

hsb(175, 77%, 74%)

CMYK

cmyk(77%, 0%, 7%, 26%)

Oklch

oklch(72.0% 0.118 185.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

818493

939080

Analogous

808D93

818493

878093

Triadic

818493

938083

839380

Split-Comp.

818493

938780

8D9380

Tetradic

818493

93808D

939080

809387

Contrast Matrix WCAG 2.1 Contrast

818493	AABCA9	D2F4BF	9CEDBC	2BBCAF
—	1.9 Fail	3.1 AA Large	2.7 Fail	1.6 Fail
1.9 Fail	—	1.7 Fail	1.5 Fail	1.2 Fail
3.1 AA Large	1.7 Fail	—	1.1 Fail	2.0 Fail
2.7 Fail	1.5 Fail	1.1 Fail	—	1.7 Fail
1.6 Fail	1.2 Fail	2.0 Fail	1.7 Fail	—

White BG

3.7AA Large

2.0Fail

1.2Fail

1.4Fail

2.4Fail

Black BG

5.7AA

10.5AAA

17.4AAA

15.3AAA

8.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

82828F

B2B2AE

E1E1CC

BFC0C8

6A6BB2

Deuteranopia

82828F

B1AFAF

DFDCCF

BAB4CB

6157B3

Tritanopia

818D8C

ABB1B2

D4D6D8

A0D1D3

32B5B5

Achromatopsia

858585

B4B4B4

E4E4E4

CFCFCF

8F8F8F

Shades & Tints Shades & Tints

#818493

Dark

Light

#AABCA9

Dark

Light

#D2F4BF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #818493;
  --color-2: #aabca9;
  --color-3: #d2f4bf;
  --color-4: #9cedbc;
  --color-5: #2bbcaf;
}

SCSS

$color-1: #818493;
$color-2: #aabca9;
$color-3: #d2f4bf;
$color-4: #9cedbc;
$color-5: #2bbcaf;

TAILWIND

colors: {
  'brand-1': '#818493',
  'brand-2': '#aabca9',
  'brand-3': '#d2f4bf',
  'brand-4': '#9cedbc',
  'brand-5': '#2bbcaf',
}

RGB Array

[129, 132, 147], [170, 188, 169], [210, 244, 191], [156, 237, 188], [43, 188, 175]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #818493, #AABCA9, #D2F4BF, #9CEDBC, #2BBCAF 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: #818493; --color-2: #aabca9; --color-3: #d2f4bf; --color-4: #9cedbc; --color-5: #2bbcaf. 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