← Back to Editor

#6BB698 · #76A98F · #829D85 · #8D907C · #988372

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

#6BB698

Mineral Blue · CadetBlue · Olive Green

HEX
#6BB698
RGB
rgb(107, 182, 152)
HSL
hsl(156, 34%, 57%)
HSB
hsb(156, 41%, 71%)
CMYK
cmyk(41%, 0%, 16%, 29%)
Oklch
oklch(71.9% 0.088 166.4)

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

#76A98F

Celadon · CadetBlue · Olive Green

HEX
#76A98F
RGB
rgb(118, 169, 143)
HSL
hsl(149, 23%, 56%)
HSB
hsb(149, 30%, 66%)
CMYK
cmyk(30%, 0%, 15%, 34%)
Oklch
oklch(69.1% 0.067 161.8)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#829D85

Celadon · Gray · Olive Green

HEX
#829D85
RGB
rgb(130, 157, 133)
HSL
hsl(127, 12%, 56%)
HSB
hsb(127, 17%, 62%)
CMYK
cmyk(17%, 0%, 15%, 38%)
Oklch
oklch(66.8% 0.046 148.1)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#8D907C

Autumn Sage · Gray · Warm Gray

HEX
#8D907C
RGB
rgb(141, 144, 124)
HSL
hsl(69, 8%, 53%)
HSB
hsb(69, 14%, 56%)
CMYK
cmyk(2%, 0%, 14%, 44%)
Oklch
oklch(64.5% 0.029 114.1)

Traditional「Autumn Sage」· Paint「Warm Gray」· Creative Urban Concrete

#988372

Tangerine · Gray · Warm Sun

HEX
#988372
RGB
rgb(152, 131, 114)
HSL
hsl(27, 16%, 52%)
HSB
hsb(27, 25%, 60%)
CMYK
cmyk(0%, 14%, 25%, 40%)
Oklch
oklch(62.4% 0.036 61.1)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6BB698
B76C8A

Analogous

6CB774
6BB698
6CAFB7

Triadic

6BB698
996CB7
B7996C

Split-Comp.

6BB698
B76CAF
B7746C

Tetradic

6BB698
746CB7
B76C8A
AFB76C

Contrast Matrix WCAG 2.1 Contrast

6BB698
76A98F
829D85
8D907C
988372
—
1.1
Fail
1.2
Fail
1.4
Fail
1.5
Fail
1.1
Fail
—
1.1
Fail
1.2
Fail
1.3
Fail
1.2
Fail
1.1
Fail
—
1.1
Fail
1.2
Fail
1.4
Fail
1.2
Fail
1.1
Fail
—
1.1
Fail
1.5
Fail
1.3
Fail
1.2
Fail
1.1
Fail
—
White BG
2.4Fail
2.7Fail
3.0Fail
3.3AA Large
3.6AA Large
Black BG
8.8AAA
7.8AAA
7.1AAA
6.4AA
5.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8B8C9F
8C8D95
8E8E8B
8E8E81
8F8F76

Deuteranopia

8782A1
898597
8C8A8C
8E8E82
909277

Tritanopia

6FA5A6
799A9B
838F90
8D8586
97797A

Achromatopsia

9C9C9C
979797
929292
8D8D8D
878787

Shades & Tints Shades & Tints

#6BB698

Dark
Light

#76A98F

Dark
Light

#829D85

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6bb698;
  --color-2: #76a98f;
  --color-3: #829d85;
  --color-4: #8d907c;
  --color-5: #988372;
}

SCSS

$color-1: #6bb698;
$color-2: #76a98f;
$color-3: #829d85;
$color-4: #8d907c;
$color-5: #988372;

TAILWIND

colors: {
  'brand-1': '#6bb698',
  'brand-2': '#76a98f',
  'brand-3': '#829d85',
  'brand-4': '#8d907c',
  'brand-5': '#988372',
}

RGB Array

[107, 182, 152], [118, 169, 143], [130, 157, 133], [141, 144, 124], [152, 131, 114]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #6BB698, #76A98F, #829D85, #8D907C, #988372 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. 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: #6bb698; --color-2: #76a98f; --color-3: #829d85; --color-4: #8d907c; --color-5: #988372. 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. 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