← Back to Editor

#FA2F42 · #88293F · #43201E · #B7B084 · #67836A

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 LibraryData Visualization

Color Details Color Details

#FA2F42

Vermilion · Crimson · Passion Red

HEX
#FA2F42
RGB
rgb(250, 47, 66)
HSL
hsl(354, 95%, 58%)
HSB
hsb(354, 81%, 98%)
CMYK
cmyk(0%, 81%, 74%, 2%)
Oklch
oklch(63.9% 0.234 23.0)

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

#88293F

Crimson · Brown · Wine Red

HEX
#88293F
RGB
rgb(136, 41, 63)
HSL
hsl(346, 54%, 35%)
HSB
hsb(346, 70%, 53%)
CMYK
cmyk(0%, 70%, 54%, 47%)
Oklch
oklch(43.2% 0.129 10.6)

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

#43201E

Crimson · DarkSlateGray · Deep Berry

HEX
#43201E
RGB
rgb(67, 32, 30)
HSL
hsl(3, 38%, 19%)
HSB
hsb(3, 55%, 26%)
CMYK
cmyk(0%, 52%, 55%, 74%)
Oklch
oklch(29.2% 0.054 24.4)

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

#B7B084

Fresh Green · Tan · Sunflower

HEX
#B7B084
RGB
rgb(183, 176, 132)
HSL
hsl(52, 26%, 62%)
HSB
hsb(52, 28%, 72%)
CMYK
cmyk(0%, 4%, 28%, 28%)
Oklch
oklch(75.2% 0.060 100.1)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#67836A

Celadon · DimGray · Olive Green

HEX
#67836A
RGB
rgb(103, 131, 106)
HSL
hsl(126, 12%, 46%)
HSB
hsb(126, 21%, 51%)
CMYK
cmyk(21%, 0%, 19%, 49%)
Oklch
oklch(58.1% 0.050 147.8)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FA2F42
2EFAE5

Analogous

FA2EA8
FA2F42
FA802E

Triadic

FA2F42
43FA2E
2E43FA

Split-Comp.

FA2F42
2EFA80
2EA8FA

Tetradic

FA2F42
A8FA2E
2EFAE5
802EFA

Contrast Matrix WCAG 2.1 Contrast

FA2F42
88293F
43201E
B7B084
67836A
—
2.3
Fail
3.8
AA Large
1.7
Fail
1.1
Fail
2.3
Fail
—
1.7
Fail
3.9
AA Large
2.1
Fail
3.8
AA Large
1.7
Fail
—
6.5
AA
3.4
AA Large
1.7
Fail
3.9
AA Large
6.5
AA
—
1.9
Fail
1.1
Fail
2.1
Fail
3.4
AA Large
1.9
Fail
—
White BG
3.8AA Large
8.6AAA
14.3AAA
2.2Fail
4.2AA Large
Black BG
5.6AA
2.4Fail
1.5Fail
9.6AAA
5.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A2A03D
5F5E3A
34341E
B4B48F
737370

Deuteranopia

AEBD3C
646B38
36391F
B4B591
726F71

Tritanopia

F03A39
833535
411F1F
B79799
687576

Achromatopsia

6E6E6E
484848
2A2A2A
ADADAD
787878

Shades & Tints Shades & Tints

#FA2F42

Dark
Light

#88293F

Dark
Light

#43201E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fa2f42;
  --color-2: #88293f;
  --color-3: #43201e;
  --color-4: #b7b084;
  --color-5: #67836a;
}

SCSS

$color-1: #fa2f42;
$color-2: #88293f;
$color-3: #43201e;
$color-4: #b7b084;
$color-5: #67836a;

TAILWIND

colors: {
  'brand-1': '#fa2f42',
  'brand-2': '#88293f',
  'brand-3': '#43201e',
  'brand-4': '#b7b084',
  'brand-5': '#67836a',
}

RGB Array

[250, 47, 66], [136, 41, 63], [67, 32, 30], [183, 176, 132], [103, 131, 106]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FA2F42, #88293F, #43201E, #B7B084, #67836A 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: #fa2f42; --color-2: #88293f; --color-3: #43201e; --color-4: #b7b084; --color-5: #67836a. 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