← Back to Editor

#2E2525 · #FC1C34 · #DB436A · #68997E · #FA7224

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 Library

Color Details Color Details

#2E2525

Crimson · DarkSlateGray · Deep Berry

HEX
#2E2525
RGB
rgb(46, 37, 37)
HSL
hsl(0, 11%, 16%)
HSB
hsb(0, 20%, 18%)
CMYK
cmyk(0%, 20%, 20%, 82%)
Oklch
oklch(27.5% 0.014 18.0)

TraditionalCrimson」· PaintDeep Berry」· Creative Blush Sunrise

#FC1C34

Vermilion · Crimson · Passion Red

HEX
#FC1C34
RGB
rgb(252, 28, 52)
HSL
hsl(354, 97%, 55%)
HSB
hsb(354, 89%, 99%)
CMYK
cmyk(0%, 89%, 79%, 1%)
Oklch
oklch(63.2% 0.246 24.5)

TraditionalVermilion」· PaintPassion Red」· Creative Blush Sunrise

#DB436A

Vermilion · MediumVioletRed · Passion Red

HEX
#DB436A
RGB
rgb(219, 67, 106)
HSL
hsl(345, 68%, 56%)
HSB
hsb(345, 69%, 86%)
CMYK
cmyk(0%, 69%, 52%, 14%)
Oklch
oklch(61.0% 0.189 9.5)

TraditionalVermilion」· PaintPassion Red」· Creative Blush Sunrise

#68997E

Celadon · SlateGray · Olive Green

HEX
#68997E
RGB
rgb(104, 153, 126)
HSL
hsl(147, 19%, 50%)
HSB
hsb(147, 32%, 60%)
CMYK
cmyk(32%, 0%, 18%, 40%)
Oklch
oklch(64.0% 0.067 159.7)

TraditionalCeladon」· PaintOlive Green」· Creative Blush Sunrise

#FA7224

Tangerine · Tomato · Warm Sun

HEX
#FA7224
RGB
rgb(250, 114, 36)
HSL
hsl(22, 96%, 56%)
HSB
hsb(22, 86%, 98%)
CMYK
cmyk(0%, 54%, 86%, 2%)
Oklch
oklch(70.6% 0.186 45.4)

TraditionalTangerine」· PaintWarm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2E2525
242D2D

Analogous

2D2429
2E2525
2D2924

Triadic

2E2525
242D24
24242D

Split-Comp.

2E2525
242D29
24292D

Tetradic

2E2525
292D24
242D2D
29242D

Contrast Matrix WCAG 2.1 Contrast

2E2525
FC1C34
DB436A
68997E
FA7224
3.8
AA Large
3.6
AA Large
4.6
AA
5.3
AA
3.8
AA Large
1.1
Fail
1.2
Fail
1.4
Fail
3.6
AA Large
1.1
Fail
1.3
Fail
1.5
Fail
4.6
AA
1.2
Fail
1.3
Fail
1.2
Fail
5.3
AA
1.4
Fail
1.5
Fail
1.2
Fail
White BG
14.9AAA
3.9AA Large
4.2AA Large
3.3AA Large
2.8Fail
Black BG
1.4Fail
5.4AA
5.0AA
6.4AA
7.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2A2A25
9B992E
999861
7D7E85
BFBE37

Deuteranopia

2B2B25
A8B92D
A2AD5E
7A7786
C7D13B

Tritanopia

2E2525
F12A29
D35957
6A8A8B
F34649

Achromatopsia

282828
626262
757575
878787
929292

Shades & Tints Shades & Tints

#2E2525

Dark
Light

#FC1C34

Dark
Light

#DB436A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2e2525;
  --color-2: #fc1c34;
  --color-3: #db436a;
  --color-4: #68997e;
  --color-5: #fa7224;
}

SCSS

$color-1: #2e2525;
$color-2: #fc1c34;
$color-3: #db436a;
$color-4: #68997e;
$color-5: #fa7224;

TAILWIND

colors: {
  'brand-1': '#2e2525',
  'brand-2': '#fc1c34',
  'brand-3': '#db436a',
  'brand-4': '#68997e',
  'brand-5': '#fa7224',
}

RGB Array

[46, 37, 37], [252, 28, 52], [219, 67, 106], [104, 153, 126], [250, 114, 36]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2E2525, #FC1C34, #DB436A, #68997E, #FA7224 is ideal for: corporate websites, product showcases, portfolios. 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: #2e2525; --color-2: #fc1c34; --color-3: #db436a; --color-4: #68997e; --color-5: #fa7224. 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. 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