← Back to Editor

#CCCA97 · #998556 · #98CFEA · #DCAF46 · #ED8B2C

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 MenuPoster

Color Details Color Details

#CCCA97

Fresh Green · Tan · Sunflower

HEX
#CCCA97
RGB
rgb(204, 202, 151)
HSL
hsl(58, 34%, 70%)
HSB
hsb(58, 26%, 80%)
CMYK
cmyk(0%, 1%, 26%, 20%)
Oklch
oklch(82.8% 0.068 105.9)

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

#998556

Ochre · Gray · Honey Gold

HEX
#998556
RGB
rgb(153, 133, 86)
HSL
hsl(42, 28%, 47%)
HSB
hsb(42, 44%, 60%)
CMYK
cmyk(0%, 13%, 44%, 40%)
Oklch
oklch(62.4% 0.069 87.4)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#98CFEA

Sky Blue · SkyBlue · Cobalt Blue

HEX
#98CFEA
RGB
rgb(152, 207, 234)
HSL
hsl(200, 66%, 76%)
HSB
hsb(200, 35%, 92%)
CMYK
cmyk(35%, 12%, 0%, 8%)
Oklch
oklch(82.6% 0.068 229.8)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

#DCAF46

Ginger · SandyBrown · Sunflower

HEX
#DCAF46
RGB
rgb(220, 175, 70)
HSL
hsl(42, 68%, 57%)
HSB
hsb(42, 68%, 86%)
CMYK
cmyk(0%, 20%, 68%, 14%)
Oklch
oklch(77.6% 0.131 85.3)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#ED8B2C

Ginger · GoldenRod · Warm Sun

HEX
#ED8B2C
RGB
rgb(237, 139, 44)
HSL
hsl(30, 84%, 55%)
HSB
hsb(30, 81%, 93%)
CMYK
cmyk(0%, 41%, 81%, 7%)
Oklch
oklch(72.7% 0.156 59.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCCA97
989ACD

Analogous

CDB198
CCCA97
B4CD98

Triadic

CCCA97
98CDCB
CB98CD

Split-Comp.

CCCA97
98B4CD
B198CD

Tetradic

CCCA97
98CDB1
989ACD
CD98B4

Contrast Matrix WCAG 2.1 Contrast

CCCA97
998556
98CFEA
DCAF46
ED8B2C
—
2.1
Fail
1.0
Fail
1.2
Fail
1.5
Fail
2.1
Fail
—
2.1
Fail
1.8
Fail
1.4
Fail
1.0
Fail
2.1
Fail
—
1.2
Fail
1.5
Fail
1.2
Fail
1.8
Fail
1.2
Fail
—
1.2
Fail
1.5
Fail
1.4
Fail
1.5
Fail
1.2
Fail
—
White BG
1.7Fail
3.6AA Large
1.7Fail
2.0Fail
2.5Fail
Black BG
12.5AAA
5.8AA
12.4AAA
10.3AAA
8.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CBCBA3
909061
B0B0E3
C9C85F
C3C243

Deuteranopia

CBCBA6
929364
ADA9E2
CBCF66
C8D049

Tritanopia

CCADAF
986A6C
9BDEDD
DA7378
E85559

Achromatopsia

C5C5C5
868686
C2C2C2
B0B0B0
9D9D9D

Shades & Tints Shades & Tints

#CCCA97

Dark
Light

#998556

Dark
Light

#98CFEA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccca97;
  --color-2: #998556;
  --color-3: #98cfea;
  --color-4: #dcaf46;
  --color-5: #ed8b2c;
}

SCSS

$color-1: #ccca97;
$color-2: #998556;
$color-3: #98cfea;
$color-4: #dcaf46;
$color-5: #ed8b2c;

TAILWIND

colors: {
  'brand-1': '#ccca97',
  'brand-2': '#998556',
  'brand-3': '#98cfea',
  'brand-4': '#dcaf46',
  'brand-5': '#ed8b2c',
}

RGB Array

[204, 202, 151], [153, 133, 86], [152, 207, 234], [220, 175, 70], [237, 139, 44]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This vintage-style palette of #CCCA97, #998556, #98CFEA, #DCAF46, #ED8B2C is ideal for: corporate websites, product showcases, portfolios. 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: #ccca97; --color-2: #998556; --color-3: #98cfea; --color-4: #dcaf46; --color-5: #ed8b2c. 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. 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. 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