← Back to Editor

#867A60 · #89BBBA · #B3DDCF · #FDFDF2 · #E3F0D7

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#867A60

Ochre · Gray · Honey Gold

HEX
#867A60
RGB
rgb(134, 122, 96)
HSL
hsl(41, 17%, 45%)
HSB
hsb(41, 28%, 53%)
CMYK
cmyk(0%, 9%, 28%, 47%)
Oklch
oklch(58.3% 0.041 86.1)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#89BBBA

Jade · DarkGray · Lake Green

HEX
#89BBBA
RGB
rgb(137, 187, 186)
HSL
hsl(179, 27%, 64%)
HSB
hsb(179, 27%, 73%)
CMYK
cmyk(27%, 0%, 1%, 27%)
Oklch
oklch(75.7% 0.053 194.5)

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

#B3DDCF

Jade · LightBlue · Glacier Blue

HEX
#B3DDCF
RGB
rgb(179, 221, 207)
HSL
hsl(160, 38%, 78%)
HSB
hsb(160, 19%, 87%)
CMYK
cmyk(19%, 0%, 6%, 13%)
Oklch
oklch(86.4% 0.048 172.9)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#FDFDF2

Fresh Green · Snow · Lemon Cream

HEX
#FDFDF2
RGB
rgb(253, 253, 242)
HSL
hsl(60, 73%, 97%)
HSB
hsb(60, 4%, 99%)
CMYK
cmyk(0%, 0%, 4%, 1%)
Oklch
oklch(99.1% 0.014 106.7)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#E3F0D7

Celadon · Beige · Mint Green

HEX
#E3F0D7
RGB
rgb(227, 240, 215)
HSL
hsl(91, 45%, 89%)
HSB
hsb(91, 10%, 94%)
CMYK
cmyk(5%, 0%, 10%, 6%)
Oklch
oklch(93.9% 0.036 129.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

867A60
5F6C86

Analogous

86665F
867A60
7F865F

Triadic

867A60
5F867A
7A5F86

Split-Comp.

867A60
5F7F86
665F86

Tetradic

867A60
5F8666
5F6C86
865F7F

Contrast Matrix WCAG 2.1 Contrast

867A60
89BBBA
B3DDCF
FDFDF2
E3F0D7
—
2.0
Fail
2.9
Fail
4.1
AA Large
3.6
AA Large
2.0
Fail
—
1.4
Fail
2.1
Fail
1.8
Fail
2.9
Fail
1.4
Fail
—
1.4
Fail
1.3
Fail
4.1
AA Large
2.1
Fail
1.4
Fail
—
1.2
Fail
3.6
AA Large
1.8
Fail
1.3
Fail
1.2
Fail
—
White BG
4.2AA Large
2.1Fail
1.5Fail
1.0Fail
1.2Fail
Black BG
5.0AA
9.9AAA
14.2AAA
20.5AAA
17.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

818166
9F9FBA
C5C6D2
FDFDF5
E9E9DD

Deuteranopia

828268
9C98BA
C3C0D3
FDFDF5
E8E7DF

Tritanopia

856B6C
8CBABA
B5D5D6
FDF7F7
E4E2E3

Achromatopsia

7B7B7B
ACACAC
CFCFCF
FCFCFC
E9E9E9

Shades & Tints Shades & Tints

#867A60

Dark
Light

#89BBBA

Dark
Light

#B3DDCF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #867a60;
  --color-2: #89bbba;
  --color-3: #b3ddcf;
  --color-4: #fdfdf2;
  --color-5: #e3f0d7;
}

SCSS

$color-1: #867a60;
$color-2: #89bbba;
$color-3: #b3ddcf;
$color-4: #fdfdf2;
$color-5: #e3f0d7;

TAILWIND

colors: {
  'brand-1': '#867a60',
  'brand-2': '#89bbba',
  'brand-3': '#b3ddcf',
  'brand-4': '#fdfdf2',
  'brand-5': '#e3f0d7',
}

RGB Array

[134, 122, 96], [137, 187, 186], [179, 221, 207], [253, 253, 242], [227, 240, 215]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #867A60, #89BBBA, #B3DDCF, #FDFDF2, #E3F0D7 is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #867a60; --color-2: #89bbba; --color-3: #b3ddcf; --color-4: #fdfdf2; --color-5: #e3f0d7. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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. 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