← Back to Editor

#332E3A · #75A9B4 · #BFB4C2 · #C2B4B4 · #B9EB61

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

#332E3A

Deep Indigo · DarkSlateGray · Dark Purple

HEX
#332E3A
RGB
rgb(51, 46, 58)
HSL
hsl(265, 12%, 20%)
HSB
hsb(265, 21%, 23%)
CMYK
cmyk(12%, 21%, 0%, 77%)
Oklch
oklch(31.1% 0.022 304.1)

Traditional「Deep Indigo」· Paint「Dark Purple」· Creative Blush Sunrise

#75A9B4

Slate Blue · CadetBlue · Lake Green

HEX
#75A9B4
RGB
rgb(117, 169, 180)
HSL
hsl(190, 30%, 58%)
HSB
hsb(190, 35%, 71%)
CMYK
cmyk(35%, 6%, 0%, 29%)
Oklch
oklch(70.2% 0.057 212.3)

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

#BFB4C2

Lilac · Silver · Lilac Purple

HEX
#BFB4C2
RGB
rgb(191, 180, 194)
HSL
hsl(287, 10%, 73%)
HSB
hsb(287, 7%, 76%)
CMYK
cmyk(2%, 7%, 0%, 24%)
Oklch
oklch(78.3% 0.023 319.0)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

#C2B4B4

Peach Pink · Silver · Coral Red

HEX
#C2B4B4
RGB
rgb(194, 180, 180)
HSL
hsl(0, 10%, 73%)
HSB
hsb(0, 7%, 76%)
CMYK
cmyk(0%, 7%, 7%, 24%)
Oklch
oklch(78.2% 0.016 17.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#B9EB61

Willow Green · GreenYellow · Apple Green

HEX
#B9EB61
RGB
rgb(185, 235, 97)
HSL
hsl(82, 78%, 65%)
HSB
hsb(82, 59%, 92%)
CMYK
cmyk(21%, 0%, 59%, 8%)
Oklch
oklch(87.8% 0.174 126.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

332E3A
34392D

Analogous

2D2E39
332E3A
382D39

Triadic

332E3A
39322D
2D3932

Split-Comp.

332E3A
39382D
2E392D

Tetradic

332E3A
392D2E
34392D
2D3938

Contrast Matrix WCAG 2.1 Contrast

332E3A
75A9B4
BFB4C2
C2B4B4
B9EB61
—
5.1
AA
6.6
AA
6.6
AA
9.5
AAA
5.1
AA
—
1.3
Fail
1.3
Fail
1.9
Fail
6.6
AA
1.3
Fail
—
1.0
Fail
1.4
Fail
6.6
AA
1.3
Fail
1.0
Fail
—
1.4
Fail
9.5
AAA
1.9
Fail
1.4
Fail
1.4
Fail
—
White BG
13.2AAA
2.6Fail
2.0Fail
2.0Fail
1.4Fail
Black BG
1.6Fail
8.1AAA
10.5AAA
10.5AAA
15.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

313137
8C8CB1
BABABF
BCBCB4
CFCF82

Deuteranopia

313136
8985B1
BBBCBE
BDBEB4
CCC88A

Tritanopia

333534
78AFAF
BEBCBB
C1B4B4
BC9DA3

Achromatopsia

313131
9B9B9B
B9B9B9
B8B8B8
CCCCCC

Shades & Tints Shades & Tints

#332E3A

Dark
Light

#75A9B4

Dark
Light

#BFB4C2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #332e3a;
  --color-2: #75a9b4;
  --color-3: #bfb4c2;
  --color-4: #c2b4b4;
  --color-5: #b9eb61;
}

SCSS

$color-1: #332e3a;
$color-2: #75a9b4;
$color-3: #bfb4c2;
$color-4: #c2b4b4;
$color-5: #b9eb61;

TAILWIND

colors: {
  'brand-1': '#332e3a',
  'brand-2': '#75a9b4',
  'brand-3': '#bfb4c2',
  'brand-4': '#c2b4b4',
  'brand-5': '#b9eb61',
}

RGB Array

[51, 46, 58], [117, 169, 180], [191, 180, 194], [194, 180, 180], [185, 235, 97]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #332E3A, #75A9B4, #BFB4C2, #C2B4B4, #B9EB61 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #332e3a; --color-2: #75a9b4; --color-3: #bfb4c2; --color-4: #c2b4b4; --color-5: #b9eb61. 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. Restrained colors convey professionalism and trust. 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