← Back to Editor

#B2A693 · #88B9AC · #4ED3CF · #578AA8 · #72688D

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

#B2A693

Ginger · DarkGray · Warm Sun

HEX
#B2A693
RGB
rgb(178, 166, 147)
HSL
hsl(37, 17%, 64%)
HSB
hsb(37, 17%, 70%)
CMYK
cmyk(0%, 7%, 17%, 30%)
Oklch
oklch(73.0% 0.030 79.4)

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

#88B9AC

Jade · DarkSeaGreen · Lake Green

HEX
#88B9AC
RGB
rgb(136, 185, 172)
HSL
hsl(164, 26%, 63%)
HSB
hsb(164, 26%, 73%)
CMYK
cmyk(26%, 0%, 7%, 27%)
Oklch
oklch(74.7% 0.055 176.5)

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

#4ED3CF

Mineral Blue · MediumTurquoise · Lake Green

HEX
#4ED3CF
RGB
rgb(78, 211, 207)
HSL
hsl(178, 60%, 57%)
HSB
hsb(178, 63%, 83%)
CMYK
cmyk(63%, 0%, 2%, 17%)
Oklch
oklch(79.4% 0.114 192.3)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#578AA8

Slate Blue · SteelBlue · Navy Blue

HEX
#578AA8
RGB
rgb(87, 138, 168)
HSL
hsl(202, 32%, 50%)
HSB
hsb(202, 48%, 66%)
CMYK
cmyk(48%, 18%, 0%, 34%)
Oklch
oklch(60.9% 0.071 235.5)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#72688D

Deep Indigo · SlateGray · Navy Blue

HEX
#72688D
RGB
rgb(114, 104, 141)
HSL
hsl(256, 15%, 48%)
HSB
hsb(256, 26%, 55%)
CMYK
cmyk(19%, 26%, 0%, 45%)
Oklch
oklch(54.1% 0.058 296.8)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B2A693
94A0B3

Analogous

B39794
B2A693
AFB394

Triadic

B2A693
94B3A7
A794B3

Split-Comp.

B2A693
94AFB3
9794B3

Tetradic

B2A693
94B397
94A0B3
B394AF

Contrast Matrix WCAG 2.1 Contrast

B2A693
88B9AC
4ED3CF
578AA8
72688D
—
1.1
Fail
1.3
Fail
1.6
Fail
2.1
Fail
1.1
Fail
—
1.2
Fail
1.7
Fail
2.3
Fail
1.3
Fail
1.2
Fail
—
2.1
Fail
2.8
Fail
1.6
Fail
1.7
Fail
2.1
Fail
—
1.4
Fail
2.1
Fail
2.3
Fail
2.8
Fail
1.4
Fail
—
White BG
2.4Fail
2.2Fail
1.8Fail
3.7AA Large
5.1AA
Black BG
8.8AAA
9.6AAA
11.5AAA
5.6AA
4.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

ADAD98
9D9EAF
8889D0
6D6EA1
6E6E84

Deuteranopia

AEAE99
9A97B0
8076D0
6A669F
6E6F82

Tritanopia

B19B9C
8AB2B2
55D1D1
5A9B9A
727D7B

Achromatopsia

A7A7A7
A9A9A9
ABABAB
7E7E7E
6F6F6F

Shades & Tints Shades & Tints

#B2A693

Dark
Light

#88B9AC

Dark
Light

#4ED3CF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b2a693;
  --color-2: #88b9ac;
  --color-3: #4ed3cf;
  --color-4: #578aa8;
  --color-5: #72688d;
}

SCSS

$color-1: #b2a693;
$color-2: #88b9ac;
$color-3: #4ed3cf;
$color-4: #578aa8;
$color-5: #72688d;

TAILWIND

colors: {
  'brand-1': '#b2a693',
  'brand-2': '#88b9ac',
  'brand-3': '#4ed3cf',
  'brand-4': '#578aa8',
  'brand-5': '#72688d',
}

RGB Array

[178, 166, 147], [136, 185, 172], [78, 211, 207], [87, 138, 168], [114, 104, 141]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B2A693, #88B9AC, #4ED3CF, #578AA8, #72688D 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: #b2a693; --color-2: #88b9ac; --color-3: #4ed3cf; --color-4: #578aa8; --color-5: #72688d. 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