← Back to Editor

#2C272B · #F20765 · #F29F8F · #FFB5B0 · #F6EEE4

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#2C272B

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#2C272B
RGB
rgb(44, 39, 43)
HSL
hsl(312, 6%, 16%)
HSB
hsb(312, 11%, 17%)
CMYK
cmyk(0%, 11%, 2%, 83%)
Oklch
oklch(28.0% 0.010 332.5)

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

#F20765

Dark Violet · Crimson · Camellia

HEX
#F20765
RGB
rgb(242, 7, 101)
HSL
hsl(336, 94%, 49%)
HSB
hsb(336, 97%, 95%)
CMYK
cmyk(0%, 97%, 58%, 5%)
Oklch
oklch(61.6% 0.245 9.2)

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

#F29F8F

Peach Pink · DarkSalmon · Coral Red

HEX
#F29F8F
RGB
rgb(242, 159, 143)
HSL
hsl(10, 79%, 75%)
HSB
hsb(10, 41%, 95%)
CMYK
cmyk(0%, 34%, 41%, 5%)
Oklch
oklch(78.1% 0.103 31.4)

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

#FFB5B0

Peach Pink · LightPink · Cherry Blossom

HEX
#FFB5B0
RGB
rgb(255, 181, 176)
HSL
hsl(4, 100%, 85%)
HSB
hsb(4, 31%, 100%)
CMYK
cmyk(0%, 29%, 31%, 0%)
Oklch
oklch(84.1% 0.087 23.4)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#F6EEE4

Goose Yellow · Linen · Peach Orange

HEX
#F6EEE4
RGB
rgb(246, 238, 228)
HSL
hsl(33, 50%, 93%)
HSB
hsb(33, 7%, 96%)
CMYK
cmyk(0%, 3%, 7%, 4%)
Oklch
oklch(95.3% 0.016 73.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2C272B
262B27

Analogous

2A262B
2C272B
2B2628

Triadic

2C272B
2A2B26
262A2B

Split-Comp.

2C272B
282B26
262B2A

Tetradic

2C272B
2B2A26
262B27
26282B

Contrast Matrix WCAG 2.1 Contrast

2C272B
F20765
F29F8F
FFB5B0
F6EEE4
—
3.5
AA Large
7.1
AAA
8.7
AAA
12.8
AAA
3.5
AA Large
—
2.0
Fail
2.5
Fail
3.7
AA Large
7.1
AAA
2.0
Fail
—
1.2
Fail
1.8
Fail
8.7
AAA
2.5
Fail
1.2
Fail
—
1.5
Fail
12.8
AAA
3.7
AA Large
1.8
Fail
1.5
Fail
—
White BG
14.7AAA
4.2AA Large
2.1Fail
1.7Fail
1.1Fail
Black BG
1.4Fail
5.0AA
10.1AAA
12.5AAA
18.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2A2A2A
8C8A4E
CECD93
DFDEB1
F3F2E6

Deuteranopia

2A2B2A
9AAB49
D3D994
E3E9B2
F3F4E7

Tritanopia

2C2929
E63C38
EE9697
FBB2B2
F6E8E9

Achromatopsia

292929
585858
B6B6B6
CBCBCB
EFEFEF

Shades & Tints Shades & Tints

#2C272B

Dark
Light

#F20765

Dark
Light

#F29F8F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2c272b;
  --color-2: #f20765;
  --color-3: #f29f8f;
  --color-4: #ffb5b0;
  --color-5: #f6eee4;
}

SCSS

$color-1: #2c272b;
$color-2: #f20765;
$color-3: #f29f8f;
$color-4: #ffb5b0;
$color-5: #f6eee4;

TAILWIND

colors: {
  'brand-1': '#2c272b',
  'brand-2': '#f20765',
  'brand-3': '#f29f8f',
  'brand-4': '#ffb5b0',
  'brand-5': '#f6eee4',
}

RGB Array

[44, 39, 43], [242, 7, 101], [242, 159, 143], [255, 181, 176], [246, 238, 228]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2C272B, #F20765, #F29F8F, #FFB5B0, #F6EEE4 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #2c272b; --color-2: #f20765; --color-3: #f29f8f; --color-4: #ffb5b0; --color-5: #f6eee4. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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