← Back to Editor

#B33028 · #4E2825 · #7EBB99 · #BACFC6 · #FFE8D4

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

#B33028

Vermilion · FireBrick · Passion Red

HEX
#B33028
RGB
rgb(179, 48, 40)
HSL
hsl(3, 63%, 43%)
HSB
hsb(3, 78%, 70%)
CMYK
cmyk(0%, 73%, 78%, 30%)
Oklch
oklch(51.1% 0.169 28.2)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#4E2825

Crimson · DarkSlateGray · Wine Red

HEX
#4E2825
RGB
rgb(78, 40, 37)
HSL
hsl(4, 36%, 23%)
HSB
hsb(4, 53%, 31%)
CMYK
cmyk(0%, 49%, 53%, 69%)
Oklch
oklch(32.6% 0.057 25.4)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#7EBB99

Celadon · DarkSeaGreen · Apple Green

HEX
#7EBB99
RGB
rgb(126, 187, 153)
HSL
hsl(147, 31%, 61%)
HSB
hsb(147, 33%, 73%)
CMYK
cmyk(33%, 0%, 18%, 27%)
Oklch
oklch(74.1% 0.080 159.2)

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

#BACFC6

Jade · Silver · Apple Green

HEX
#BACFC6
RGB
rgb(186, 207, 198)
HSL
hsl(154, 18%, 77%)
HSB
hsb(154, 10%, 81%)
CMYK
cmyk(10%, 0%, 4%, 19%)
Oklch
oklch(83.6% 0.026 168.1)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#FFE8D4

Apricot · Bisque · Peach Orange

HEX
#FFE8D4
RGB
rgb(255, 232, 212)
HSL
hsl(28, 100%, 92%)
HSB
hsb(28, 17%, 100%)
CMYK
cmyk(0%, 9%, 17%, 0%)
Oklch
oklch(94.4% 0.037 63.4)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B33028
29ACB3

Analogous

B32967
B33028
B37529

Triadic

B33028
29B32F
2F29B3

Split-Comp.

B33028
29B375
2967B3

Tetradic

B33028
67B329
29ACB3
7529B3

Contrast Matrix WCAG 2.1 Contrast

B33028
4E2825
7EBB99
BACFC6
FFE8D4
—
2.0
Fail
2.8
Fail
3.8
AA Large
5.3
AA
2.0
Fail
—
5.7
AA
7.8
AAA
10.7
AAA
2.8
Fail
5.7
AA
—
1.4
Fail
1.9
Fail
3.8
AA Large
7.8
AAA
1.4
Fail
—
1.4
Fail
5.3
AA
10.7
AAA
1.9
Fail
1.4
Fail
—
White BG
6.2AA
12.7AAA
2.2Fail
1.6Fail
1.2Fail
Black BG
3.4AA Large
1.7Fail
9.5AAA
12.8AAA
17.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7A792A
3E3D26
9899A1
C3C3C8
F5F5D9

Deuteranopia

828C2A
404326
9590A3
C2C0C9
F6F8DA

Tritanopia

AC2B2C
4C2626
81A8A9
BBCACA
FEDDDE

Achromatopsia

565656
333333
A5A5A5
C8C8C8
EDEDED

Shades & Tints Shades & Tints

#B33028

Dark
Light

#4E2825

Dark
Light

#7EBB99

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b33028;
  --color-2: #4e2825;
  --color-3: #7ebb99;
  --color-4: #bacfc6;
  --color-5: #ffe8d4;
}

SCSS

$color-1: #b33028;
$color-2: #4e2825;
$color-3: #7ebb99;
$color-4: #bacfc6;
$color-5: #ffe8d4;

TAILWIND

colors: {
  'brand-1': '#b33028',
  'brand-2': '#4e2825',
  'brand-3': '#7ebb99',
  'brand-4': '#bacfc6',
  'brand-5': '#ffe8d4',
}

RGB Array

[179, 48, 40], [78, 40, 37], [126, 187, 153], [186, 207, 198], [255, 232, 212]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B33028, #4E2825, #7EBB99, #BACFC6, #FFE8D4 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: #b33028; --color-2: #4e2825; --color-3: #7ebb99; --color-4: #bacfc6; --color-5: #ffe8d4. 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