← Back to Editor

#334644 · #B0DDBE · #E3193F · #EC5A27 · #B9AB6E

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

#334644

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#334644
RGB
rgb(51, 70, 68)
HSL
hsl(174, 16%, 24%)
HSB
hsb(174, 27%, 27%)
CMYK
cmyk(27%, 0%, 3%, 73%)
Oklch
oklch(37.7% 0.024 188.2)

Traditional「Mineral Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#B0DDBE

Celadon · Silver · Apple Green

HEX
#B0DDBE
RGB
rgb(176, 221, 190)
HSL
hsl(139, 40%, 78%)
HSB
hsb(139, 20%, 87%)
CMYK
cmyk(20%, 0%, 14%, 13%)
Oklch
oklch(85.7% 0.064 154.8)

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

#E3193F

Vermilion · Crimson · Passion Red

HEX
#E3193F
RGB
rgb(227, 25, 63)
HSL
hsl(349, 80%, 49%)
HSB
hsb(349, 89%, 89%)
CMYK
cmyk(0%, 89%, 72%, 11%)
Oklch
oklch(58.6% 0.226 20.1)

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

#EC5A27

Tangerine · Chocolate · Warm Sun

HEX
#EC5A27
RGB
rgb(236, 90, 39)
HSL
hsl(16, 84%, 54%)
HSB
hsb(16, 83%, 93%)
CMYK
cmyk(0%, 62%, 83%, 7%)
Oklch
oklch(65.3% 0.191 38.2)

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

#B9AB6E

Ginger · Tan · Sunflower

HEX
#B9AB6E
RGB
rgb(185, 171, 110)
HSL
hsl(49, 35%, 58%)
HSB
hsb(49, 41%, 73%)
CMYK
cmyk(0%, 8%, 41%, 27%)
Oklch
oklch(73.9% 0.082 96.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

334644
473335

Analogous

33473B
334644
333F47

Triadic

334644
453347
474533

Split-Comp.

334644
47333F
473B33

Tetradic

334644
3B3347
473335
3F4733

Contrast Matrix WCAG 2.1 Contrast

334644
B0DDBE
E3193F
EC5A27
B9AB6E
—
6.6
AA
2.1
Fail
2.9
Fail
4.3
AA Large
6.6
AA
—
3.1
AA Large
2.3
Fail
1.5
Fail
2.1
Fail
3.1
AA Large
—
1.4
Fail
2.0
Fail
2.9
Fail
2.3
Fail
1.4
Fail
—
1.5
Fail
4.3
AA Large
1.5
Fail
2.0
Fail
1.5
Fail
—
White BG
10.0AAA
1.5Fail
4.7AA
3.5AA Large
2.3Fail
Black BG
2.1Fail
13.9AAA
4.5AA Large
6.1AA
9.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3B3B44
C3C4C6
8C8A36
ADAB33
B3B37D

Deuteranopia

3A3945
C1BEC7
97A634
B5C036
B4B580

Tritanopia

344545
B2CBCD
D92F2D
E53D3F
B8888B

Achromatopsia

404040
CCCCCC
5A5A5A
808080
A8A8A8

Shades & Tints Shades & Tints

#334644

Dark
Light

#B0DDBE

Dark
Light

#E3193F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #334644;
  --color-2: #b0ddbe;
  --color-3: #e3193f;
  --color-4: #ec5a27;
  --color-5: #b9ab6e;
}

SCSS

$color-1: #334644;
$color-2: #b0ddbe;
$color-3: #e3193f;
$color-4: #ec5a27;
$color-5: #b9ab6e;

TAILWIND

colors: {
  'brand-1': '#334644',
  'brand-2': '#b0ddbe',
  'brand-3': '#e3193f',
  'brand-4': '#ec5a27',
  'brand-5': '#b9ab6e',
}

RGB Array

[51, 70, 68], [176, 221, 190], [227, 25, 63], [236, 90, 39], [185, 171, 110]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #334644, #B0DDBE, #E3193F, #EC5A27, #B9AB6E 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: #334644; --color-2: #b0ddbe; --color-3: #e3193f; --color-4: #ec5a27; --color-5: #b9ab6e. 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