← Back to Editor

#62685A · #457C7F · #5CA792 · #7ED79F · #F7EAA6

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

#62685A

Ink Gray · DimGray · Charcoal

HEX
#62685A
RGB
rgb(98, 104, 90)
HSL
hsl(86, 7%, 38%)
HSB
hsb(86, 13%, 41%)
CMYK
cmyk(6%, 0%, 13%, 59%)
Oklch
oklch(50.8% 0.023 126.2)

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

#457C7F

Slate Blue · DimGray · Mint Ice

HEX
#457C7F
RGB
rgb(69, 124, 127)
HSL
hsl(183, 30%, 38%)
HSB
hsb(183, 46%, 50%)
CMYK
cmyk(46%, 2%, 0%, 50%)
Oklch
oklch(55.0% 0.058 200.2)

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

#5CA792

Mineral Blue · CadetBlue · Lake Green

HEX
#5CA792
RGB
rgb(92, 167, 146)
HSL
hsl(163, 30%, 51%)
HSB
hsb(163, 45%, 65%)
CMYK
cmyk(45%, 0%, 13%, 35%)
Oklch
oklch(67.4% 0.082 173.6)

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

#7ED79F

Emerald · MediumAquaMarine · Apple Green

HEX
#7ED79F
RGB
rgb(126, 215, 159)
HSL
hsl(142, 53%, 67%)
HSB
hsb(142, 41%, 84%)
CMYK
cmyk(41%, 0%, 26%, 16%)
Oklch
oklch(80.8% 0.118 155.1)

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

#F7EAA6

Fresh Green · Wheat · Lemon Cream

HEX
#F7EAA6
RGB
rgb(247, 234, 166)
HSL
hsl(50, 84%, 81%)
HSB
hsb(50, 33%, 97%)
CMYK
cmyk(0%, 5%, 33%, 3%)
Oklch
oklch(93.2% 0.087 98.6)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

62685A
605A68

Analogous

68675A
62685A
5B685A

Triadic

62685A
5A6268
685A62

Split-Comp.

62685A
5A5B68
675A68

Tetradic

62685A
5A6867
605A68
685A5B

Contrast Matrix WCAG 2.1 Contrast

62685A
457C7F
5CA792
7ED79F
F7EAA6
—
1.2
Fail
2.0
Fail
3.3
AA Large
4.7
AA
1.2
Fail
—
1.7
Fail
2.7
Fail
3.9
AA Large
2.0
Fail
1.7
Fail
—
1.6
Fail
2.3
Fail
3.3
AA Large
2.7
Fail
1.6
Fail
—
1.4
Fail
4.7
AA
3.9
AA Large
2.3
Fail
1.4
Fail
—
White BG
5.8AA
4.7AA
2.8Fail
1.7Fail
1.2Fail
Black BG
3.6AA Large
4.4AA Large
7.4AAA
12.1AAA
17.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

65655D
5D5D7E
7C7D97
A5A5AD
F1F1B6

Deuteranopia

64645E
5A567E
787398
9F99B0
F2F3BA

Tritanopia

626061
487E7E
609B9C
82B7BA
F6C3C6

Achromatopsia

656565
6C6C6C
8E8E8E
B6B6B6
E6E6E6

Shades & Tints Shades & Tints

#62685A

Dark
Light

#457C7F

Dark
Light

#5CA792

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #62685a;
  --color-2: #457c7f;
  --color-3: #5ca792;
  --color-4: #7ed79f;
  --color-5: #f7eaa6;
}

SCSS

$color-1: #62685a;
$color-2: #457c7f;
$color-3: #5ca792;
$color-4: #7ed79f;
$color-5: #f7eaa6;

TAILWIND

colors: {
  'brand-1': '#62685a',
  'brand-2': '#457c7f',
  'brand-3': '#5ca792',
  'brand-4': '#7ed79f',
  'brand-5': '#f7eaa6',
}

RGB Array

[98, 104, 90], [69, 124, 127], [92, 167, 146], [126, 215, 159], [247, 234, 166]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #62685A, #457C7F, #5CA792, #7ED79F, #F7EAA6 is ideal for: 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: #62685a; --color-2: #457c7f; --color-3: #5ca792; --color-4: #7ed79f; --color-5: #f7eaa6. 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. 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