← Back to Editor

#BEC1AF · #849BA4 · #374A62 · #CB271D · #EC9135

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 LibraryData Visualization

Color Details Color Details

#BEC1AF

Willow Green · Silver · Apple Green

HEX
#BEC1AF
RGB
rgb(190, 193, 175)
HSL
hsl(70, 13%, 72%)
HSB
hsb(70, 9%, 76%)
CMYK
cmyk(2%, 0%, 9%, 24%)
Oklch
oklch(80.4% 0.025 114.6)

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

#849BA4

Slate Blue · LightSlateGray · Lake Green

HEX
#849BA4
RGB
rgb(132, 155, 164)
HSL
hsl(197, 15%, 58%)
HSB
hsb(197, 20%, 64%)
CMYK
cmyk(20%, 5%, 0%, 36%)
Oklch
oklch(67.5% 0.029 223.4)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#374A62

Indigo · DarkSlateGray · Prussian Blue

HEX
#374A62
RGB
rgb(55, 74, 98)
HSL
hsl(213, 28%, 30%)
HSB
hsb(213, 44%, 38%)
CMYK
cmyk(44%, 24%, 0%, 62%)
Oklch
oklch(40.4% 0.047 254.6)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#CB271D

Vermilion · FireBrick · Passion Red

HEX
#CB271D
RGB
rgb(203, 39, 29)
HSL
hsl(3, 75%, 45%)
HSB
hsb(3, 86%, 80%)
CMYK
cmyk(0%, 81%, 86%, 20%)
Oklch
oklch(54.6% 0.200 29.1)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#EC9135

Ginger · GoldenRod · Warm Sun

HEX
#EC9135
RGB
rgb(236, 145, 53)
HSL
hsl(30, 83%, 57%)
HSB
hsb(30, 78%, 93%)
CMYK
cmyk(0%, 39%, 78%, 7%)
Oklch
oklch(73.7% 0.150 61.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BEC1AF
B1AEC1

Analogous

C1BBAE
BEC1AF
B5C1AE

Triadic

BEC1AF
AEBEC1
C1AEBE

Split-Comp.

BEC1AF
AEB5C1
BBAEC1

Tetradic

BEC1AF
AEC1BB
B1AEC1
C1AEB5

Contrast Matrix WCAG 2.1 Contrast

BEC1AF
849BA4
374A62
CB271D
EC9135
—
1.6
Fail
4.9
AA
3.0
Fail
1.3
Fail
1.6
Fail
—
3.1
AA Large
1.9
Fail
1.2
Fail
4.9
AA
3.1
AA Large
—
1.7
Fail
3.7
AA Large
3.0
Fail
1.9
Fail
1.7
Fail
—
2.3
Fail
1.3
Fail
1.2
Fail
3.7
AA Large
2.3
Fail
—
White BG
1.8Fail
2.9Fail
9.1AAA
5.5AA
2.4Fail
Black BG
11.4AAA
7.2AAA
2.3Fail
3.8AA Large
8.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BFBFB3
8E8EA2
3F3F5C
84831F
C5C44B

Deuteranopia

BFBFB4
8D8BA1
3E3D5B
8E9A20
CAD151

Tritanopia

BEB7B8
85A0A0
385857
C32122
E75D61

Achromatopsia

BEBEBE
959595
474747
575757
A2A2A2

Shades & Tints Shades & Tints

#BEC1AF

Dark
Light

#849BA4

Dark
Light

#374A62

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bec1af;
  --color-2: #849ba4;
  --color-3: #374a62;
  --color-4: #cb271d;
  --color-5: #ec9135;
}

SCSS

$color-1: #bec1af;
$color-2: #849ba4;
$color-3: #374a62;
$color-4: #cb271d;
$color-5: #ec9135;

TAILWIND

colors: {
  'brand-1': '#bec1af',
  'brand-2': '#849ba4',
  'brand-3': '#374a62',
  'brand-4': '#cb271d',
  'brand-5': '#ec9135',
}

RGB Array

[190, 193, 175], [132, 155, 164], [55, 74, 98], [203, 39, 29], [236, 145, 53]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BEC1AF, #849BA4, #374A62, #CB271D, #EC9135 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #bec1af; --color-2: #849ba4; --color-3: #374a62; --color-4: #cb271d; --color-5: #ec9135. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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