← Back to Editor

#395A5F · #746B65 · #AF7C6B · #C4AE85 · #D9DF9F

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

#395A5F

Slate Blue · DarkSlateGray · Mint Ice

HEX
#395A5F
RGB
rgb(57, 90, 95)
HSL
hsl(188, 25%, 30%)
HSB
hsb(188, 40%, 37%)
CMYK
cmyk(40%, 5%, 0%, 63%)
Oklch
oklch(44.4% 0.039 207.9)

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

#746B65

Ink Gray · DimGray · Warm Gray

HEX
#746B65
RGB
rgb(116, 107, 101)
HSL
hsl(24, 7%, 43%)
HSB
hsb(24, 13%, 45%)
CMYK
cmyk(0%, 8%, 13%, 55%)
Oklch
oklch(53.4% 0.015 56.1)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#AF7C6B

Tangerine · Gray · Warm Sun

HEX
#AF7C6B
RGB
rgb(175, 124, 107)
HSL
hsl(15, 30%, 55%)
HSB
hsb(15, 39%, 69%)
CMYK
cmyk(0%, 29%, 39%, 31%)
Oklch
oklch(63.3% 0.069 39.2)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#C4AE85

Ginger · Tan · Warm Sun

HEX
#C4AE85
RGB
rgb(196, 174, 133)
HSL
hsl(39, 35%, 65%)
HSB
hsb(39, 32%, 77%)
CMYK
cmyk(0%, 11%, 32%, 23%)
Oklch
oklch(76.0% 0.061 82.9)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#D9DF9F

Fresh Green · Khaki · Sunflower

HEX
#D9DF9F
RGB
rgb(217, 223, 159)
HSL
hsl(66, 50%, 75%)
HSB
hsb(66, 29%, 87%)
CMYK
cmyk(3%, 0%, 29%, 13%)
Oklch
oklch(88.4% 0.083 112.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

395A5F
603E39

Analogous

396052
395A5F
394760

Triadic

395A5F
60395B
5B6039

Split-Comp.

395A5F
603947
605239

Tetradic

395A5F
523960
603E39
476039

Contrast Matrix WCAG 2.1 Contrast

395A5F
746B65
AF7C6B
C4AE85
D9DF9F
—
1.4
Fail
2.1
Fail
3.5
AA Large
5.4
AA
1.4
Fail
—
1.5
Fail
2.4
Fail
3.7
AA Large
2.1
Fail
1.5
Fail
—
1.6
Fail
2.5
Fail
3.5
AA Large
2.4
Fail
1.6
Fail
—
1.5
Fail
5.4
AA
3.7
AA Large
2.5
Fail
1.5
Fail
—
White BG
7.5AAA
5.2AA
3.5AA Large
2.2Fail
1.4Fail
Black BG
2.8Fail
4.0AA Large
5.9AA
9.7AAA
15.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

47485E
707066
99986F
BABA8F
DCDCAE

Deuteranopia

45435E
717167
9CA070
BCBD91
DBDBB2

Tritanopia

3B5D5D
746868
AC7273
C39798
D9BBBD

Achromatopsia

515151
6D6D6D
898989
B0B0B0
D6D6D6

Shades & Tints Shades & Tints

#395A5F

Dark
Light

#746B65

Dark
Light

#AF7C6B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #395a5f;
  --color-2: #746b65;
  --color-3: #af7c6b;
  --color-4: #c4ae85;
  --color-5: #d9df9f;
}

SCSS

$color-1: #395a5f;
$color-2: #746b65;
$color-3: #af7c6b;
$color-4: #c4ae85;
$color-5: #d9df9f;

TAILWIND

colors: {
  'brand-1': '#395a5f',
  'brand-2': '#746b65',
  'brand-3': '#af7c6b',
  'brand-4': '#c4ae85',
  'brand-5': '#d9df9f',
}

RGB Array

[57, 90, 95], [116, 107, 101], [175, 124, 107], [196, 174, 133], [217, 223, 159]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #395A5F, #746B65, #AF7C6B, #C4AE85, #D9DF9F 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: #395a5f; --color-2: #746b65; --color-3: #af7c6b; --color-4: #c4ae85; --color-5: #d9df9f. 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