← Back to Editor

#6B9685 · #6E676C · #703851 · #9BC4A6 · #BFC9A8

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

#6B9685

Mineral Blue · SlateGray · Olive Green

HEX
#6B9685
RGB
rgb(107, 150, 133)
HSL
hsl(156, 17%, 50%)
HSB
hsb(156, 29%, 59%)
CMYK
cmyk(29%, 0%, 11%, 41%)
Oklch
oklch(63.7% 0.054 168.2)

TraditionalMineral Blue」· PaintOlive Green」· Creative Blush Sunrise

#6E676C

Ink Gray · DimGray · Warm Gray

HEX
#6E676C
RGB
rgb(110, 103, 108)
HSL
hsl(317, 3%, 42%)
HSB
hsb(317, 6%, 43%)
CMYK
cmyk(0%, 6%, 2%, 57%)
Oklch
oklch(52.2% 0.012 335.7)

TraditionalInk Gray」· PaintWarm Gray」· Creative Urban Concrete

#703851

Dark Violet · DimGray · Camellia

HEX
#703851
RGB
rgb(112, 56, 81)
HSL
hsl(333, 33%, 33%)
HSB
hsb(333, 50%, 44%)
CMYK
cmyk(0%, 50%, 28%, 56%)
Oklch
oklch(42.1% 0.085 353.2)

TraditionalDark Violet」· PaintCamellia」· Creative Blush Sunrise

#9BC4A6

Celadon · DarkSeaGreen · Apple Green

HEX
#9BC4A6
RGB
rgb(155, 196, 166)
HSL
hsl(136, 26%, 69%)
HSB
hsb(136, 21%, 77%)
CMYK
cmyk(21%, 0%, 15%, 23%)
Oklch
oklch(78.2% 0.061 153.1)

TraditionalCeladon」· PaintApple Green」· Creative Mint Breeze

#BFC9A8

Willow Green · Silver · Apple Green

HEX
#BFC9A8
RGB
rgb(191, 201, 168)
HSL
hsl(78, 23%, 72%)
HSB
hsb(78, 16%, 79%)
CMYK
cmyk(5%, 0%, 16%, 21%)
Oklch
oklch(81.9% 0.046 121.1)

TraditionalWillow Green」· PaintApple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6B9685
956A7B

Analogous

6A956E
6B9685
6A9195

Triadic

6B9685
846A95
95846A

Split-Comp.

6B9685
956A91
956E6A

Tetradic

6B9685
6E6A95
956A7B
91956A

Contrast Matrix WCAG 2.1 Contrast

6B9685
6E676C
703851
9BC4A6
BFC9A8
1.7
Fail
2.7
Fail
1.7
Fail
1.9
Fail
1.7
Fail
1.6
Fail
2.8
Fail
3.2
AA Large
2.7
Fail
1.6
Fail
4.6
AA
5.1
AA
1.7
Fail
2.8
Fail
4.6
AA
1.1
Fail
1.9
Fail
3.2
AA Large
5.1
AA
1.1
Fail
White BG
3.3AA Large
5.5AA
8.8AAA
1.9Fail
1.7Fail
Black BG
6.3AA
3.8AA Large
2.4Fail
10.8AAA
12.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7E7E89
6B6B6B
58574B
ADADAD
C3C3B0

Deuteranopia

7B788A
6B6C6B
5B5F4A
AAA7AF
C3C2B2

Tritanopia

6D8C8D
6E6A6A
6D4645
9DB3B4
C0B6B8

Achromatopsia

878787
6A6A6A
4C4C4C
B4B4B4
C2C2C2

Shades & Tints Shades & Tints

#6B9685

Dark
Light

#6E676C

Dark
Light

#703851

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6b9685;
  --color-2: #6e676c;
  --color-3: #703851;
  --color-4: #9bc4a6;
  --color-5: #bfc9a8;
}

SCSS

$color-1: #6b9685;
$color-2: #6e676c;
$color-3: #703851;
$color-4: #9bc4a6;
$color-5: #bfc9a8;

TAILWIND

colors: {
  'brand-1': '#6b9685',
  'brand-2': '#6e676c',
  'brand-3': '#703851',
  'brand-4': '#9bc4a6',
  'brand-5': '#bfc9a8',
}

RGB Array

[107, 150, 133], [110, 103, 108], [112, 56, 81], [155, 196, 166], [191, 201, 168]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #6B9685, #6E676C, #703851, #9BC4A6, #BFC9A8 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: #6b9685; --color-2: #6e676c; --color-3: #703851; --color-4: #9bc4a6; --color-5: #bfc9a8. 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