← Back to Editor

#D6254D · #EA7E71 · #F8ECBA · #8AB6A5 · #46A096

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 Library

Color Details Color Details

#D6254D

Vermilion · Crimson · Passion Red

HEX
#D6254D
RGB
rgb(214, 37, 77)
HSL
hsl(346, 71%, 49%)
HSB
hsb(346, 83%, 84%)
CMYK
cmyk(0%, 83%, 64%, 16%)
Oklch
oklch(57.1% 0.208 15.5)

TraditionalVermilion」· PaintPassion Red」· Creative Blush Sunrise

#EA7E71

Peach Pink · Salmon · Coral Red

HEX
#EA7E71
RGB
rgb(234, 126, 113)
HSL
hsl(6, 74%, 68%)
HSB
hsb(6, 52%, 92%)
CMYK
cmyk(0%, 46%, 52%, 8%)
Oklch
oklch(71.1% 0.135 28.1)

TraditionalPeach Pink」· PaintCoral Red」· Creative Blush Sunrise

#F8ECBA

Goose Yellow · Bisque · Lemon Cream

HEX
#F8ECBA
RGB
rgb(248, 236, 186)
HSL
hsl(48, 82%, 85%)
HSB
hsb(48, 25%, 97%)
CMYK
cmyk(0%, 5%, 25%, 3%)
Oklch
oklch(94.0% 0.066 96.1)

TraditionalGoose Yellow」· PaintLemon Cream」· Creative Lemon Fizz

#8AB6A5

Jade · DarkSeaGreen · Apple Green

HEX
#8AB6A5
RGB
rgb(138, 182, 165)
HSL
hsl(157, 23%, 63%)
HSB
hsb(157, 24%, 71%)
CMYK
cmyk(24%, 0%, 9%, 29%)
Oklch
oklch(74.0% 0.053 169.1)

TraditionalJade」· PaintApple Green」· Creative Arctic Pool

#46A096

Mineral Blue · CadetBlue · Mint Ice

HEX
#46A096
RGB
rgb(70, 160, 150)
HSL
hsl(173, 39%, 45%)
HSB
hsb(173, 56%, 63%)
CMYK
cmyk(56%, 0%, 6%, 37%)
Oklch
oklch(64.8% 0.087 185.5)

TraditionalMineral Blue」· PaintMint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D6254D
24D6AC

Analogous

D624A6
D6254D
D65424

Triadic

D6254D
4ED624
244ED6

Split-Comp.

D6254D
24D654
24A6D6

Tetradic

D6254D
A6D624
24D6AC
5424D6

Contrast Matrix WCAG 2.1 Contrast

D6254D
EA7E71
F8ECBA
8AB6A5
46A096
1.8
Fail
4.2
AA Large
2.2
Fail
1.6
Fail
1.8
Fail
2.3
Fail
1.2
Fail
1.1
Fail
4.2
AA Large
2.3
Fail
1.9
Fail
2.6
Fail
2.2
Fail
1.2
Fail
1.9
Fail
1.4
Fail
1.6
Fail
1.1
Fail
2.6
Fail
1.4
Fail
White BG
5.0AA
2.7Fail
1.2Fail
2.3Fail
3.1AA Large
Black BG
4.2AA Large
7.7AAA
17.7AAA
9.3AAA
6.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

898843
BBBA74
F3F3C6
9D9DA9
6D6E98

Deuteranopia

94A141
C2CA75
F4F4C9
9B97AA
686199

Tritanopia

CD3C3A
E57777
F7D0D2
8CACAD
4B9A9B

Achromatopsia

5E5E5E
9D9D9D
EAEAEA
A7A7A7
848484

Shades & Tints Shades & Tints

#D6254D

Dark
Light

#EA7E71

Dark
Light

#F8ECBA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d6254d;
  --color-2: #ea7e71;
  --color-3: #f8ecba;
  --color-4: #8ab6a5;
  --color-5: #46a096;
}

SCSS

$color-1: #d6254d;
$color-2: #ea7e71;
$color-3: #f8ecba;
$color-4: #8ab6a5;
$color-5: #46a096;

TAILWIND

colors: {
  'brand-1': '#d6254d',
  'brand-2': '#ea7e71',
  'brand-3': '#f8ecba',
  'brand-4': '#8ab6a5',
  'brand-5': '#46a096',
}

RGB Array

[214, 37, 77], [234, 126, 113], [248, 236, 186], [138, 182, 165], [70, 160, 150]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D6254D, #EA7E71, #F8ECBA, #8AB6A5, #46A096 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: #d6254d; --color-2: #ea7e71; --color-3: #f8ecba; --color-4: #8ab6a5; --color-5: #46a096. 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