#15C4BF + #57B898 + #80AB80 + #94A279 + #9F9874 · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#15C4BF

Mineral Blue · DarkTurquoise · Mint Ice

HEX

#15C4BF

RGB

rgb(21, 196, 191)

HSL

hsl(178, 81%, 43%)

HSB

hsb(178, 89%, 77%)

CMYK

cmyk(89%, 0%, 3%, 23%)

Oklch

oklch(74.2% 0.125 191.5)

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

#57B898

Mineral Blue · CadetBlue · Lake Green

HEX

#57B898

RGB

rgb(87, 184, 152)

HSL

hsl(160, 41%, 53%)

HSB

hsb(160, 53%, 72%)

CMYK

cmyk(53%, 0%, 17%, 28%)

Oklch

oklch(71.5% 0.104 169.2)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#80AB80

Celadon · DarkSeaGreen · Olive Green

HEX

#80AB80

RGB

rgb(128, 171, 128)

HSL

hsl(120, 20%, 59%)

HSB

hsb(120, 25%, 67%)

CMYK

cmyk(25%, 0%, 25%, 33%)

Oklch

oklch(69.8% 0.077 144.7)

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

#94A279

Grass Green · DarkSeaGreen · Olive Green

HEX

#94A279

RGB

rgb(148, 162, 121)

HSL

hsl(80, 18%, 55%)

HSB

hsb(80, 25%, 64%)

CMYK

cmyk(9%, 0%, 25%, 36%)

Oklch

oklch(69.0% 0.060 123.3)

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

#9F9874

Autumn Sage · Gray · Sunflower

HEX

#9F9874

RGB

rgb(159, 152, 116)

HSL

hsl(50, 18%, 54%)

HSB

hsb(50, 27%, 62%)

CMYK

cmyk(0%, 4%, 27%, 38%)

Oklch

oklch(67.6% 0.051 98.4)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

15C4BF

C6151B

Analogous

15C668

15C4BF

1574C6

Triadic

15C4BF

C115C6

C6C115

Split-Comp.

15C4BF

C61574

C66815

Tetradic

15C4BF

6815C6

C6151B

74C615

Contrast Matrix WCAG 2.1 Contrast

15C4BF	57B898	80AB80	94A279	9F9874
—	1.1 Fail	1.2 Fail	1.3 Fail	1.3 Fail
1.1 Fail	—	1.1 Fail	1.1 Fail	1.2 Fail
1.2 Fail	1.1 Fail	—	1.0 Fail	1.1 Fail
1.3 Fail	1.1 Fail	1.0 Fail	—	1.1 Fail
1.3 Fail	1.2 Fail	1.1 Fail	1.1 Fail	—

White BG

2.2Fail

2.4Fail

2.6Fail

2.7Fail

2.9Fail

Black BG

9.7AAA

8.7AAA

8.1AAA

7.7AAA

7.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6162C0

8182A0

93938A

9A9A83

9C9C7D

Deuteranopia

574AC1

7B74A2

908D8D

999885

9C9D7F

Tritanopia

1EC1C1

5CA6A7

829394

958B8C

9F8485

Achromatopsia

8F8F8F

979797

999999

969696

Shades & Tints Shades & Tints

#15C4BF

Dark

Light

#57B898

Dark

Light

#80AB80

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #15c4bf;
  --color-2: #57b898;
  --color-3: #80ab80;
  --color-4: #94a279;
  --color-5: #9f9874;
}

SCSS

$color-1: #15c4bf;
$color-2: #57b898;
$color-3: #80ab80;
$color-4: #94a279;
$color-5: #9f9874;

TAILWIND

colors: {
  'brand-1': '#15c4bf',
  'brand-2': '#57b898',
  'brand-3': '#80ab80',
  'brand-4': '#94a279',
  'brand-5': '#9f9874',
}

RGB Array

[21, 196, 191], [87, 184, 152], [128, 171, 128], [148, 162, 121], [159, 152, 116]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #15C4BF, #57B898, #80AB80, #94A279, #9F9874 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: #15c4bf; --color-2: #57b898; --color-3: #80ab80; --color-4: #94a279; --color-5: #9f9874. 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 warm-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