← Back to Editor

#5B998F · #AB8E3F · #BFC480 · #D9C342 · #FBF6AF

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

#5B998F

Mineral Blue · CadetBlue · Mint Ice

HEX
#5B998F
RGB
rgb(91, 153, 143)
HSL
hsl(170, 25%, 48%)
HSB
hsb(170, 41%, 60%)
CMYK
cmyk(41%, 0%, 7%, 40%)
Oklch
oklch(63.8% 0.066 182.7)

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

#AB8E3F

Ochre · DarkGoldenRod · Honey Gold

HEX
#AB8E3F
RGB
rgb(171, 142, 63)
HSL
hsl(44, 46%, 46%)
HSB
hsb(44, 63%, 67%)
CMYK
cmyk(0%, 17%, 63%, 33%)
Oklch
oklch(65.8% 0.104 89.1)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#BFC480

Fresh Green · Tan · Sunflower

HEX
#BFC480
RGB
rgb(191, 196, 128)
HSL
hsl(64, 37%, 64%)
HSB
hsb(64, 35%, 77%)
CMYK
cmyk(3%, 0%, 35%, 23%)
Oklch
oklch(80.0% 0.089 111.8)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#D9C342

Autumn Sage · GoldenRod · Sunflower

HEX
#D9C342
RGB
rgb(217, 195, 66)
HSL
hsl(51, 67%, 55%)
HSB
hsb(51, 70%, 85%)
CMYK
cmyk(0%, 10%, 70%, 15%)
Oklch
oklch(81.3% 0.146 99.4)

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

#FBF6AF

Fresh Green · Wheat · Lemon Cream

HEX
#FBF6AF
RGB
rgb(251, 246, 175)
HSL
hsl(56, 90%, 84%)
HSB
hsb(56, 30%, 98%)
CMYK
cmyk(0%, 2%, 30%, 2%)
Oklch
oklch(96.1% 0.090 104.6)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5B998F
995C66

Analogous

5C9970
5B998F
5C8599

Triadic

5B998F
8F5C99
998F5C

Split-Comp.

5B998F
995C85
99705C

Tetradic

5B998F
705C99
995C66
85995C

Contrast Matrix WCAG 2.1 Contrast

5B998F
AB8E3F
BFC480
D9C342
FBF6AF
—
1.0
Fail
1.8
Fail
1.8
Fail
3.0
Fail
1.0
Fail
—
1.7
Fail
1.8
Fail
2.8
Fail
1.8
Fail
1.7
Fail
—
1.0
Fail
1.7
Fail
1.8
Fail
1.8
Fail
1.0
Fail
—
1.6
Fail
3.0
Fail
2.8
Fail
1.7
Fail
1.6
Fail
—
White BG
3.3AA Large
3.1AA Large
1.8Fail
1.8Fail
1.1Fail
Black BG
6.4AA
6.7AA
11.4AAA
11.8AAA
18.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

767691
9E9E52
C1C190
CFCF61
F9F9C0

Deuteranopia

726E92
A0A257
C1C194
D1D269
F9FAC4

Tritanopia

5E9394
AA6165
BF9DA0
D87A7F
FBCED1

Achromatopsia

858585
8E8E8E
BBBBBB
BBBBBB
EFEFEF

Shades & Tints Shades & Tints

#5B998F

Dark
Light

#AB8E3F

Dark
Light

#BFC480

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5b998f;
  --color-2: #ab8e3f;
  --color-3: #bfc480;
  --color-4: #d9c342;
  --color-5: #fbf6af;
}

SCSS

$color-1: #5b998f;
$color-2: #ab8e3f;
$color-3: #bfc480;
$color-4: #d9c342;
$color-5: #fbf6af;

TAILWIND

colors: {
  'brand-1': '#5b998f',
  'brand-2': '#ab8e3f',
  'brand-3': '#bfc480',
  'brand-4': '#d9c342',
  'brand-5': '#fbf6af',
}

RGB Array

[91, 153, 143], [171, 142, 63], [191, 196, 128], [217, 195, 66], [251, 246, 175]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5B998F, #AB8E3F, #BFC480, #D9C342, #FBF6AF 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: #5b998f; --color-2: #ab8e3f; --color-3: #bfc480; --color-4: #d9c342; --color-5: #fbf6af. 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