← Back to Editor

#AFCFAC · #6A8C85 · #346276 · #3A3B54 · #431A2E

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

#AFCFAC

Celadon · Silver · Apple Green

HEX
#AFCFAC
RGB
rgb(175, 207, 172)
HSL
hsl(115, 27%, 74%)
HSB
hsb(115, 17%, 81%)
CMYK
cmyk(15%, 0%, 17%, 19%)
Oklch
oklch(82.2% 0.059 142.7)

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

#6A8C85

Mineral Blue · SlateGray · Mint Ice

HEX
#6A8C85
RGB
rgb(106, 140, 133)
HSL
hsl(168, 14%, 48%)
HSB
hsb(168, 24%, 55%)
CMYK
cmyk(24%, 0%, 5%, 45%)
Oklch
oklch(61.2% 0.040 180.9)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#346276

Slate Blue · DarkSlateGray · Mint Ice

HEX
#346276
RGB
rgb(52, 98, 118)
HSL
hsl(198, 39%, 33%)
HSB
hsb(198, 56%, 46%)
CMYK
cmyk(56%, 17%, 0%, 54%)
Oklch
oklch(47.2% 0.060 228.3)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#3A3B54

Indigo · DarkSlateGray · Prussian Blue

HEX
#3A3B54
RGB
rgb(58, 59, 84)
HSL
hsl(238, 18%, 28%)
HSB
hsb(238, 31%, 33%)
CMYK
cmyk(31%, 30%, 0%, 67%)
Oklch
oklch(36.2% 0.043 282.2)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#431A2E

Dark Violet · DarkSlateGray · Raspberry

HEX
#431A2E
RGB
rgb(67, 26, 46)
HSL
hsl(331, 44%, 18%)
HSB
hsb(331, 61%, 26%)
CMYK
cmyk(0%, 61%, 31%, 74%)
Oklch
oklch(28.6% 0.069 351.8)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AFCFAC
CCABCF

Analogous

C0CFAB
AFCFAC
ABCFBA

Triadic

AFCFAC
ABAECF
CFABAE

Split-Comp.

AFCFAC
BAABCF
CFABC0

Tetradic

AFCFAC
ABC0CF
CCABCF
CFBAAB

Contrast Matrix WCAG 2.1 Contrast

AFCFAC
6A8C85
346276
3A3B54
431A2E
—
2.2
Fail
3.9
AA Large
6.4
AA
8.7
AAA
2.2
Fail
—
1.8
Fail
2.9
Fail
4.0
AA Large
3.9
AA Large
1.8
Fail
—
1.6
Fail
2.2
Fail
6.4
AA
2.9
Fail
1.6
Fail
—
1.4
Fail
8.7
AAA
4.0
AA Large
2.2
Fail
1.4
Fail
—
White BG
1.7Fail
3.7AA Large
6.7AA
10.9AAA
14.7AAA
Black BG
12.3AAA
5.7AA
3.2AA Large
1.9Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BDBDB4
797987
484871
3A3A4E
313129

Deuteranopia

BBB9B7
777487
454270
3A3A4D
343728

Tritanopia

B1BBBD
6C8888
366D6D
3A4948
412525

Achromatopsia

C1C1C1
818181
575757
3E3E3E
292929

Shades & Tints Shades & Tints

#AFCFAC

Dark
Light

#6A8C85

Dark
Light

#346276

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #afcfac;
  --color-2: #6a8c85;
  --color-3: #346276;
  --color-4: #3a3b54;
  --color-5: #431a2e;
}

SCSS

$color-1: #afcfac;
$color-2: #6a8c85;
$color-3: #346276;
$color-4: #3a3b54;
$color-5: #431a2e;

TAILWIND

colors: {
  'brand-1': '#afcfac',
  'brand-2': '#6a8c85',
  'brand-3': '#346276',
  'brand-4': '#3a3b54',
  'brand-5': '#431a2e',
}

RGB Array

[175, 207, 172], [106, 140, 133], [52, 98, 118], [58, 59, 84], [67, 26, 46]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AFCFAC, #6A8C85, #346276, #3A3B54, #431A2E 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: #afcfac; --color-2: #6a8c85; --color-3: #346276; --color-4: #3a3b54; --color-5: #431a2e. 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