← Back to Editor

#243757 · #3A5F6F · #DAD5B7 · #C2B79B · #665E52

vintage

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

NostalgicClassicTimelessWarmCool

Industry INDUSTRY

CafePublishingCraft

UI Context UI CONTEXT

StorefrontDigital MenuPosterData Visualization

Color Details Color Details

#243757

Indigo · DarkSlateGray · Prussian Blue

HEX
#243757
RGB
rgb(36, 55, 87)
HSL
hsl(218, 41%, 24%)
HSB
hsb(218, 59%, 34%)
CMYK
cmyk(59%, 37%, 0%, 66%)
Oklch
oklch(33.7% 0.062 260.4)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#3A5F6F

Slate Blue · DarkSlateGray · Mint Ice

HEX
#3A5F6F
RGB
rgb(58, 95, 111)
HSL
hsl(198, 31%, 33%)
HSB
hsb(198, 48%, 44%)
CMYK
cmyk(48%, 14%, 0%, 56%)
Oklch
oklch(46.4% 0.050 227.3)

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

#DAD5B7

Fresh Green · Wheat · Lemon Cream

HEX
#DAD5B7
RGB
rgb(218, 213, 183)
HSL
hsl(51, 32%, 79%)
HSB
hsb(51, 16%, 85%)
CMYK
cmyk(0%, 2%, 16%, 15%)
Oklch
oklch(86.9% 0.040 99.4)

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

#C2B79B

Ginger · Tan · Sunflower

HEX
#C2B79B
RGB
rgb(194, 183, 155)
HSL
hsl(43, 24%, 68%)
HSB
hsb(43, 20%, 76%)
CMYK
cmyk(0%, 6%, 20%, 24%)
Oklch
oklch(78.1% 0.040 89.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#665E52

Ochre · DimGray · Amber Brown

HEX
#665E52
RGB
rgb(102, 94, 82)
HSL
hsl(36, 11%, 36%)
HSB
hsb(36, 20%, 40%)
CMYK
cmyk(0%, 8%, 20%, 60%)
Oklch
oklch(48.6% 0.021 78.1)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

243757
564424

Analogous

245056
243757
2B2456

Triadic

243757
562437
375624

Split-Comp.

243757
562B24
505624

Tetradic

243757
562450
564424
24562B

Contrast Matrix WCAG 2.1 Contrast

243757
3A5F6F
DAD5B7
C2B79B
665E52
—
1.7
Fail
8.1
AAA
6.0
AA
1.9
Fail
1.7
Fail
—
4.7
AA
3.5
AA Large
1.1
Fail
8.1
AAA
4.7
AA
—
1.3
Fail
4.3
AA Large
6.0
AA
3.5
AA Large
1.3
Fail
—
3.2
AA Large
1.9
Fail
1.1
Fail
4.3
AA Large
3.2
AA Large
—
White BG
11.9AAA
6.9AA
1.5Fail
2.0Fail
6.4AA
Black BG
1.8Fail
3.0AA Large
14.2AAA
10.5AAA
3.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

2C2C4F
4A4A6B
D8D8BE
BDBDA2
636255

Deuteranopia

2B2A4D
48456A
D8D9C0
BEBFA3
636456

Tritanopia

254948
3C6867
DAC4C5
C1A7A8
665758

Achromatopsia

353535
565656
D3D3D3
B7B7B7
5F5F5F

Shades & Tints Shades & Tints

#243757

Dark
Light

#3A5F6F

Dark
Light

#DAD5B7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #243757;
  --color-2: #3a5f6f;
  --color-3: #dad5b7;
  --color-4: #c2b79b;
  --color-5: #665e52;
}

SCSS

$color-1: #243757;
$color-2: #3a5f6f;
$color-3: #dad5b7;
$color-4: #c2b79b;
$color-5: #665e52;

TAILWIND

colors: {
  'brand-1': '#243757',
  'brand-2': '#3a5f6f',
  'brand-3': '#dad5b7',
  'brand-4': '#c2b79b',
  'brand-5': '#665e52',
}

RGB Array

[36, 55, 87], [58, 95, 111], [218, 213, 183], [194, 183, 155], [102, 94, 82]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #243757, #3A5F6F, #DAD5B7, #C2B79B, #665E52 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: #243757; --color-2: #3a5f6f; --color-3: #dad5b7; --color-4: #c2b79b; --color-5: #665e52. 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 vintage-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