← Back to Editor

#382A30 · #507371 · #709E8D · #99A681 · #ABA96D

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 Library

Color Details Color Details

#382A30

Dark Violet · DarkSlateGray · Raspberry

HEX
#382A30
RGB
rgb(56, 42, 48)
HSL
hsl(334, 14%, 19%)
HSB
hsb(334, 25%, 22%)
CMYK
cmyk(0%, 25%, 14%, 78%)
Oklch
oklch(30.3% 0.023 351.0)

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

#507371

Mineral Blue · DimGray · Mint Ice

HEX
#507371
RGB
rgb(80, 115, 113)
HSL
hsl(177, 18%, 38%)
HSB
hsb(177, 30%, 45%)
CMYK
cmyk(30%, 0%, 2%, 55%)
Oklch
oklch(52.8% 0.040 191.5)

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

#709E8D

Mineral Blue · CadetBlue · Olive Green

HEX
#709E8D
RGB
rgb(112, 158, 141)
HSL
hsl(158, 19%, 53%)
HSB
hsb(158, 29%, 62%)
CMYK
cmyk(29%, 0%, 11%, 38%)
Oklch
oklch(66.1% 0.056 169.7)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#99A681

Grass Green · DarkSeaGreen · Olive Green

HEX
#99A681
RGB
rgb(153, 166, 129)
HSL
hsl(81, 17%, 58%)
HSB
hsb(81, 22%, 65%)
CMYK
cmyk(8%, 0%, 22%, 35%)
Oklch
oklch(70.5% 0.054 123.5)

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

#ABA96D

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#ABA96D
RGB
rgb(171, 169, 109)
HSL
hsl(58, 27%, 55%)
HSB
hsb(58, 36%, 67%)
CMYK
cmyk(0%, 1%, 36%, 33%)
Oklch
oklch(72.2% 0.080 106.6)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

382A30
2A3731

Analogous

372A36
382A30
372B2A

Triadic

382A30
30372A
2A3037

Split-Comp.

382A30
2A372B
2A3637

Tetradic

382A30
36372A
2A3731
2B2A37

Contrast Matrix WCAG 2.1 Contrast

382A30
507371
709E8D
99A681
ABA96D
—
2.6
Fail
4.5
AA
5.3
AA
5.6
AA
2.6
Fail
—
1.7
Fail
2.0
Fail
2.1
Fail
4.5
AA
1.7
Fail
—
1.2
Fail
1.2
Fail
5.3
AA
2.0
Fail
1.2
Fail
—
1.1
Fail
5.6
AA
2.1
Fail
1.2
Fail
1.1
Fail
—
White BG
13.6AAA
5.2AA
3.0AA Large
2.6Fail
2.4Fail
Black BG
1.5Fail
4.0AA Large
7.0AA
8.1AAA
8.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

32322F
5F5F71
848491
9F9F8A
AAAA7C

Deuteranopia

33342E
5D5B72
817E92
9E9D8C
AAAA7F

Tritanopia

372D2D
527272
729495
9A9193
AB878A

Achromatopsia

2F2F2F
686868
8E8E8E
9E9E9E
A3A3A3

Shades & Tints Shades & Tints

#382A30

Dark
Light

#507371

Dark
Light

#709E8D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #382a30;
  --color-2: #507371;
  --color-3: #709e8d;
  --color-4: #99a681;
  --color-5: #aba96d;
}

SCSS

$color-1: #382a30;
$color-2: #507371;
$color-3: #709e8d;
$color-4: #99a681;
$color-5: #aba96d;

TAILWIND

colors: {
  'brand-1': '#382a30',
  'brand-2': '#507371',
  'brand-3': '#709e8d',
  'brand-4': '#99a681',
  'brand-5': '#aba96d',
}

RGB Array

[56, 42, 48], [80, 115, 113], [112, 158, 141], [153, 166, 129], [171, 169, 109]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #382A30, #507371, #709E8D, #99A681, #ABA96D is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. 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: #382a30; --color-2: #507371; --color-3: #709e8d; --color-4: #99a681; --color-5: #aba96d. 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 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