← Back to Editor

#FF3624 · #422826 · #BFB8A6 · #D4CBB8 · #7DBDAD

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

#FF3624

Vermilion · OrangeRed · Passion Red

HEX
#FF3624
RGB
rgb(255, 54, 36)
HSL
hsl(5, 100%, 57%)
HSB
hsb(5, 86%, 100%)
CMYK
cmyk(0%, 79%, 86%, 0%)
Oklch
oklch(65.0% 0.237 29.9)

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

#422826

Crimson · DarkSlateGray · Deep Berry

HEX
#422826
RGB
rgb(66, 40, 38)
HSL
hsl(4, 27%, 20%)
HSB
hsb(4, 42%, 26%)
CMYK
cmyk(0%, 39%, 42%, 74%)
Oklch
oklch(30.9% 0.040 24.4)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#BFB8A6

Ginger · DarkGray · Sunflower

HEX
#BFB8A6
RGB
rgb(191, 184, 166)
HSL
hsl(43, 16%, 70%)
HSB
hsb(43, 13%, 75%)
CMYK
cmyk(0%, 4%, 13%, 25%)
Oklch
oklch(78.3% 0.026 89.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#D4CBB8

Goose Yellow · Silver · Lemon Cream

HEX
#D4CBB8
RGB
rgb(212, 203, 184)
HSL
hsl(41, 25%, 78%)
HSB
hsb(41, 13%, 83%)
CMYK
cmyk(0%, 4%, 13%, 17%)
Oklch
oklch(84.4% 0.028 85.7)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#7DBDAD

Jade · MediumAquaMarine · Lake Green

HEX
#7DBDAD
RGB
rgb(125, 189, 173)
HSL
hsl(165, 33%, 62%)
HSB
hsb(165, 34%, 74%)
CMYK
cmyk(34%, 0%, 8%, 26%)
Oklch
oklch(75.0% 0.070 176.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF3624
24EDFF

Analogous

FF247F
FF3624
FFA424

Triadic

FF3624
24FF36
3624FF

Split-Comp.

FF3624
24FFA4
247FFF

Tetradic

FF3624
7FFF24
24EDFF
A424FF

Contrast Matrix WCAG 2.1 Contrast

FF3624
422826
BFB8A6
D4CBB8
7DBDAD
—
3.7
AA Large
1.8
Fail
2.2
Fail
1.7
Fail
3.7
AA Large
—
6.8
AA
8.3
AAA
6.2
AA
1.8
Fail
6.8
AA
—
1.2
Fail
1.1
Fail
2.2
Fail
8.3
AAA
1.2
Fail
—
1.3
Fail
1.7
Fail
6.2
AA
1.1
Fail
1.3
Fail
—
White BG
3.6AA Large
13.4AAA
2.0Fail
1.6Fail
2.2Fail
Black BG
5.8AA
1.6Fail
10.6AAA
13.0AAA
9.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A8A628
373726
BCBCAA
D0D0BD
9999B1

Deuteranopia

B4C329
383A27
BCBDAB
D1D1BE
9590B2

Tritanopia

F52C2D
412727
BFAEAF
D4C0C1
80B4B5

Achromatopsia

707070
303030
B8B8B8
CCCCCC
A8A8A8

Shades & Tints Shades & Tints

#FF3624

Dark
Light

#422826

Dark
Light

#BFB8A6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff3624;
  --color-2: #422826;
  --color-3: #bfb8a6;
  --color-4: #d4cbb8;
  --color-5: #7dbdad;
}

SCSS

$color-1: #ff3624;
$color-2: #422826;
$color-3: #bfb8a6;
$color-4: #d4cbb8;
$color-5: #7dbdad;

TAILWIND

colors: {
  'brand-1': '#ff3624',
  'brand-2': '#422826',
  'brand-3': '#bfb8a6',
  'brand-4': '#d4cbb8',
  'brand-5': '#7dbdad',
}

RGB Array

[255, 54, 36], [66, 40, 38], [191, 184, 166], [212, 203, 184], [125, 189, 173]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF3624, #422826, #BFB8A6, #D4CBB8, #7DBDAD 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: #ff3624; --color-2: #422826; --color-3: #bfb8a6; --color-4: #d4cbb8; --color-5: #7dbdad. 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