← Back to Editor

#14D8BD · #999999 · #878080 · #B7DA0E · #D2F81D

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

#14D8BD

Mineral Blue · DarkTurquoise · Mint Ice

HEX
#14D8BD
RGB
rgb(20, 216, 189)
HSL
hsl(172, 83%, 46%)
HSB
hsb(172, 91%, 85%)
CMYK
cmyk(91%, 0%, 12%, 15%)
Oklch
oklch(79.1% 0.142 179.2)

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

#999999

Ash · DarkGray · Silver Sand

HEX
#999999
RGB
rgb(153, 153, 153)
HSL
hsl(0, 0%, 60%)
HSB
hsb(0, 0%, 60%)
CMYK
cmyk(0%, 0%, 0%, 40%)
Oklch
oklch(68.3% 0.000 89.9)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#878080

Ash · Gray · Warm Gray

HEX
#878080
RGB
rgb(135, 128, 128)
HSL
hsl(0, 3%, 52%)
HSB
hsb(0, 5%, 53%)
CMYK
cmyk(0%, 5%, 5%, 47%)
Oklch
oklch(60.6% 0.009 17.4)

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

#B7DA0E

Grass Green · GreenYellow · Olive Green

HEX
#B7DA0E
RGB
rgb(183, 218, 14)
HSL
hsl(70, 88%, 45%)
HSB
hsb(70, 94%, 85%)
CMYK
cmyk(16%, 0%, 94%, 15%)
Oklch
oklch(83.3% 0.197 120.7)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#D2F81D

Grass Green · GreenYellow · Olive Green

HEX
#D2F81D
RGB
rgb(210, 248, 29)
HSL
hsl(70, 94%, 54%)
HSB
hsb(70, 88%, 97%)
CMYK
cmyk(15%, 0%, 88%, 3%)
Oklch
oklch(92.0% 0.215 120.4)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

14D8BD
D7142E

Analogous

14D75B
14D8BD
148FD7

Triadic

14D8BD
BD14D7
D7BD14

Split-Comp.

14D8BD
D7148F
D75B14

Tetradic

14D8BD
5B14D7
D7142E
8FD714

Contrast Matrix WCAG 2.1 Contrast

14D8BD
999999
878080
B7DA0E
D2F81D
—
1.6
Fail
2.1
Fail
1.1
Fail
1.5
Fail
1.6
Fail
—
1.4
Fail
1.8
Fail
2.3
Fail
2.1
Fail
1.4
Fail
—
2.4
Fail
3.2
AA Large
1.1
Fail
1.8
Fail
2.4
Fail
—
1.3
Fail
1.5
Fail
2.3
Fail
3.2
AA Large
1.3
Fail
—
White BG
1.8Fail
2.8Fail
3.9AA Large
1.6Fail
1.2Fail
Black BG
11.6AAA
7.4AAA
5.4AA
13.0AAA
17.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

696BC4
999999
848480
C6C63F
E2E352

Deuteranopia

5E4FC5
999999
848580
C4C24B
E0DD5F

Tritanopia

1EC9CA
999999
878080
B9666F
D47C85

Achromatopsia

9A9A9A
999999
828282
B8B8B8
D4D4D4

Shades & Tints Shades & Tints

#14D8BD

Dark
Light

#999999

Dark
Light

#878080

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #14d8bd;
  --color-2: #999999;
  --color-3: #878080;
  --color-4: #b7da0e;
  --color-5: #d2f81d;
}

SCSS

$color-1: #14d8bd;
$color-2: #999999;
$color-3: #878080;
$color-4: #b7da0e;
$color-5: #d2f81d;

TAILWIND

colors: {
  'brand-1': '#14d8bd',
  'brand-2': '#999999',
  'brand-3': '#878080',
  'brand-4': '#b7da0e',
  'brand-5': '#d2f81d',
}

RGB Array

[20, 216, 189], [153, 153, 153], [135, 128, 128], [183, 218, 14], [210, 248, 29]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #14D8BD, #999999, #878080, #B7DA0E, #D2F81D 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: #14d8bd; --color-2: #999999; --color-3: #878080; --color-4: #b7da0e; --color-5: #d2f81d. 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