← Back to Editor

#81B7A7 · #B7C288 · #CFBB5A · #FA564A · #92595E

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

#81B7A7

Jade · DarkSeaGreen · Lake Green

HEX
#81B7A7
RGB
rgb(129, 183, 167)
HSL
hsl(162, 27%, 61%)
HSB
hsb(162, 30%, 72%)
CMYK
cmyk(30%, 0%, 9%, 28%)
Oklch
oklch(73.7% 0.061 174.2)

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

#B7C288

Willow Green · Tan · Apple Green

HEX
#B7C288
RGB
rgb(183, 194, 136)
HSL
hsl(71, 32%, 65%)
HSB
hsb(71, 30%, 76%)
CMYK
cmyk(6%, 0%, 30%, 24%)
Oklch
oklch(79.1% 0.079 117.0)

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

#CFBB5A

Autumn Sage · SandyBrown · Sunflower

HEX
#CFBB5A
RGB
rgb(207, 187, 90)
HSL
hsl(50, 55%, 58%)
HSB
hsb(50, 57%, 81%)
CMYK
cmyk(0%, 10%, 57%, 19%)
Oklch
oklch(79.0% 0.120 97.8)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#FA564A

Peach Pink · Tomato · Coral Red

HEX
#FA564A
RGB
rgb(250, 86, 74)
HSL
hsl(4, 95%, 64%)
HSB
hsb(4, 70%, 98%)
CMYK
cmyk(0%, 66%, 70%, 2%)
Oklch
oklch(67.4% 0.202 27.9)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#92595E

Crimson · DimGray · Passion Red

HEX
#92595E
RGB
rgb(146, 89, 94)
HSL
hsl(355, 24%, 46%)
HSB
hsb(355, 39%, 57%)
CMYK
cmyk(0%, 39%, 36%, 43%)
Oklch
oklch(52.9% 0.076 14.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

81B7A7
B68191

Analogous

81B68B
81B7A7
81ACB6

Triadic

81B7A7
A681B6
B6A681

Split-Comp.

81B7A7
B681AC
B68B81

Tetradic

81B7A7
8B81B6
B68191
ACB681

Contrast Matrix WCAG 2.1 Contrast

81B7A7
B7C288
CFBB5A
FA564A
92595E
—
1.2
Fail
1.2
Fail
1.4
Fail
2.4
Fail
1.2
Fail
—
1.0
Fail
1.7
Fail
2.9
Fail
1.2
Fail
1.0
Fail
—
1.7
Fail
2.9
Fail
1.4
Fail
1.7
Fail
1.7
Fail
—
1.7
Fail
2.4
Fail
2.9
Fail
2.9
Fail
1.7
Fail
—
White BG
2.3Fail
1.9Fail
1.9Fail
3.2AA Large
5.5AA
Black BG
9.3AAA
11.1AAA
10.9AAA
6.5AA
3.8AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

9899AB
BCBC96
C6C671
B3B24D
79795D

Deuteranopia

9591AC
BBBA99
C8C977
BDC94E
7D815D

Tritanopia

84AEAF
B8A1A4
CE8488
F24F50
8F5C5C

Achromatopsia

A5A5A5
B8B8B8
B6B6B6
868686
6B6B6B

Shades & Tints Shades & Tints

#81B7A7

Dark
Light

#B7C288

Dark
Light

#CFBB5A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #81b7a7;
  --color-2: #b7c288;
  --color-3: #cfbb5a;
  --color-4: #fa564a;
  --color-5: #92595e;
}

SCSS

$color-1: #81b7a7;
$color-2: #b7c288;
$color-3: #cfbb5a;
$color-4: #fa564a;
$color-5: #92595e;

TAILWIND

colors: {
  'brand-1': '#81b7a7',
  'brand-2': '#b7c288',
  'brand-3': '#cfbb5a',
  'brand-4': '#fa564a',
  'brand-5': '#92595e',
}

RGB Array

[129, 183, 167], [183, 194, 136], [207, 187, 90], [250, 86, 74], [146, 89, 94]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #81B7A7, #B7C288, #CFBB5A, #FA564A, #92595E 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: #81b7a7; --color-2: #b7c288; --color-3: #cfbb5a; --color-4: #fa564a; --color-5: #92595e. 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