← Back to Editor

#2A272B · #BE3668 · #B5A4A4 · #D4DFD1 · #D8F2EF

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

#2A272B

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#2A272B
RGB
rgb(42, 39, 43)
HSL
hsl(285, 5%, 16%)
HSB
hsb(285, 9%, 17%)
CMYK
cmyk(2%, 9%, 0%, 83%)
Oklch
oklch(27.8% 0.008 317.7)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#BE3668

Dark Violet · MediumVioletRed · Camellia

HEX
#BE3668
RGB
rgb(190, 54, 104)
HSL
hsl(338, 56%, 48%)
HSB
hsb(338, 72%, 75%)
CMYK
cmyk(0%, 72%, 45%, 25%)
Oklch
oklch(54.9% 0.176 2.7)

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

#B5A4A4

Peach Pink · DarkGray · Coral Red

HEX
#B5A4A4
RGB
rgb(181, 164, 164)
HSL
hsl(0, 10%, 68%)
HSB
hsb(0, 9%, 71%)
CMYK
cmyk(0%, 9%, 9%, 29%)
Oklch
oklch(73.3% 0.020 17.6)

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

#D4DFD1

Celadon · LightGray · Mint Green

HEX
#D4DFD1
RGB
rgb(212, 223, 209)
HSL
hsl(107, 18%, 85%)
HSB
hsb(107, 6%, 87%)
CMYK
cmyk(5%, 0%, 6%, 13%)
Oklch
oklch(89.1% 0.022 139.0)

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

#D8F2EF

Jade · Lavender · Glacier Blue

HEX
#D8F2EF
RGB
rgb(216, 242, 239)
HSL
hsl(173, 50%, 90%)
HSB
hsb(173, 11%, 95%)
CMYK
cmyk(11%, 0%, 1%, 5%)
Oklch
oklch(94.1% 0.028 188.3)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2A272B
282B27

Analogous

28272B
2A272B
2B272A

Triadic

2A272B
2B2A27
272B2A

Split-Comp.

2A272B
2A2B27
272B28

Tetradic

2A272B
2B2827
282B27
272A2B

Contrast Matrix WCAG 2.1 Contrast

2A272B
BE3668
B5A4A4
D4DFD1
D8F2EF
—
2.8
Fail
6.2
AA
10.7
AAA
12.6
AAA
2.8
Fail
—
2.2
Fail
3.9
AA Large
4.6
AA
6.2
AA
2.2
Fail
—
1.7
Fail
2.0
Fail
10.7
AAA
3.9
AA Large
1.7
Fail
—
1.2
Fail
12.6
AAA
4.6
AA
2.0
Fail
1.2
Fail
—
White BG
14.8AAA
5.4AA
2.4Fail
1.4Fail
1.2Fail
Black BG
1.4Fail
3.9AA Large
8.8AAA
15.3AAA
17.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

29292A
83825C
AEADA4
D9D9D4
E3E3F0

Deuteranopia

29292A
8B9559
AFB0A4
D8D7D5
E2E0F0

Tritanopia

2A2929
B75250
B4A4A4
D5D7D8
D9F0F0

Achromatopsia

282828
646464
A9A9A9
DADADA
EAEAEA

Shades & Tints Shades & Tints

#2A272B

Dark
Light

#BE3668

Dark
Light

#B5A4A4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2a272b;
  --color-2: #be3668;
  --color-3: #b5a4a4;
  --color-4: #d4dfd1;
  --color-5: #d8f2ef;
}

SCSS

$color-1: #2a272b;
$color-2: #be3668;
$color-3: #b5a4a4;
$color-4: #d4dfd1;
$color-5: #d8f2ef;

TAILWIND

colors: {
  'brand-1': '#2a272b',
  'brand-2': '#be3668',
  'brand-3': '#b5a4a4',
  'brand-4': '#d4dfd1',
  'brand-5': '#d8f2ef',
}

RGB Array

[42, 39, 43], [190, 54, 104], [181, 164, 164], [212, 223, 209], [216, 242, 239]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2A272B, #BE3668, #B5A4A4, #D4DFD1, #D8F2EF 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: #2a272b; --color-2: #be3668; --color-3: #b5a4a4; --color-4: #d4dfd1; --color-5: #d8f2ef. 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