← Back to Editor

#45373E · #7B803C · #AEB08D · #CCCCC4 · #B08D9F

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#45373E

Dark Violet · DarkSlateGray · Raspberry

HEX
#45373E
RGB
rgb(69, 55, 62)
HSL
hsl(330, 11%, 24%)
HSB
hsb(330, 20%, 27%)
CMYK
cmyk(0%, 20%, 10%, 73%)
Oklch
oklch(35.4% 0.023 346.8)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

#7B803C

Autumn Sage · DarkOliveGreen · Honey Gold

HEX
#7B803C
RGB
rgb(123, 128, 60)
HSL
hsl(64, 36%, 37%)
HSB
hsb(64, 53%, 50%)
CMYK
cmyk(4%, 0%, 53%, 50%)
Oklch
oklch(58.0% 0.092 112.7)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#AEB08D

Fresh Green · DarkGray · Sunflower

HEX
#AEB08D
RGB
rgb(174, 176, 141)
HSL
hsl(63, 18%, 62%)
HSB
hsb(63, 20%, 69%)
CMYK
cmyk(1%, 0%, 20%, 31%)
Oklch
oklch(74.6% 0.048 110.2)

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

#CCCCC4

Silver Gray · Silver · Pearl Gray

HEX
#CCCCC4
RGB
rgb(204, 204, 196)
HSL
hsl(60, 7%, 78%)
HSB
hsb(60, 4%, 80%)
CMYK
cmyk(0%, 0%, 4%, 20%)
Oklch
oklch(84.3% 0.011 106.6)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#B08D9F

Mauve · DarkGray · Rose Pink

HEX
#B08D9F
RGB
rgb(176, 141, 159)
HSL
hsl(329, 18%, 62%)
HSB
hsb(329, 20%, 69%)
CMYK
cmyk(0%, 20%, 10%, 31%)
Oklch
oklch(68.1% 0.049 346.2)

Traditional「Mauve」· Paint「Rose Pink」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

45373E
36443D

Analogous

443644
45373E
443636

Triadic

45373E
3D4436
363D44

Split-Comp.

45373E
364436
364444

Tetradic

45373E
444436
36443D
363644

Contrast Matrix WCAG 2.1 Contrast

45373E
7B803C
AEB08D
CCCCC4
B08D9F
—
2.7
Fail
5.0
AA
7.0
AA
3.8
AA Large
2.7
Fail
—
1.9
Fail
2.6
Fail
1.4
Fail
5.0
AA
1.9
Fail
—
1.4
Fail
1.3
Fail
7.0
AA
2.6
Fail
1.4
Fail
—
1.8
Fail
3.8
AA Large
1.4
Fail
1.3
Fail
1.8
Fail
—
White BG
11.2AAA
4.2AA Large
2.2Fail
1.6Fail
2.9Fail
Black BG
1.9Fail
5.0AA
9.4AAA
13.0AAA
7.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3F3F3C
7D7D4C
AFAF95
CCCCC6
A1A19B

Deuteranopia

40413C
7D7D50
AFAF98
CCCCC6
A3A69A

Tritanopia

443B3B
7B595C
AE9C9E
CCC7C8
AE9796

Achromatopsia

3C3C3C
777777
ABABAB
CBCBCB
9A9A9A

Shades & Tints Shades & Tints

#45373E

Dark
Light

#7B803C

Dark
Light

#AEB08D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #45373e;
  --color-2: #7b803c;
  --color-3: #aeb08d;
  --color-4: #ccccc4;
  --color-5: #b08d9f;
}

SCSS

$color-1: #45373e;
$color-2: #7b803c;
$color-3: #aeb08d;
$color-4: #ccccc4;
$color-5: #b08d9f;

TAILWIND

colors: {
  'brand-1': '#45373e',
  'brand-2': '#7b803c',
  'brand-3': '#aeb08d',
  'brand-4': '#ccccc4',
  'brand-5': '#b08d9f',
}

RGB Array

[69, 55, 62], [123, 128, 60], [174, 176, 141], [204, 204, 196], [176, 141, 159]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #45373E, #7B803C, #AEB08D, #CCCCC4, #B08D9F 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: #45373e; --color-2: #7b803c; --color-3: #aeb08d; --color-4: #ccccc4; --color-5: #b08d9f. 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