← Back to Editor

#3D494A · #4B665E · #699672 · #9AC482 · #C4D684

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#3D494A

Slate Blue · DarkSlateGray · Mint Ice

HEX
#3D494A
RGB
rgb(61, 73, 74)
HSL
hsl(185, 10%, 26%)
HSB
hsb(185, 18%, 29%)
CMYK
cmyk(18%, 1%, 0%, 71%)
Oklch
oklch(39.5% 0.016 202.7)

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

#4B665E

Mineral Blue · DimGray · Mint Ice

HEX
#4B665E
RGB
rgb(75, 102, 94)
HSL
hsl(162, 15%, 35%)
HSB
hsb(162, 26%, 40%)
CMYK
cmyk(26%, 0%, 8%, 60%)
Oklch
oklch(48.6% 0.034 174.6)

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

#699672

Celadon · Gray · Olive Green

HEX
#699672
RGB
rgb(105, 150, 114)
HSL
hsl(132, 18%, 50%)
HSB
hsb(132, 30%, 59%)
CMYK
cmyk(30%, 0%, 24%, 41%)
Oklch
oklch(63.0% 0.073 150.1)

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

#9AC482

Celadon · DarkSeaGreen · Apple Green

HEX
#9AC482
RGB
rgb(154, 196, 130)
HSL
hsl(98, 36%, 64%)
HSB
hsb(98, 34%, 77%)
CMYK
cmyk(21%, 0%, 34%, 23%)
Oklch
oklch(77.4% 0.101 134.6)

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

#C4D684

Willow Green · Tan · Apple Green

HEX
#C4D684
RGB
rgb(196, 214, 132)
HSL
hsl(73, 50%, 68%)
HSB
hsb(73, 38%, 84%)
CMYK
cmyk(8%, 0%, 38%, 16%)
Oklch
oklch(84.4% 0.108 118.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3D494A
493D3C

Analogous

3C4943
3D494A
3C4149

Triadic

3D494A
493C48
48493C

Split-Comp.

3D494A
493C41
49433C

Tetradic

3D494A
433C49
493D3C
41493C

Contrast Matrix WCAG 2.1 Contrast

3D494A
4B665E
699672
9AC482
C4D684
—
1.5
Fail
2.8
Fail
4.7
AA
5.9
AA
1.5
Fail
—
1.8
Fail
3.2
AA Large
4.0
AA Large
2.8
Fail
1.8
Fail
—
1.7
Fail
2.1
Fail
4.7
AA
3.2
AA Large
1.7
Fail
—
1.3
Fail
5.9
AA
4.0
AA Large
2.1
Fail
1.3
Fail
—
White BG
9.3AAA
6.2AA
3.4AA Large
2.0Fail
1.6Fail
Black BG
2.3Fail
3.4AA Large
6.2AA
10.6AAA
13.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

42424A
575760
7C7D7B
ACAD92
CCCC98

Deuteranopia

42414A
555360
7A777D
AAA796
CBC99D

Tritanopia

3E4A4A
4C6162
6B8283
9C9FA1
C5A8AB

Achromatopsia

464646
5D5D5D
848484
B0B0B0
C7C7C7

Shades & Tints Shades & Tints

#3D494A

Dark
Light

#4B665E

Dark
Light

#699672

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3d494a;
  --color-2: #4b665e;
  --color-3: #699672;
  --color-4: #9ac482;
  --color-5: #c4d684;
}

SCSS

$color-1: #3d494a;
$color-2: #4b665e;
$color-3: #699672;
$color-4: #9ac482;
$color-5: #c4d684;

TAILWIND

colors: {
  'brand-1': '#3d494a',
  'brand-2': '#4b665e',
  'brand-3': '#699672',
  'brand-4': '#9ac482',
  'brand-5': '#c4d684',
}

RGB Array

[61, 73, 74], [75, 102, 94], [105, 150, 114], [154, 196, 130], [196, 214, 132]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3D494A, #4B665E, #699672, #9AC482, #C4D684 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: #3d494a; --color-2: #4b665e; --color-3: #699672; --color-4: #9ac482; --color-5: #c4d684. 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