← Back to Editor

#13424B · #496961 · #7B8F77 · #BAB78D · #F3DEA4

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

#13424B

Lake Blue · DarkSlateGray · Peacock Green

HEX
#13424B
RGB
rgb(19, 66, 75)
HSL
hsl(190, 60%, 18%)
HSB
hsb(190, 75%, 29%)
CMYK
cmyk(75%, 12%, 0%, 71%)
Oklch
oklch(35.2% 0.052 212.8)

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

#496961

Mineral Blue · DimGray · Mint Ice

HEX
#496961
RGB
rgb(73, 105, 97)
HSL
hsl(165, 18%, 35%)
HSB
hsb(165, 30%, 41%)
CMYK
cmyk(30%, 0%, 8%, 59%)
Oklch
oklch(49.3% 0.039 177.3)

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

#7B8F77

Celadon · Gray · Olive Green

HEX
#7B8F77
RGB
rgb(123, 143, 119)
HSL
hsl(110, 10%, 51%)
HSB
hsb(110, 17%, 56%)
CMYK
cmyk(14%, 0%, 17%, 44%)
Oklch
oklch(62.7% 0.042 140.4)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#BAB78D

Fresh Green · Tan · Sunflower

HEX
#BAB78D
RGB
rgb(186, 183, 141)
HSL
hsl(56, 25%, 64%)
HSB
hsb(56, 24%, 73%)
CMYK
cmyk(0%, 2%, 24%, 27%)
Oklch
oklch(77.1% 0.057 104.2)

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

#F3DEA4

Goose Yellow · Wheat · Lemon Cream

HEX
#F3DEA4
RGB
rgb(243, 222, 164)
HSL
hsl(44, 77%, 80%)
HSB
hsb(44, 33%, 95%)
CMYK
cmyk(0%, 9%, 33%, 5%)
Oklch
oklch(90.4% 0.078 90.5)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

13424B
491C12

Analogous

124937
13424B
122549

Triadic

13424B
491240
404912

Split-Comp.

13424B
491225
493712

Tetradic

13424B
371249
491C12
254912

Contrast Matrix WCAG 2.1 Contrast

13424B
496961
7B8F77
BAB78D
F3DEA4
—
1.8
Fail
3.2
AA Large
5.4
AA
8.3
AAA
1.8
Fail
—
1.7
Fail
2.9
Fail
4.5
AA
3.2
AA Large
1.7
Fail
—
1.7
Fail
2.6
Fail
5.4
AA
2.9
Fail
1.7
Fail
—
1.5
Fail
8.3
AAA
4.5
AA
2.6
Fail
1.5
Fail
—
White BG
11.0AAA
6.0AA
3.5AA Large
2.0Fail
1.3Fail
Black BG
1.9Fail
3.5AA Large
6.0AA
10.2AAA
15.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

272849
575763
84847D
B9B997
EAEAB2

Deuteranopia

252148
555363
83817E
B9B99A
EBEDB5

Tritanopia

154747
4B6465
7C8182
BA9FA1
F2BDC0

Achromatopsia

353535
5F5F5F
868686
B3B3B3
DEDEDE

Shades & Tints Shades & Tints

#13424B

Dark
Light

#496961

Dark
Light

#7B8F77

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #13424b;
  --color-2: #496961;
  --color-3: #7b8f77;
  --color-4: #bab78d;
  --color-5: #f3dea4;
}

SCSS

$color-1: #13424b;
$color-2: #496961;
$color-3: #7b8f77;
$color-4: #bab78d;
$color-5: #f3dea4;

TAILWIND

colors: {
  'brand-1': '#13424b',
  'brand-2': '#496961',
  'brand-3': '#7b8f77',
  'brand-4': '#bab78d',
  'brand-5': '#f3dea4',
}

RGB Array

[19, 66, 75], [73, 105, 97], [123, 143, 119], [186, 183, 141], [243, 222, 164]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #13424B, #496961, #7B8F77, #BAB78D, #F3DEA4 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: #13424b; --color-2: #496961; --color-3: #7b8f77; --color-4: #bab78d; --color-5: #f3dea4. 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