← Back to Editor

#009984 · #338F79 · #65866E · #BCB604 · #987C63

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

#009984

Mineral Blue · Teal · Mint Ice

HEX
#009984
RGB
rgb(0, 153, 132)
HSL
hsl(172, 100%, 30%)
HSB
hsb(172, 100%, 60%)
CMYK
cmyk(100%, 0%, 14%, 40%)
Oklch
oklch(61.1% 0.112 178.4)

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

#338F79

Mineral Blue · SeaGreen · Mint Ice

HEX
#338F79
RGB
rgb(51, 143, 121)
HSL
hsl(166, 47%, 38%)
HSB
hsb(166, 64%, 56%)
CMYK
cmyk(64%, 0%, 15%, 44%)
Oklch
oklch(58.9% 0.093 174.2)

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

#65866E

Celadon · DimGray · Olive Green

HEX
#65866E
RGB
rgb(101, 134, 110)
HSL
hsl(136, 14%, 46%)
HSB
hsb(136, 25%, 53%)
CMYK
cmyk(25%, 0%, 18%, 47%)
Oklch
oklch(58.8% 0.052 153.0)

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

#BCB604

Autumn Sage · GoldenRod · Honey Gold

HEX
#BCB604
RGB
rgb(188, 182, 4)
HSL
hsl(58, 96%, 38%)
HSB
hsb(58, 98%, 74%)
CMYK
cmyk(0%, 3%, 98%, 26%)
Oklch
oklch(75.7% 0.162 107.3)

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

#987C63

Tangerine · Gray · Amber Brown

HEX
#987C63
RGB
rgb(152, 124, 99)
HSL
hsl(28, 21%, 49%)
HSB
hsb(28, 35%, 60%)
CMYK
cmyk(0%, 18%, 35%, 40%)
Oklch
oklch(60.6% 0.050 63.4)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

009984
990014

Analogous

009938
009984
006199

Triadic

009984
850099
998500

Split-Comp.

009984
990061
993800

Tetradic

009984
380099
990014
619900

Contrast Matrix WCAG 2.1 Contrast

009984
338F79
65866E
BCB604
987C63
—
1.1
Fail
1.1
Fail
1.7
Fail
1.1
Fail
1.1
Fail
—
1.0
Fail
1.8
Fail
1.0
Fail
1.1
Fail
1.0
Fail
—
1.9
Fail
1.0
Fail
1.7
Fail
1.8
Fail
1.9
Fail
—
1.8
Fail
1.1
Fail
1.0
Fail
1.0
Fail
1.8
Fail
—
White BG
3.6AA Large
3.9AA Large
4.0AA Large
2.1Fail
3.9AA Large
Black BG
5.9AA
5.3AA
5.2AA
9.8AAA
5.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

424489
5B5C7E
737474
B9B92F
8C8C69

Deuteranopia

392E8A
564F80
716F75
BABA39
8E906B

Tritanopia

088D8E
388383
677879
BC5159
976E6F

Achromatopsia

696969
717171
797979
A4A4A4
828282

Shades & Tints Shades & Tints

#009984

Dark
Light

#338F79

Dark
Light

#65866E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #009984;
  --color-2: #338f79;
  --color-3: #65866e;
  --color-4: #bcb604;
  --color-5: #987c63;
}

SCSS

$color-1: #009984;
$color-2: #338f79;
$color-3: #65866e;
$color-4: #bcb604;
$color-5: #987c63;

TAILWIND

colors: {
  'brand-1': '#009984',
  'brand-2': '#338f79',
  'brand-3': '#65866e',
  'brand-4': '#bcb604',
  'brand-5': '#987c63',
}

RGB Array

[0, 153, 132], [51, 143, 121], [101, 134, 110], [188, 182, 4], [152, 124, 99]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #009984, #338F79, #65866E, #BCB604, #987C63 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: #009984; --color-2: #338f79; --color-3: #65866e; --color-4: #bcb604; --color-5: #987c63. 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