#5A9988 + #88C998 + #B1D478 + #A6A54B + #D9C850 · 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

#5A9988

Mineral Blue · CadetBlue · Mint Ice

HEX

#5A9988

RGB

rgb(90, 153, 136)

HSL

hsl(164, 26%, 48%)

HSB

hsb(164, 41%, 60%)

CMYK

cmyk(41%, 0%, 11%, 40%)

Oklch

oklch(63.5% 0.071 174.7)

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

#88C998

Celadon · DarkSeaGreen · Apple Green

HEX

#88C998

RGB

rgb(136, 201, 152)

HSL

hsl(135, 38%, 66%)

HSB

hsb(135, 32%, 79%)

CMYK

cmyk(32%, 0%, 24%, 21%)

Oklch

oklch(77.9% 0.096 151.4)

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

#B1D478

Willow Green · DarkSeaGreen · Apple Green

HEX

#B1D478

RGB

rgb(177, 212, 120)

HSL

hsl(83, 52%, 65%)

HSB

hsb(83, 43%, 83%)

CMYK

cmyk(17%, 0%, 43%, 17%)

Oklch

oklch(82.4% 0.125 126.0)

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

#A6A54B

Autumn Sage · GoldenRod · Honey Gold

HEX

#A6A54B

RGB

rgb(166, 165, 75)

HSL

hsl(59, 38%, 47%)

HSB

hsb(59, 55%, 65%)

CMYK

cmyk(0%, 1%, 55%, 35%)

Oklch

oklch(70.4% 0.113 108.4)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#D9C850

Autumn Sage · SandyBrown · Sunflower

HEX

#D9C850

RGB

rgb(217, 200, 80)

HSL

hsl(53, 64%, 58%)

HSB

hsb(53, 63%, 85%)

CMYK

cmyk(0%, 8%, 63%, 15%)

Oklch

oklch(82.5% 0.140 101.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5A9988

9A5B6C

Analogous

5B9A69

5A9988

5B8B9A

Triadic

5A9988

895B9A

9A895B

Split-Comp.

5A9988

9A5B8B

9A695B

Tetradic

5A9988

695B9A

9A5B6C

8B9A5B

Contrast Matrix WCAG 2.1 Contrast

5A9988	88C998	B1D478	A6A54B	D9C850
—	1.7 Fail	2.0 Fail	1.3 Fail	1.9 Fail
1.7 Fail	—	1.2 Fail	1.3 Fail	1.1 Fail
2.0 Fail	1.2 Fail	—	1.5 Fail	1.0 Fail
1.3 Fail	1.3 Fail	1.5 Fail	—	1.5 Fail
1.9 Fail	1.1 Fail	1.0 Fail	1.5 Fail	—

White BG

3.3AA Large

1.9Fail

1.7Fail

2.6Fail

1.7Fail

Black BG

6.3AA

10.9AAA

12.6AAA

8.1AAA

12.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

75768C

A4A5A4

C0C08E

A6A661

D2D16D

Deuteranopia

726D8D

A09CA7

BEBC94

A6A666

D3D474

Tritanopia

5D8F90

8BADAF

B3A0A4

A67276

D88489

Achromatopsia

848484

B0B0B0

BFBFBF

9B9B9B

BFBFBF

Shades & Tints Shades & Tints

#5A9988

Dark

Light

#88C998

Dark

Light

#B1D478

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5a9988;
  --color-2: #88c998;
  --color-3: #b1d478;
  --color-4: #a6a54b;
  --color-5: #d9c850;
}

SCSS

$color-1: #5a9988;
$color-2: #88c998;
$color-3: #b1d478;
$color-4: #a6a54b;
$color-5: #d9c850;

TAILWIND

colors: {
  'brand-1': '#5a9988',
  'brand-2': '#88c998',
  'brand-3': '#b1d478',
  'brand-4': '#a6a54b',
  'brand-5': '#d9c850',
}

RGB Array

[90, 153, 136], [136, 201, 152], [177, 212, 120], [166, 165, 75], [217, 200, 80]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #5A9988, #88C998, #B1D478, #A6A54B, #D9C850 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: #5a9988; --color-2: #88c998; --color-3: #b1d478; --color-4: #a6a54b; --color-5: #d9c850. 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