← Back to Editor

#8C2F35 · #83534C · #609068 · #64AB75 · #85BEA1

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#8C2F35

Crimson · Brown · Wine Red

HEX
#8C2F35
RGB
rgb(140, 47, 53)
HSL
hsl(356, 50%, 37%)
HSB
hsb(356, 66%, 55%)
CMYK
cmyk(0%, 66%, 62%, 45%)
Oklch
oklch(44.4% 0.126 20.2)

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

#83534C

Crimson · Sienna · Passion Red

HEX
#83534C
RGB
rgb(131, 83, 76)
HSL
hsl(8, 27%, 41%)
HSB
hsb(8, 42%, 51%)
CMYK
cmyk(0%, 37%, 42%, 49%)
Oklch
oklch(49.4% 0.066 28.7)

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

#609068

Celadon · DimGray · Olive Green

HEX
#609068
RGB
rgb(96, 144, 104)
HSL
hsl(130, 20%, 47%)
HSB
hsb(130, 33%, 56%)
CMYK
cmyk(33%, 0%, 28%, 44%)
Oklch
oklch(60.8% 0.080 148.8)

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

#64AB75

Celadon · MediumSeaGreen · Olive Green

HEX
#64AB75
RGB
rgb(100, 171, 117)
HSL
hsl(134, 30%, 53%)
HSB
hsb(134, 42%, 67%)
CMYK
cmyk(42%, 0%, 32%, 33%)
Oklch
oklch(68.0% 0.107 150.4)

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

#85BEA1

Celadon · DarkSeaGreen · Apple Green

HEX
#85BEA1
RGB
rgb(133, 190, 161)
HSL
hsl(149, 30%, 63%)
HSB
hsb(149, 30%, 75%)
CMYK
cmyk(30%, 0%, 15%, 25%)
Oklch
oklch(75.4% 0.073 161.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8C2F35
2F8E87

Analogous

8E2F65
8C2F35
8E582F

Triadic

8C2F35
358E2F
2F358E

Split-Comp.

8C2F35
2F8E58
2F658E

Tetradic

8C2F35
658E2F
2F8E87
582F8E

Contrast Matrix WCAG 2.1 Contrast

8C2F35
83534C
609068
64AB75
85BEA1
—
1.3
Fail
2.2
Fail
3.0
Fail
3.8
AA Large
1.3
Fail
—
1.7
Fail
2.3
Fail
3.0
Fail
2.2
Fail
1.7
Fail
—
1.3
Fail
1.7
Fail
3.0
Fail
2.3
Fail
1.3
Fail
—
1.3
Fail
3.8
AA Large
3.0
Fail
1.7
Fail
1.3
Fail
—
White BG
8.2AAA
6.4AA
3.7AA Large
2.8Fail
2.1Fail
Black BG
2.6Fail
3.3AA Large
5.7AA
7.6AAA
9.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

646334
6E6E4E
757572
838382
9E9EA8

Deuteranopia

697033
71754E
726E74
7F7985
9A96AA

Tritanopia

873232
814F4F
62797B
688C8F
88AEAF

Achromatopsia

4B4B4B
616161
7D7D7D
909090
AAAAAA

Shades & Tints Shades & Tints

#8C2F35

Dark
Light

#83534C

Dark
Light

#609068

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8c2f35;
  --color-2: #83534c;
  --color-3: #609068;
  --color-4: #64ab75;
  --color-5: #85bea1;
}

SCSS

$color-1: #8c2f35;
$color-2: #83534c;
$color-3: #609068;
$color-4: #64ab75;
$color-5: #85bea1;

TAILWIND

colors: {
  'brand-1': '#8c2f35',
  'brand-2': '#83534c',
  'brand-3': '#609068',
  'brand-4': '#64ab75',
  'brand-5': '#85bea1',
}

RGB Array

[140, 47, 53], [131, 83, 76], [96, 144, 104], [100, 171, 117], [133, 190, 161]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8C2F35, #83534C, #609068, #64AB75, #85BEA1 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: #8c2f35; --color-2: #83534c; --color-3: #609068; --color-4: #64ab75; --color-5: #85bea1. 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