← Back to Editor

#B5AC5E · #65978C · #496975 · #474E6B · #661C2D

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

#B5AC5E

Autumn Sage · Tan · Sunflower

HEX
#B5AC5E
RGB
rgb(181, 172, 94)
HSL
hsl(54, 37%, 54%)
HSB
hsb(54, 48%, 71%)
CMYK
cmyk(0%, 5%, 48%, 29%)
Oklch
oklch(73.5% 0.100 102.7)

TraditionalAutumn Sage」· PaintSunflower」· Creative Blush Sunrise

#65978C

Mineral Blue · CadetBlue · Mint Ice

HEX
#65978C
RGB
rgb(101, 151, 140)
HSL
hsl(167, 20%, 49%)
HSB
hsb(167, 33%, 59%)
CMYK
cmyk(33%, 0%, 7%, 41%)
Oklch
oklch(63.8% 0.056 179.1)

TraditionalMineral Blue」· PaintMint Ice」· Creative Blush Sunrise

#496975

Slate Blue · DimGray · Mint Ice

HEX
#496975
RGB
rgb(73, 105, 117)
HSL
hsl(196, 23%, 37%)
HSB
hsb(196, 38%, 46%)
CMYK
cmyk(38%, 10%, 0%, 54%)
Oklch
oklch(50.1% 0.042 223.3)

TraditionalSlate Blue」· PaintMint Ice」· Creative Blush Sunrise

#474E6B

Indigo · DarkSlateBlue · Prussian Blue

HEX
#474E6B
RGB
rgb(71, 78, 107)
HSL
hsl(228, 20%, 35%)
HSB
hsb(228, 34%, 42%)
CMYK
cmyk(34%, 27%, 0%, 58%)
Oklch
oklch(43.0% 0.049 273.7)

TraditionalIndigo」· PaintPrussian Blue」· Creative Blush Sunrise

#661C2D

Crimson · Maroon · Wine Red

HEX
#661C2D
RGB
rgb(102, 28, 45)
HSL
hsl(346, 57%, 25%)
HSB
hsb(346, 73%, 40%)
CMYK
cmyk(0%, 73%, 56%, 60%)
Oklch
oklch(35.1% 0.106 10.9)

TraditionalCrimson」· PaintWine Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B5AC5E
5E67B5

Analogous

B5815E
B5AC5E
92B55E

Triadic

B5AC5E
5EB5AC
AC5EB5

Split-Comp.

B5AC5E
5E92B5
815EB5

Tetradic

B5AC5E
5EB581
5E67B5
B55E92

Contrast Matrix WCAG 2.1 Contrast

B5AC5E
65978C
496975
474E6B
661C2D
1.4
Fail
2.5
Fail
3.5
AA Large
5.1
AA
1.4
Fail
1.8
Fail
2.5
Fail
3.6
AA Large
2.5
Fail
1.8
Fail
1.4
Fail
2.0
Fail
3.5
AA Large
2.5
Fail
1.4
Fail
1.5
Fail
5.1
AA
3.6
AA Large
2.0
Fail
1.5
Fail
White BG
2.3Fail
3.3AA Large
5.9AA
8.2AAA
11.9AAA
Black BG
9.0AAA
6.4AA
3.6AA Large
2.6Fail
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B1B171
7B7B8F
575772
4A4A64
464529

Deuteranopia

B2B275
78748F
555371
4A4962
4A5028

Tritanopia

B58083
679191
4B706F
475E5D
622625

Achromatopsia

A6A6A6
878787
616161
4F4F4F
343434

Shades & Tints Shades & Tints

#B5AC5E

Dark
Light

#65978C

Dark
Light

#496975

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b5ac5e;
  --color-2: #65978c;
  --color-3: #496975;
  --color-4: #474e6b;
  --color-5: #661c2d;
}

SCSS

$color-1: #b5ac5e;
$color-2: #65978c;
$color-3: #496975;
$color-4: #474e6b;
$color-5: #661c2d;

TAILWIND

colors: {
  'brand-1': '#b5ac5e',
  'brand-2': '#65978c',
  'brand-3': '#496975',
  'brand-4': '#474e6b',
  'brand-5': '#661c2d',
}

RGB Array

[181, 172, 94], [101, 151, 140], [73, 105, 117], [71, 78, 107], [102, 28, 45]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B5AC5E, #65978C, #496975, #474E6B, #661C2D 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: #b5ac5e; --color-2: #65978c; --color-3: #496975; --color-4: #474e6b; --color-5: #661c2d. 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