← Back to Editor

#AFECCF · #85AF9B · #352C2C · #464D4A · #687E73

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 LibraryData Visualization

Color Details Color Details

#AFECCF

Jade · LightBlue · Mint Green

HEX
#AFECCF
RGB
rgb(175, 236, 207)
HSL
hsl(151, 62%, 81%)
HSB
hsb(151, 26%, 93%)
CMYK
cmyk(26%, 0%, 12%, 7%)
Oklch
oklch(89.4% 0.074 164.0)

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

#85AF9B

Mineral Blue · DarkSeaGreen · Olive Green

HEX
#85AF9B
RGB
rgb(133, 175, 155)
HSL
hsl(151, 21%, 60%)
HSB
hsb(151, 24%, 69%)
CMYK
cmyk(24%, 0%, 11%, 31%)
Oklch
oklch(71.8% 0.054 164.2)

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

#352C2C

Crimson · DarkSlateGray · Dark Stone

HEX
#352C2C
RGB
rgb(53, 44, 44)
HSL
hsl(0, 9%, 19%)
HSB
hsb(0, 17%, 21%)
CMYK
cmyk(0%, 17%, 17%, 79%)
Oklch
oklch(30.3% 0.013 17.9)

Traditional「Crimson」· Paint「Dark Stone」· Creative Midnight Shadow

#464D4A

Dark Cyan · DarkSlateGray · Charcoal

HEX
#464D4A
RGB
rgb(70, 77, 74)
HSL
hsl(154, 5%, 29%)
HSB
hsb(154, 9%, 30%)
CMYK
cmyk(9%, 0%, 4%, 70%)
Oklch
oklch(41.3% 0.010 168.3)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

#687E73

Mineral Blue · DimGray · Olive Green

HEX
#687E73
RGB
rgb(104, 126, 115)
HSL
hsl(150, 10%, 45%)
HSB
hsb(150, 17%, 49%)
CMYK
cmyk(17%, 0%, 9%, 51%)
Oklch
oklch(57.2% 0.031 163.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AFECCF
EDB1CE

Analogous

B1EDB2
AFECCF
B1ECED

Triadic

AFECCF
D0B1ED
EDD0B1

Split-Comp.

AFECCF
EDB1EC
EDB2B1

Tetradic

AFECCF
B2B1ED
EDB1CE
ECEDB1

Contrast Matrix WCAG 2.1 Contrast

AFECCF
85AF9B
352C2C
464D4A
687E73
—
1.8
Fail
10.2
AAA
6.5
AA
3.3
AA Large
1.8
Fail
—
5.6
AA
3.6
AA Large
1.8
Fail
10.2
AAA
5.6
AA
—
1.6
Fail
3.1
AA Large
6.5
AA
3.6
AA Large
1.6
Fail
—
2.0
Fail
3.3
AA Large
1.8
Fail
3.1
AA Large
2.0
Fail
—
White BG
1.3Fail
2.4Fail
13.6AAA
8.7AAA
4.4AA Large
Black BG
15.7AAA
8.6AAA
1.5Fail
2.4Fail
4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C9CAD6
9798A0
31312C
49494B
727276

Deuteranopia

C6C1D8
9592A1
32322C
49484B
706F76

Tritanopia

B2DCDD
87A4A5
352C2C
464B4B
697878

Achromatopsia

D6D6D6
A0A0A0
2F2F2F
4B4B4B
767676

Shades & Tints Shades & Tints

#AFECCF

Dark
Light

#85AF9B

Dark
Light

#352C2C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #afeccf;
  --color-2: #85af9b;
  --color-3: #352c2c;
  --color-4: #464d4a;
  --color-5: #687e73;
}

SCSS

$color-1: #afeccf;
$color-2: #85af9b;
$color-3: #352c2c;
$color-4: #464d4a;
$color-5: #687e73;

TAILWIND

colors: {
  'brand-1': '#afeccf',
  'brand-2': '#85af9b',
  'brand-3': '#352c2c',
  'brand-4': '#464d4a',
  'brand-5': '#687e73',
}

RGB Array

[175, 236, 207], [133, 175, 155], [53, 44, 44], [70, 77, 74], [104, 126, 115]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AFECCF, #85AF9B, #352C2C, #464D4A, #687E73 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: #afeccf; --color-2: #85af9b; --color-3: #352c2c; --color-4: #464d4a; --color-5: #687e73. 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