← Back to Editor

#C72546 · #B3C262 · #9B996C · #4E8D72 · #027B7F

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

#C72546

Vermilion · Crimson · Passion Red

HEX
#C72546
RGB
rgb(199, 37, 70)
HSL
hsl(348, 69%, 46%)
HSB
hsb(348, 81%, 78%)
CMYK
cmyk(0%, 81%, 65%, 22%)
Oklch
oklch(54.3% 0.195 16.4)

TraditionalVermilion」· PaintPassion Red」· Creative Blush Sunrise

#B3C262

Autumn Sage · Tan · Sunflower

HEX
#B3C262
RGB
rgb(179, 194, 98)
HSL
hsl(69, 44%, 57%)
HSB
hsb(69, 49%, 76%)
CMYK
cmyk(8%, 0%, 49%, 24%)
Oklch
oklch(78.2% 0.123 116.7)

TraditionalAutumn Sage」· PaintSunflower」· Creative Blush Sunrise

#9B996C

Autumn Sage · Gray · Sunflower

HEX
#9B996C
RGB
rgb(155, 153, 108)
HSL
hsl(57, 19%, 52%)
HSB
hsb(57, 30%, 61%)
CMYK
cmyk(0%, 1%, 30%, 39%)
Oklch
oklch(67.3% 0.062 105.8)

TraditionalAutumn Sage」· PaintSunflower」· Creative Blush Sunrise

#4E8D72

Mineral Blue · SeaGreen · Olive Green

HEX
#4E8D72
RGB
rgb(78, 141, 114)
HSL
hsl(154, 29%, 43%)
HSB
hsb(154, 45%, 55%)
CMYK
cmyk(45%, 0%, 19%, 45%)
Oklch
oklch(59.3% 0.078 164.4)

TraditionalMineral Blue」· PaintOlive Green」· Creative Blush Sunrise

#027B7F

Lake Blue · Teal · Peacock Green

HEX
#027B7F
RGB
rgb(2, 123, 127)
HSL
hsl(182, 97%, 25%)
HSB
hsb(182, 98%, 50%)
CMYK
cmyk(98%, 3%, 0%, 50%)
Oklch
oklch(53.0% 0.090 198.8)

TraditionalLake Blue」· PaintPeacock Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C72546
24C6A6

Analogous

C62496
C72546
C65524

Triadic

C72546
45C624
2445C6

Split-Comp.

C72546
24C655
2496C6

Tetradic

C72546
96C624
24C6A6
5524C6

Contrast Matrix WCAG 2.1 Contrast

C72546
B3C262
9B996C
4E8D72
027B7F
2.9
Fail
1.9
Fail
1.4
Fail
1.1
Fail
2.9
Fail
1.5
Fail
2.0
Fail
2.6
Fail
1.9
Fail
1.5
Fail
1.3
Fail
1.7
Fail
1.4
Fail
2.0
Fail
1.3
Fail
1.3
Fail
1.1
Fail
2.6
Fail
1.7
Fail
1.3
Fail
White BG
5.6AA
1.9Fail
2.9Fail
3.9AA Large
5.1AA
Black BG
3.8AA Large
10.8AAA
7.2AAA
5.4AA
4.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

817F3E
B9BA79
9A9A77
696A79
36377E

Deuteranopia

8A963C
B9B87F
9A9A7A
66617A
2F267E

Tritanopia

BF3836
B48C90
9B7F81
517E7F
087D7D

Achromatopsia

595959
B3B3B3
949494
777777
575757

Shades & Tints Shades & Tints

#C72546

Dark
Light

#B3C262

Dark
Light

#9B996C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c72546;
  --color-2: #b3c262;
  --color-3: #9b996c;
  --color-4: #4e8d72;
  --color-5: #027b7f;
}

SCSS

$color-1: #c72546;
$color-2: #b3c262;
$color-3: #9b996c;
$color-4: #4e8d72;
$color-5: #027b7f;

TAILWIND

colors: {
  'brand-1': '#c72546',
  'brand-2': '#b3c262',
  'brand-3': '#9b996c',
  'brand-4': '#4e8d72',
  'brand-5': '#027b7f',
}

RGB Array

[199, 37, 70], [179, 194, 98], [155, 153, 108], [78, 141, 114], [2, 123, 127]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C72546, #B3C262, #9B996C, #4E8D72, #027B7F 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: #c72546; --color-2: #b3c262; --color-3: #9b996c; --color-4: #4e8d72; --color-5: #027b7f. 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