← Back to Editor

#83C4C0 · #C1BF84 · #F97B52 · #EB443E · #645979

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

#83C4C0

Jade · MediumAquaMarine · Lake Green

HEX
#83C4C0
RGB
rgb(131, 196, 192)
HSL
hsl(176, 36%, 64%)
HSB
hsb(176, 33%, 77%)
CMYK
cmyk(33%, 0%, 2%, 23%)
Oklch
oklch(77.6% 0.066 191.0)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#C1BF84

Fresh Green · Tan · Sunflower

HEX
#C1BF84
RGB
rgb(193, 191, 132)
HSL
hsl(58, 33%, 64%)
HSB
hsb(58, 32%, 76%)
CMYK
cmyk(0%, 1%, 32%, 24%)
Oklch
oklch(79.2% 0.078 106.4)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#F97B52

Apricot · Coral · Warm Sun

HEX
#F97B52
RGB
rgb(249, 123, 82)
HSL
hsl(15, 93%, 65%)
HSB
hsb(15, 67%, 98%)
CMYK
cmyk(0%, 51%, 67%, 2%)
Oklch
oklch(72.1% 0.164 38.5)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#EB443E

Vermilion · Tomato · Passion Red

HEX
#EB443E
RGB
rgb(235, 68, 62)
HSL
hsl(2, 81%, 58%)
HSB
hsb(2, 74%, 92%)
CMYK
cmyk(0%, 71%, 74%, 8%)
Oklch
oklch(62.9% 0.205 27.0)

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

#645979

Deep Indigo · DimGray · Violet

HEX
#645979
RGB
rgb(100, 89, 121)
HSL
hsl(261, 15%, 41%)
HSB
hsb(261, 26%, 47%)
CMYK
cmyk(17%, 26%, 0%, 53%)
Oklch
oklch(48.7% 0.052 300.2)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

83C4C0
C48287

Analogous

82C49F
83C4C0
82A8C4

Triadic

83C4C0
C082C4
C4C082

Split-Comp.

83C4C0
C482A8
C49F82

Tetradic

83C4C0
9F82C4
C48287
A8C482

Contrast Matrix WCAG 2.1 Contrast

83C4C0
C1BF84
F97B52
EB443E
645979
—
1.0
Fail
1.3
Fail
2.0
Fail
3.3
AA Large
1.0
Fail
—
1.4
Fail
2.0
Fail
3.4
AA Large
1.3
Fail
1.4
Fail
—
1.5
Fail
2.5
Fail
2.0
Fail
2.0
Fail
1.5
Fail
—
1.7
Fail
3.3
AA Large
3.4
AA Large
2.5
Fail
1.7
Fail
—
White BG
2.0Fail
1.9Fail
2.6Fail
3.9AA Large
6.5AA
Black BG
10.6AAA
11.1AAA
8.0AAA
5.4AA
3.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

9FA0C1
C0C092
C2C15C
A3A13F
5F5F71

Deuteranopia

9B97C1
C0C096
CAD35E
ACB940
60616F

Tritanopia

86C2C2
C19EA0
F36465
E34141
636B6A

Achromatopsia

B0B0B0
B9B9B9
9C9C9C
757575
606060

Shades & Tints Shades & Tints

#83C4C0

Dark
Light

#C1BF84

Dark
Light

#F97B52

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #83c4c0;
  --color-2: #c1bf84;
  --color-3: #f97b52;
  --color-4: #eb443e;
  --color-5: #645979;
}

SCSS

$color-1: #83c4c0;
$color-2: #c1bf84;
$color-3: #f97b52;
$color-4: #eb443e;
$color-5: #645979;

TAILWIND

colors: {
  'brand-1': '#83c4c0',
  'brand-2': '#c1bf84',
  'brand-3': '#f97b52',
  'brand-4': '#eb443e',
  'brand-5': '#645979',
}

RGB Array

[131, 196, 192], [193, 191, 132], [249, 123, 82], [235, 68, 62], [100, 89, 121]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #83C4C0, #C1BF84, #F97B52, #EB443E, #645979 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: #83c4c0; --color-2: #c1bf84; --color-3: #f97b52; --color-4: #eb443e; --color-5: #645979. 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