← Back to Editor

#14F3AF · #86B299 · #69807A · #5A5456 · #463D38

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

#14F3AF

Mineral Blue · MediumSpringGreen · Lake Green

HEX
#14F3AF
RGB
rgb(20, 243, 175)
HSL
hsl(162, 90%, 52%)
HSB
hsb(162, 92%, 95%)
CMYK
cmyk(92%, 0%, 28%, 5%)
Oklch
oklch(85.5% 0.180 164.0)

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

#86B299

Celadon · DarkSeaGreen · Apple Green

HEX
#86B299
RGB
rgb(134, 178, 153)
HSL
hsl(146, 22%, 61%)
HSB
hsb(146, 25%, 70%)
CMYK
cmyk(25%, 0%, 14%, 30%)
Oklch
oklch(72.5% 0.060 159.6)

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

#69807A

Mineral Blue · SlateGray · Mint Ice

HEX
#69807A
RGB
rgb(105, 128, 122)
HSL
hsl(164, 10%, 46%)
HSB
hsb(164, 18%, 50%)
CMYK
cmyk(18%, 0%, 5%, 50%)
Oklch
oklch(58.0% 0.028 177.7)

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

#5A5456

Ink Gray · DimGray · Charcoal

HEX
#5A5456
RGB
rgb(90, 84, 86)
HSL
hsl(340, 3%, 34%)
HSB
hsb(340, 7%, 35%)
CMYK
cmyk(0%, 7%, 4%, 65%)
Oklch
oklch(45.2% 0.008 355.1)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#463D38

Tangerine · DarkSlateGray · Cinnamon

HEX
#463D38
RGB
rgb(70, 61, 56)
HSL
hsl(21, 11%, 25%)
HSB
hsb(21, 20%, 27%)
CMYK
cmyk(0%, 13%, 20%, 73%)
Oklch
oklch(36.8% 0.015 51.0)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

14F3AF
F31659

Analogous

16F343
14F3AF
16C7F3

Triadic

14F3AF
B116F3
F3B116

Split-Comp.

14F3AF
F316C7
F34316

Tetradic

14F3AF
4316F3
F31659
C7F316

Contrast Matrix WCAG 2.1 Contrast

14F3AF
86B299
69807A
5A5456
463D38
—
1.6
Fail
2.9
Fail
5.1
AA
7.3
AAA
1.6
Fail
—
1.8
Fail
3.1
AA Large
4.5
AA Large
2.9
Fail
1.8
Fail
—
1.8
Fail
2.5
Fail
5.1
AA
3.1
AA Large
1.8
Fail
—
1.4
Fail
7.3
AAA
4.5
AA Large
2.5
Fail
1.4
Fail
—
White BG
1.5Fail
2.4Fail
4.2AA Large
7.4AAA
10.6AAA
Black BG
14.5AAA
8.8AAA
5.0AA
2.8Fail
2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

7577BF
99999F
73737B
575756
424239

Deuteranopia

6857C3
9793A1
72707C
585855
43433A

Tritanopia

1FCCCF
88A4A5
6A7D7D
5A5555
463A3A

Achromatopsia

A9A9A9
A2A2A2
787878
565656
3F3F3F

Shades & Tints Shades & Tints

#14F3AF

Dark
Light

#86B299

Dark
Light

#69807A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #14f3af;
  --color-2: #86b299;
  --color-3: #69807a;
  --color-4: #5a5456;
  --color-5: #463d38;
}

SCSS

$color-1: #14f3af;
$color-2: #86b299;
$color-3: #69807a;
$color-4: #5a5456;
$color-5: #463d38;

TAILWIND

colors: {
  'brand-1': '#14f3af',
  'brand-2': '#86b299',
  'brand-3': '#69807a',
  'brand-4': '#5a5456',
  'brand-5': '#463d38',
}

RGB Array

[20, 243, 175], [134, 178, 153], [105, 128, 122], [90, 84, 86], [70, 61, 56]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #14F3AF, #86B299, #69807A, #5A5456, #463D38 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: #14f3af; --color-2: #86b299; --color-3: #69807a; --color-4: #5a5456; --color-5: #463d38. 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