← Back to Editor

#E6262E · #8FCCC2 · #D7DACC · #244D49

A 4-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

#E6262E

Vermilion · Crimson · Passion Red

HEX
#E6262E
RGB
rgb(230, 38, 46)
HSL
hsl(357, 79%, 53%)
HSB
hsb(357, 83%, 90%)
CMYK
cmyk(0%, 83%, 80%, 10%)
Oklch
oklch(59.6% 0.223 25.9)

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

#8FCCC2

Jade · SkyBlue · Lake Green

HEX
#8FCCC2
RGB
rgb(143, 204, 194)
HSL
hsl(170, 37%, 68%)
HSB
hsb(170, 30%, 80%)
CMYK
cmyk(30%, 0%, 5%, 20%)
Oklch
oklch(80.1% 0.064 183.4)

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

#D7DACC

Willow Green · LightGray · Mint Green

HEX
#D7DACC
RGB
rgb(215, 218, 204)
HSL
hsl(73, 16%, 83%)
HSB
hsb(73, 6%, 85%)
CMYK
cmyk(1%, 0%, 6%, 15%)
Oklch
oklch(88.2% 0.019 116.6)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

#244D49

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#244D49
RGB
rgb(36, 77, 73)
HSL
hsl(174, 36%, 22%)
HSB
hsb(174, 53%, 30%)
CMYK
cmyk(53%, 0%, 5%, 70%)
Oklch
oklch(38.9% 0.047 187.1)

Traditional「Mineral Blue」· Paint「Peacock Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E6262E
28E6DC

Analogous

E62891
E6262E
E67E28

Triadic

E6262E
32E628
2832E6

Split-Comp.

E6262E
28E67E
2891E6

Tetradic

E6262E
91E628
28E6DC
7E28E6

Contrast Matrix WCAG 2.1 Contrast

E6262E
8FCCC2
D7DACC
244D49
—
2.5
Fail
3.2
AA Large
2.1
Fail
2.5
Fail
—
1.3
Fail
5.2
AA
3.2
AA Large
1.3
Fail
—
6.6
AA
2.1
Fail
5.2
AA
6.6
AA
—
White BG
4.5AA Large
1.8Fail
1.4Fail
9.4AAA
Black BG
4.7AA
11.6AAA
14.8AAA
2.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

93912C
A9AAC4
D8D8CF
36364A

Deuteranopia

9EAC2C
A6A1C5
D8D8D0
33304A

Tritanopia

DC2B2A
92C6C7
D7D2D3
264B4B

Achromatopsia

606060
B9B9B9
D8D8D8
404040

Shades & Tints Shades & Tints

#E6262E

Dark
Light

#8FCCC2

Dark
Light

#D7DACC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e6262e;
  --color-2: #8fccc2;
  --color-3: #d7dacc;
  --color-4: #244d49;
}

SCSS

$color-1: #e6262e;
$color-2: #8fccc2;
$color-3: #d7dacc;
$color-4: #244d49;

TAILWIND

colors: {
  'brand-1': '#e6262e',
  'brand-2': '#8fccc2',
  'brand-3': '#d7dacc',
  'brand-4': '#244d49',
}

RGB Array

[230, 38, 46], [143, 204, 194], [215, 218, 204], [36, 77, 73]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This general-style palette of #E6262E, #8FCCC2, #D7DACC, #244D49 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 4-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #e6262e; --color-2: #8fccc2; --color-3: #d7dacc; --color-4: #244d49. 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 4-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