← Back to Editor

#7A685C · #8C8776 · #9FC2A8 · #BEE8C0 · #DCF2BF

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#7A685C

Tangerine · DimGray · Amber Brown

HEX
#7A685C
RGB
rgb(122, 104, 92)
HSL
hsl(24, 14%, 42%)
HSB
hsb(24, 25%, 48%)
CMYK
cmyk(0%, 15%, 25%, 52%)
Oklch
oklch(53.1% 0.029 55.7)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#8C8776

Ginger · Gray · Warm Gray

HEX
#8C8776
RGB
rgb(140, 135, 118)
HSL
hsl(46, 9%, 51%)
HSB
hsb(46, 16%, 55%)
CMYK
cmyk(0%, 4%, 16%, 45%)
Oklch
oklch(62.3% 0.025 93.5)

Traditional「Ginger」· Paint「Warm Gray」· Creative Urban Concrete

#9FC2A8

Celadon · DarkGray · Apple Green

HEX
#9FC2A8
RGB
rgb(159, 194, 168)
HSL
hsl(135, 22%, 69%)
HSB
hsb(135, 18%, 76%)
CMYK
cmyk(18%, 0%, 13%, 24%)
Oklch
oklch(78.1% 0.053 152.9)

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

#BEE8C0

Celadon · LightGray · Mint Green

HEX
#BEE8C0
RGB
rgb(190, 232, 192)
HSL
hsl(123, 48%, 83%)
HSB
hsb(123, 18%, 91%)
CMYK
cmyk(18%, 0%, 17%, 9%)
Oklch
oklch(89.1% 0.070 146.2)

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

#DCF2BF

Willow Green · Wheat · Mint Green

HEX
#DCF2BF
RGB
rgb(220, 242, 191)
HSL
hsl(86, 66%, 85%)
HSB
hsb(86, 21%, 95%)
CMYK
cmyk(9%, 0%, 21%, 5%)
Oklch
oklch(93.2% 0.071 126.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7A685C
5C6E7A

Analogous

7A5C5F
7A685C
7A775C

Triadic

7A685C
5C7A68
685C7A

Split-Comp.

7A685C
5C7A77
5C5F7A

Tetradic

7A685C
5F7A5C
5C6E7A
775C7A

Contrast Matrix WCAG 2.1 Contrast

7A685C
8C8776
9FC2A8
BEE8C0
DCF2BF
—
1.5
Fail
2.7
Fail
3.9
AA Large
4.4
AA Large
1.5
Fail
—
1.8
Fail
2.7
Fail
3.0
Fail
2.7
Fail
1.8
Fail
—
1.4
Fail
1.6
Fail
3.9
AA Large
2.7
Fail
1.4
Fail
—
1.1
Fail
4.4
AA Large
3.0
Fail
1.6
Fail
1.1
Fail
—
White BG
5.3AA
3.6AA Large
2.0Fail
1.4Fail
1.2Fail
Black BG
4.0AA Large
5.8AA
10.8AAA
15.5AAA
17.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

72725F
8A8A7A
AEAEAE
D0D1CA
E6E6CB

Deuteranopia

737560
8A8B7B
ACAAB0
CECBCC
E4E3CE

Tritanopia

796162
8C7D7E
A1B3B4
C0D1D3
DDD5D7

Achromatopsia

6C6C6C
878787
B5B5B5
D7D7D7
E6E6E6

Shades & Tints Shades & Tints

#7A685C

Dark
Light

#8C8776

Dark
Light

#9FC2A8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7a685c;
  --color-2: #8c8776;
  --color-3: #9fc2a8;
  --color-4: #bee8c0;
  --color-5: #dcf2bf;
}

SCSS

$color-1: #7a685c;
$color-2: #8c8776;
$color-3: #9fc2a8;
$color-4: #bee8c0;
$color-5: #dcf2bf;

TAILWIND

colors: {
  'brand-1': '#7a685c',
  'brand-2': '#8c8776',
  'brand-3': '#9fc2a8',
  'brand-4': '#bee8c0',
  'brand-5': '#dcf2bf',
}

RGB Array

[122, 104, 92], [140, 135, 118], [159, 194, 168], [190, 232, 192], [220, 242, 191]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7A685C, #8C8776, #9FC2A8, #BEE8C0, #DCF2BF 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: #7a685c; --color-2: #8c8776; --color-3: #9fc2a8; --color-4: #bee8c0; --color-5: #dcf2bf. 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