← Back to Editor

#C14160 · #7CA496 · #A2B450 · #54786C · #88736A

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

#C14160

Crimson · MediumVioletRed · Passion Red

HEX
#C14160
RGB
rgb(193, 65, 96)
HSL
hsl(345, 51%, 51%)
HSB
hsb(345, 66%, 76%)
CMYK
cmyk(0%, 66%, 50%, 24%)
Oklch
oklch(56.3% 0.164 9.5)

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

#7CA496

Mineral Blue · LightSlateGray · Olive Green

HEX
#7CA496
RGB
rgb(124, 164, 150)
HSL
hsl(159, 18%, 56%)
HSB
hsb(159, 24%, 64%)
CMYK
cmyk(24%, 0%, 9%, 36%)
Oklch
oklch(68.5% 0.048 171.3)

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

#A2B450

Grass Green · DarkSeaGreen · Olive Green

HEX
#A2B450
RGB
rgb(162, 180, 80)
HSL
hsl(71, 40%, 51%)
HSB
hsb(71, 56%, 71%)
CMYK
cmyk(10%, 0%, 56%, 29%)
Oklch
oklch(73.5% 0.127 118.2)

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

#54786C

Mineral Blue · DimGray · Mint Ice

HEX
#54786C
RGB
rgb(84, 120, 108)
HSL
hsl(160, 18%, 40%)
HSB
hsb(160, 30%, 47%)
CMYK
cmyk(30%, 0%, 10%, 53%)
Oklch
oklch(54.2% 0.045 171.9)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#88736A

Tangerine · Gray · Amber Brown

HEX
#88736A
RGB
rgb(136, 115, 106)
HSL
hsl(18, 12%, 47%)
HSB
hsb(18, 22%, 53%)
CMYK
cmyk(0%, 15%, 22%, 47%)
Oklch
oklch(57.3% 0.030 44.5)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C14160
42C2A2

Analogous

C242A2
C14160
C26242

Triadic

C14160
62C242
4262C2

Split-Comp.

C14160
42C262
42A2C2

Tetradic

C14160
A2C242
42C2A2
6242C2

Contrast Matrix WCAG 2.1 Contrast

C14160
7CA496
A2B450
54786C
88736A
—
1.8
Fail
2.2
Fail
1.0
Fail
1.1
Fail
1.8
Fail
—
1.2
Fail
1.8
Fail
1.6
Fail
2.2
Fail
1.2
Fail
—
2.1
Fail
2.0
Fail
1.0
Fail
1.8
Fail
2.1
Fail
—
1.1
Fail
1.1
Fail
1.6
Fail
2.0
Fail
1.1
Fail
—
White BG
5.0AA
2.8Fail
2.3Fail
4.9AA
4.5AA Large
Black BG
4.2AA Large
7.6AAA
9.2AAA
4.3AA Large
4.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8A8858
8D8E99
AAAA68
64646F
7F7F6C

Deuteranopia

919B57
8B889A
A9A76E
625F70
80826D

Tritanopia

BB5351
7E9C9D
A37B80
567172
876E6E

Achromatopsia

6B6B6B
969696
A3A3A3
6C6C6C
787878

Shades & Tints Shades & Tints

#C14160

Dark
Light

#7CA496

Dark
Light

#A2B450

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c14160;
  --color-2: #7ca496;
  --color-3: #a2b450;
  --color-4: #54786c;
  --color-5: #88736a;
}

SCSS

$color-1: #c14160;
$color-2: #7ca496;
$color-3: #a2b450;
$color-4: #54786c;
$color-5: #88736a;

TAILWIND

colors: {
  'brand-1': '#c14160',
  'brand-2': '#7ca496',
  'brand-3': '#a2b450',
  'brand-4': '#54786c',
  'brand-5': '#88736a',
}

RGB Array

[193, 65, 96], [124, 164, 150], [162, 180, 80], [84, 120, 108], [136, 115, 106]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C14160, #7CA496, #A2B450, #54786C, #88736A is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #c14160; --color-2: #7ca496; --color-3: #a2b450; --color-4: #54786c; --color-5: #88736a. 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. Restrained colors convey professionalism and trust. 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