← Back to Editor

#342739 · #9B5168 · #F2807F · #F3DAB2 · #BBC4A5

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#342739

Dark Plum · DarkSlateGray · Dark Purple

HEX
#342739
RGB
rgb(52, 39, 57)
HSL
hsl(283, 19%, 19%)
HSB
hsb(283, 32%, 22%)
CMYK
cmyk(9%, 32%, 0%, 78%)
Oklch
oklch(29.5% 0.037 316.5)

Traditional「Dark Plum」· Paint「Dark Purple」· Creative Blush Sunrise

#9B5168

Dark Violet · DimGray · Camellia

HEX
#9B5168
RGB
rgb(155, 81, 104)
HSL
hsl(341, 31%, 46%)
HSB
hsb(341, 48%, 61%)
CMYK
cmyk(0%, 48%, 33%, 39%)
Oklch
oklch(53.1% 0.101 1.3)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#F2807F

Peach Pink · LightCoral · Coral Red

HEX
#F2807F
RGB
rgb(242, 128, 127)
HSL
hsl(1, 82%, 72%)
HSB
hsb(1, 48%, 95%)
CMYK
cmyk(0%, 47%, 48%, 5%)
Oklch
oklch(72.7% 0.140 21.6)

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

#F3DAB2

Goose Yellow · Wheat · Peach Orange

HEX
#F3DAB2
RGB
rgb(243, 218, 178)
HSL
hsl(37, 73%, 83%)
HSB
hsb(37, 27%, 95%)
CMYK
cmyk(0%, 10%, 27%, 5%)
Oklch
oklch(89.9% 0.059 79.5)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#BBC4A5

Willow Green · Silver · Apple Green

HEX
#BBC4A5
RGB
rgb(187, 196, 165)
HSL
hsl(77, 21%, 71%)
HSB
hsb(77, 16%, 77%)
CMYK
cmyk(5%, 0%, 16%, 23%)
Oklch
oklch(80.5% 0.044 120.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

342739
2C3A27

Analogous

2B273A
342739
3A2736

Triadic

342739
3A3427
273A34

Split-Comp.

342739
363A27
273A2B

Tetradic

342739
3A2B27
2C3A27
27363A

Contrast Matrix WCAG 2.1 Contrast

342739
9B5168
F2807F
F3DAB2
BBC4A5
—
2.5
Fail
5.5
AA
10.4
AAA
7.7
AAA
2.5
Fail
—
2.2
Fail
4.1
AA Large
3.1
AA Large
5.5
AA
2.2
Fail
—
1.9
Fail
1.4
Fail
10.4
AAA
4.1
AA Large
1.9
Fail
—
1.3
Fail
7.7
AAA
3.1
AA Large
1.4
Fail
1.3
Fail
—
White BG
14.0AAA
5.6AA
2.6Fail
1.4Fail
1.8Fail
Black BG
1.5Fail
3.8AA Large
8.2AAA
15.5AAA
11.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2E2E35
7B7A62
C1C07F
E8E8BC
BFBFAD

Deuteranopia

2F3034
7F8561
C7D07F
EAECBE
BEBEAE

Tritanopia

333130
975E5D
EC7F7F
F2C3C5
BBB2B4

Achromatopsia

2D2D2D
6A6A6A
A2A2A2
DDDDDD
BEBEBE

Shades & Tints Shades & Tints

#342739

Dark
Light

#9B5168

Dark
Light

#F2807F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #342739;
  --color-2: #9b5168;
  --color-3: #f2807f;
  --color-4: #f3dab2;
  --color-5: #bbc4a5;
}

SCSS

$color-1: #342739;
$color-2: #9b5168;
$color-3: #f2807f;
$color-4: #f3dab2;
$color-5: #bbc4a5;

TAILWIND

colors: {
  'brand-1': '#342739',
  'brand-2': '#9b5168',
  'brand-3': '#f2807f',
  'brand-4': '#f3dab2',
  'brand-5': '#bbc4a5',
}

RGB Array

[52, 39, 57], [155, 81, 104], [242, 128, 127], [243, 218, 178], [187, 196, 165]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #342739, #9B5168, #F2807F, #F3DAB2, #BBC4A5 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: #342739; --color-2: #9b5168; --color-3: #f2807f; --color-4: #f3dab2; --color-5: #bbc4a5. 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