#DC244A + #B86B57 + #68B08A + #B7D47A + #F9E491 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#DC244A

Vermilion · Crimson · Passion Red

HEX

#DC244A

RGB

rgb(220, 36, 74)

HSL

hsl(348, 72%, 50%)

HSB

hsb(348, 84%, 86%)

CMYK

cmyk(0%, 84%, 66%, 14%)

Oklch

oklch(58.1% 0.214 17.1)

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

#B86B57

Crimson · Sienna · Passion Red

HEX

#B86B57

RGB

rgb(184, 107, 87)

HSL

hsl(12, 41%, 53%)

HSB

hsb(12, 53%, 72%)

CMYK

cmyk(0%, 42%, 53%, 28%)

Oklch

oklch(60.9% 0.103 35.4)

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

#68B08A

Celadon · CadetBlue · Olive Green

HEX

#68B08A

RGB

rgb(104, 176, 138)

HSL

hsl(148, 31%, 55%)

HSB

hsb(148, 41%, 69%)

CMYK

cmyk(41%, 0%, 22%, 31%)

Oklch

oklch(69.9% 0.092 159.7)

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

#B7D47A

Willow Green · Tan · Apple Green

HEX

#B7D47A

RGB

rgb(183, 212, 122)

HSL

hsl(79, 51%, 65%)

HSB

hsb(79, 42%, 83%)

CMYK

cmyk(14%, 0%, 42%, 17%)

Oklch

oklch(82.8% 0.120 123.6)

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

#F9E491

Goose Yellow · Khaki · Lemon Cream

HEX

#F9E491

RGB

rgb(249, 228, 145)

HSL

hsl(48, 90%, 77%)

HSB

hsb(48, 42%, 98%)

CMYK

cmyk(0%, 8%, 42%, 2%)

Oklch

oklch(91.8% 0.105 95.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DC244A

24DBB7

Analogous

DB24A4

DC244A

DB5B24

Triadic

DC244A

48DB24

2448DB

Split-Comp.

DC244A

24DB5B

24A4DB

Tetradic

DC244A

A4DB24

24DBB7

5B24DB

Contrast Matrix WCAG 2.1 Contrast

DC244A	B86B57	68B08A	B7D47A	F9E491
—	1.2 Fail	1.9 Fail	2.9 Fail	3.8 AA Large
1.2 Fail	—	1.5 Fail	2.4 Fail	3.1 AA Large
1.9 Fail	1.5 Fail	—	1.6 Fail	2.0 Fail
2.9 Fail	2.4 Fail	1.6 Fail	—	1.3 Fail
3.8 AA Large	3.1 AA Large	2.0 Fail	1.3 Fail	—

White BG

4.8AA

4.0AA Large

2.6Fail

1.7Fail

1.3Fail

Black BG

4.4AA Large

5.3AA

8.2AAA

12.7AAA

16.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8C8B41

97965C

878893

C4C490

F0F0A5

Deuteranopia

97A53F

9BA15D

837E95

C2C095

F1F3AA

Tritanopia

D33A38

B46061

6C9A9C

B8A1A5

F8B5B8

Achromatopsia

5F5F5F

808080

969696

C1C1C1

E1E1E1

Shades & Tints Shades & Tints

#DC244A

Dark

Light

#B86B57

Dark

Light

#68B08A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dc244a;
  --color-2: #b86b57;
  --color-3: #68b08a;
  --color-4: #b7d47a;
  --color-5: #f9e491;
}

SCSS

$color-1: #dc244a;
$color-2: #b86b57;
$color-3: #68b08a;
$color-4: #b7d47a;
$color-5: #f9e491;

TAILWIND

colors: {
  'brand-1': '#dc244a',
  'brand-2': '#b86b57',
  'brand-3': '#68b08a',
  'brand-4': '#b7d47a',
  'brand-5': '#f9e491',
}

RGB Array

[220, 36, 74], [184, 107, 87], [104, 176, 138], [183, 212, 122], [249, 228, 145]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DC244A, #B86B57, #68B08A, #B7D47A, #F9E491 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: #dc244a; --color-2: #b86b57; --color-3: #68b08a; --color-4: #b7d47a; --color-5: #f9e491. 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