#B4E5CF + #83C6B4 + #9D725F + #9E5157 + #B63150 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B4E5CF

Jade · LightBlue · Apple Green

HEX

#B4E5CF

RGB

rgb(180, 229, 207)

HSL

hsl(153, 49%, 80%)

HSB

hsb(153, 21%, 90%)

CMYK

cmyk(21%, 0%, 10%, 10%)

Oklch

oklch(88.2% 0.059 165.9)

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

#83C6B4

Jade · MediumAquaMarine · Lake Green

HEX

#83C6B4

RGB

rgb(131, 198, 180)

HSL

hsl(164, 37%, 65%)

HSB

hsb(164, 34%, 78%)

CMYK

cmyk(34%, 0%, 9%, 22%)

Oklch

oklch(77.6% 0.073 175.5)

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

#9D725F

Tangerine · Gray · Amber Brown

HEX

#9D725F

RGB

rgb(157, 114, 95)

HSL

hsl(18, 25%, 49%)

HSB

hsb(18, 39%, 62%)

CMYK

cmyk(0%, 27%, 39%, 38%)

Oklch

oklch(59.1% 0.062 44.8)

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

#9E5157

Crimson · Sienna · Passion Red

HEX

#9E5157

RGB

rgb(158, 81, 87)

HSL

hsl(355, 32%, 47%)

HSB

hsb(355, 49%, 62%)

CMYK

cmyk(0%, 49%, 45%, 38%)

Oklch

oklch(53.0% 0.102 16.3)

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

#B63150

Crimson · Brown · Passion Red

HEX

#B63150

RGB

rgb(182, 49, 80)

HSL

hsl(346, 58%, 45%)

HSB

hsb(346, 73%, 71%)

CMYK

cmyk(0%, 73%, 56%, 29%)

Oklch

oklch(52.5% 0.169 11.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B4E5CF

E5B3CA

Analogous

B3E5B6

B4E5CF

B3E2E5

Triadic

B4E5CF

CEB3E5

E5CEB3

Split-Comp.

B4E5CF

E5B3E2

E5B6B3

Tetradic

B4E5CF

B6B3E5

E5B3CA

E2E5B3

Contrast Matrix WCAG 2.1 Contrast

B4E5CF	83C6B4	9D725F	9E5157	B63150
—	1.4 Fail	3.0 AA Large	4.0 AA Large	4.2 AA Large
1.4 Fail	—	2.1 Fail	2.8 Fail	3.0 AA Large
3.0 AA Large	2.1 Fail	—	1.3 Fail	1.4 Fail
4.0 AA Large	2.8 Fail	1.3 Fail	—	1.1 Fail
4.2 AA Large	3.0 AA Large	1.4 Fail	1.1 Fail	—

White BG

1.4Fail

2.0Fail

4.2AA Large

5.6AA

5.9AA

Black BG

15.0AAA

10.7AAA

5.0AA

3.8AA Large

3.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

C9CAD4

A0A1B8

8A8A64

7D7C56

7C7B48

Deuteranopia

C6C3D6

9C97B9

8D9065

818755

848E47

Tritanopia

B6D9D9

86BCBD

9B6768

9A5454

AF4341

Achromatopsia

D4D4D4

B0B0B0

7D7D7D

696969

5C5C5C

Shades & Tints Shades & Tints

#B4E5CF

Dark

Light

#83C6B4

Dark

Light

#9D725F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b4e5cf;
  --color-2: #83c6b4;
  --color-3: #9d725f;
  --color-4: #9e5157;
  --color-5: #b63150;
}

SCSS

$color-1: #b4e5cf;
$color-2: #83c6b4;
$color-3: #9d725f;
$color-4: #9e5157;
$color-5: #b63150;

TAILWIND

colors: {
  'brand-1': '#b4e5cf',
  'brand-2': '#83c6b4',
  'brand-3': '#9d725f',
  'brand-4': '#9e5157',
  'brand-5': '#b63150',
}

RGB Array

[180, 229, 207], [131, 198, 180], [157, 114, 95], [158, 81, 87], [182, 49, 80]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B4E5CF, #83C6B4, #9D725F, #9E5157, #B63150 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: #b4e5cf; --color-2: #83c6b4; --color-3: #9d725f; --color-4: #9e5157; --color-5: #b63150. 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