← Back to Editor

#186B79 · #9997A4 · #A1A584 · #BF8C4A · #B44C29

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

#186B79

Lake Blue · Teal · Mint Ice

HEX
#186B79
RGB
rgb(24, 107, 121)
HSL
hsl(189, 67%, 28%)
HSB
hsb(189, 80%, 47%)
CMYK
cmyk(80%, 12%, 0%, 53%)
Oklch
oklch(48.7% 0.078 211.8)

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

#9997A4

Ash · DarkGray · Silver Sand

HEX
#9997A4
RGB
rgb(153, 151, 164)
HSL
hsl(249, 7%, 62%)
HSB
hsb(249, 8%, 64%)
CMYK
cmyk(7%, 8%, 0%, 36%)
Oklch
oklch(68.2% 0.019 293.0)

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

#A1A584

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#A1A584
RGB
rgb(161, 165, 132)
HSL
hsl(67, 15%, 58%)
HSB
hsb(67, 20%, 65%)
CMYK
cmyk(2%, 0%, 20%, 35%)
Oklch
oklch(71.0% 0.046 113.2)

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

#BF8C4A

Ginger · GoldenRod · Warm Sun

HEX
#BF8C4A
RGB
rgb(191, 140, 74)
HSL
hsl(34, 48%, 52%)
HSB
hsb(34, 61%, 75%)
CMYK
cmyk(0%, 27%, 61%, 25%)
Oklch
oklch(67.6% 0.104 71.5)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#B44C29

Tangerine · Sienna · Amber Brown

HEX
#B44C29
RGB
rgb(180, 76, 41)
HSL
hsl(15, 63%, 43%)
HSB
hsb(15, 77%, 71%)
CMYK
cmyk(0%, 58%, 77%, 29%)
Oklch
oklch(54.7% 0.144 38.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

186B79
772618

Analogous

187756
186B79
183977

Triadic

186B79
771869
697718

Split-Comp.

186B79
771839
775618

Tetradic

186B79
561877
772618
397718

Contrast Matrix WCAG 2.1 Contrast

186B79
9997A4
A1A584
BF8C4A
B44C29
—
2.1
Fail
2.4
Fail
2.1
Fail
1.2
Fail
2.1
Fail
—
1.1
Fail
1.0
Fail
1.8
Fail
2.4
Fail
1.1
Fail
—
1.2
Fail
2.1
Fail
2.1
Fail
1.0
Fail
1.2
Fail
—
1.8
Fail
1.2
Fail
1.8
Fail
2.1
Fail
1.8
Fail
—
White BG
6.1AA
2.9Fail
2.6Fail
3.0Fail
5.2AA
Black BG
3.4AA Large
7.3AAA
8.2AAA
7.1AAA
4.0AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

3C3D76
9898A1
A3A38C
A9A85A
878631

Deuteranopia

373175
9898A0
A3A28E
ACB05E
8D9534

Tritanopia

1C7372
999E9E
A19294
BC6769
AF383A

Achromatopsia

545454
999999
A0A0A0
949494
676767

Shades & Tints Shades & Tints

#186B79

Dark
Light

#9997A4

Dark
Light

#A1A584

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #186b79;
  --color-2: #9997a4;
  --color-3: #a1a584;
  --color-4: #bf8c4a;
  --color-5: #b44c29;
}

SCSS

$color-1: #186b79;
$color-2: #9997a4;
$color-3: #a1a584;
$color-4: #bf8c4a;
$color-5: #b44c29;

TAILWIND

colors: {
  'brand-1': '#186b79',
  'brand-2': '#9997a4',
  'brand-3': '#a1a584',
  'brand-4': '#bf8c4a',
  'brand-5': '#b44c29',
}

RGB Array

[24, 107, 121], [153, 151, 164], [161, 165, 132], [191, 140, 74], [180, 76, 41]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #186B79, #9997A4, #A1A584, #BF8C4A, #B44C29 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: #186b79; --color-2: #9997a4; --color-3: #a1a584; --color-4: #bf8c4a; --color-5: #b44c29. 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