← Back to Editor

#77CFAB · #96B38A · #B27A6E · #C75268 · #8D454E

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

#77CFAB

Jade · MediumAquaMarine · Apple Green

HEX
#77CFAB
RGB
rgb(119, 207, 171)
HSL
hsl(155, 48%, 64%)
HSB
hsb(155, 43%, 81%)
CMYK
cmyk(43%, 0%, 17%, 19%)
Oklch
oklch(78.9% 0.101 165.7)

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

#96B38A

Celadon · DarkSeaGreen · Apple Green

HEX
#96B38A
RGB
rgb(150, 179, 138)
HSL
hsl(102, 21%, 62%)
HSB
hsb(102, 23%, 70%)
CMYK
cmyk(16%, 0%, 23%, 30%)
Oklch
oklch(73.4% 0.066 136.6)

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

#B27A6E

Crimson · Gray · Passion Red

HEX
#B27A6E
RGB
rgb(178, 122, 110)
HSL
hsl(11, 31%, 56%)
HSB
hsb(11, 38%, 70%)
CMYK
cmyk(0%, 31%, 38%, 30%)
Oklch
oklch(63.4% 0.073 32.5)

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

#C75268

Crimson · LightCoral · Passion Red

HEX
#C75268
RGB
rgb(199, 82, 104)
HSL
hsl(349, 51%, 55%)
HSB
hsb(349, 59%, 78%)
CMYK
cmyk(0%, 59%, 48%, 22%)
Oklch
oklch(59.6% 0.150 11.3)

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

#8D454E

Crimson · Sienna · Passion Red

HEX
#8D454E
RGB
rgb(141, 69, 78)
HSL
hsl(353, 34%, 41%)
HSB
hsb(353, 51%, 55%)
CMYK
cmyk(0%, 51%, 45%, 45%)
Oklch
oklch(48.3% 0.098 13.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

77CFAB
CF779C

Analogous

77CF7E
77CFAB
77C8CF

Triadic

77CFAB
AB77CF
CFAB77

Split-Comp.

77CFAB
CF77C8
CF7E77

Tetradic

77CFAB
7E77CF
CF779C
C8CF77

Contrast Matrix WCAG 2.1 Contrast

77CFAB
96B38A
B27A6E
C75268
8D454E
—
1.2
Fail
1.9
Fail
2.3
Fail
3.7
AA Large
1.2
Fail
—
1.5
Fail
1.9
Fail
2.9
Fail
1.9
Fail
1.5
Fail
—
1.2
Fail
1.9
Fail
2.3
Fail
1.9
Fail
1.2
Fail
—
1.6
Fail
3.7
AA Large
2.9
Fail
1.9
Fail
1.6
Fail
—
White BG
1.9Fail
2.3Fail
3.6AA Large
4.3AA Large
6.8AA
Black BG
11.3AAA
9.1AAA
5.9AA
4.8AA
3.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

9D9EB4
A3A394
9A9971
949363
6E6D4C

Deuteranopia

9891B6
A19F96
9DA172
9BA461
72774B

Tritanopia

7BBBBC
979C9D
AF7374
C15E5E
894A4A

Achromatopsia

B1B1B1
A6A6A6
898989
777777
5C5C5C

Shades & Tints Shades & Tints

#77CFAB

Dark
Light

#96B38A

Dark
Light

#B27A6E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #77cfab;
  --color-2: #96b38a;
  --color-3: #b27a6e;
  --color-4: #c75268;
  --color-5: #8d454e;
}

SCSS

$color-1: #77cfab;
$color-2: #96b38a;
$color-3: #b27a6e;
$color-4: #c75268;
$color-5: #8d454e;

TAILWIND

colors: {
  'brand-1': '#77cfab',
  'brand-2': '#96b38a',
  'brand-3': '#b27a6e',
  'brand-4': '#c75268',
  'brand-5': '#8d454e',
}

RGB Array

[119, 207, 171], [150, 179, 138], [178, 122, 110], [199, 82, 104], [141, 69, 78]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #77CFAB, #96B38A, #B27A6E, #C75268, #8D454E 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: #77cfab; --color-2: #96b38a; --color-3: #b27a6e; --color-4: #c75268; --color-5: #8d454e. 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