← Back to Editor

#B2D0AA · #71A895 · #568887 · #70764A · #3A3E27

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#B2D0AA

Celadon · Silver · Apple Green

HEX
#B2D0AA
RGB
rgb(178, 208, 170)
HSL
hsl(107, 29%, 74%)
HSB
hsb(107, 18%, 82%)
CMYK
cmyk(14%, 0%, 18%, 18%)
Oklch
oklch(82.5% 0.061 139.1)

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

#71A895

Mineral Blue · CadetBlue · Olive Green

HEX
#71A895
RGB
rgb(113, 168, 149)
HSL
hsl(159, 24%, 55%)
HSB
hsb(159, 33%, 66%)
CMYK
cmyk(33%, 0%, 11%, 34%)
Oklch
oklch(68.8% 0.065 170.7)

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

#568887

Mineral Blue · SlateGray · Mint Ice

HEX
#568887
RGB
rgb(86, 136, 135)
HSL
hsl(179, 23%, 44%)
HSB
hsb(179, 37%, 53%)
CMYK
cmyk(37%, 0%, 1%, 47%)
Oklch
oklch(59.1% 0.054 194.2)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#70764A

Autumn Sage · DimGray · Honey Gold

HEX
#70764A
RGB
rgb(112, 118, 74)
HSL
hsl(68, 23%, 38%)
HSB
hsb(68, 37%, 46%)
CMYK
cmyk(5%, 0%, 37%, 54%)
Oklch
oklch(54.9% 0.064 114.9)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#3A3E27

Grass Green · DarkSlateGray · Dark Green

HEX
#3A3E27
RGB
rgb(58, 62, 39)
HSL
hsl(70, 23%, 20%)
HSB
hsb(70, 37%, 24%)
CMYK
cmyk(6%, 0%, 37%, 76%)
Oklch
oklch(35.3% 0.038 116.4)

Traditional「Grass Green」· Paint「Dark Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B2D0AA
C8A9D0

Analogous

C5D0A9
B2D0AA
A9D0B4

Triadic

B2D0AA
A9B2D0
D0A9B2

Split-Comp.

B2D0AA
B4A9D0
D0A9C5

Tetradic

B2D0AA
A9C5D0
C8A9D0
D0B4A9

Contrast Matrix WCAG 2.1 Contrast

B2D0AA
71A895
568887
70764A
3A3E27
—
1.6
Fail
2.4
Fail
2.9
Fail
6.6
AA
1.6
Fail
—
1.5
Fail
1.8
Fail
4.1
AA Large
2.4
Fail
1.5
Fail
—
1.2
Fail
2.8
Fail
2.9
Fail
1.8
Fail
1.2
Fail
—
2.3
Fail
6.6
AA
4.1
AA Large
2.8
Fail
2.3
Fail
—
White BG
1.7Fail
2.7Fail
4.0AA Large
4.8AA
11.1AAA
Black BG
12.5AAA
7.7AAA
5.3AA
4.4AA Large
1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BFBFB3
89899A
6C6C87
737355
3C3C2D

Deuteranopia

BDBBB5
86829B
696587
727257
3C3B2E

Tritanopia

B4BABC
749D9E
598787
705D5F
3A3132

Achromatopsia

C3C3C3
959595
797979
6F6F6F
3A3A3A

Shades & Tints Shades & Tints

#B2D0AA

Dark
Light

#71A895

Dark
Light

#568887

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b2d0aa;
  --color-2: #71a895;
  --color-3: #568887;
  --color-4: #70764a;
  --color-5: #3a3e27;
}

SCSS

$color-1: #b2d0aa;
$color-2: #71a895;
$color-3: #568887;
$color-4: #70764a;
$color-5: #3a3e27;

TAILWIND

colors: {
  'brand-1': '#b2d0aa',
  'brand-2': '#71a895',
  'brand-3': '#568887',
  'brand-4': '#70764a',
  'brand-5': '#3a3e27',
}

RGB Array

[178, 208, 170], [113, 168, 149], [86, 136, 135], [112, 118, 74], [58, 62, 39]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B2D0AA, #71A895, #568887, #70764A, #3A3E27 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #b2d0aa; --color-2: #71a895; --color-3: #568887; --color-4: #70764a; --color-5: #3a3e27. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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. Restrained colors convey professionalism and trust. 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