← Back to Editor

#033032 · #7D8C87 · #ABB199 · #D8E5AF · #E7FAB2

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#033032

Lake Blue · DarkSlateGray · Peacock Green

HEX
#033032
RGB
rgb(3, 48, 50)
HSL
hsl(183, 89%, 10%)
HSB
hsb(183, 94%, 20%)
CMYK
cmyk(94%, 4%, 0%, 80%)
Oklch
oklch(28.2% 0.046 199.5)

Traditional「Lake Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#7D8C87

Ash · Gray · Warm Gray

HEX
#7D8C87
RGB
rgb(125, 140, 135)
HSL
hsl(160, 6%, 52%)
HSB
hsb(160, 11%, 55%)
CMYK
cmyk(11%, 0%, 4%, 45%)
Oklch
oklch(62.6% 0.019 173.7)

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

#ABB199

Willow Green · DarkGray · Apple Green

HEX
#ABB199
RGB
rgb(171, 177, 153)
HSL
hsl(75, 13%, 65%)
HSB
hsb(75, 14%, 69%)
CMYK
cmyk(3%, 0%, 14%, 31%)
Oklch
oklch(74.9% 0.034 118.6)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#D8E5AF

Willow Green · Wheat · Apple Green

HEX
#D8E5AF
RGB
rgb(216, 229, 175)
HSL
hsl(74, 51%, 79%)
HSB
hsb(74, 24%, 90%)
CMYK
cmyk(6%, 0%, 24%, 10%)
Oklch
oklch(89.9% 0.072 118.9)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#E7FAB2

Willow Green · Wheat · Mint Green

HEX
#E7FAB2
RGB
rgb(231, 250, 178)
HSL
hsl(76, 88%, 84%)
HSB
hsb(76, 29%, 98%)
CMYK
cmyk(8%, 0%, 29%, 2%)
Oklch
oklch(95.4% 0.095 120.2)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

033032
300503

Analogous

03301C
033032
031730

Triadic

033032
30032E
2E3003

Split-Comp.

033032
300317
301C03

Tetradic

033032
1C0330
300503
173003

Contrast Matrix WCAG 2.1 Contrast

033032
7D8C87
ABB199
D8E5AF
E7FAB2
—
4.1
AA Large
6.4
AA
10.7
AAA
12.7
AAA
4.1
AA Large
—
1.6
Fail
2.6
Fail
3.1
AA Large
6.4
AA
1.6
Fail
—
1.7
Fail
2.0
Fail
10.7
AAA
2.6
Fail
1.7
Fail
—
1.2
Fail
12.7
AAA
3.1
AA Large
2.0
Fail
1.2
Fail
—
White BG
14.3AAA
3.5AA Large
2.2Fail
1.3Fail
1.1Fail
Black BG
1.5Fail
6.0AA
9.5AAA
15.7AAA
18.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

161732
838488
AEAE9F
DEDEBC
EFEFC3

Deuteranopia

141131
838289
ADADA0
DDDCBF
EEEDC8

Tritanopia

053131
7E8989
ABA3A4
D9C6C9
E8D1D4

Achromatopsia

232323
878787
ACACAC
DBDBDB
ECECEC

Shades & Tints Shades & Tints

#033032

Dark
Light

#7D8C87

Dark
Light

#ABB199

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #033032;
  --color-2: #7d8c87;
  --color-3: #abb199;
  --color-4: #d8e5af;
  --color-5: #e7fab2;
}

SCSS

$color-1: #033032;
$color-2: #7d8c87;
$color-3: #abb199;
$color-4: #d8e5af;
$color-5: #e7fab2;

TAILWIND

colors: {
  'brand-1': '#033032',
  'brand-2': '#7d8c87',
  'brand-3': '#abb199',
  'brand-4': '#d8e5af',
  'brand-5': '#e7fab2',
}

RGB Array

[3, 48, 50], [125, 140, 135], [171, 177, 153], [216, 229, 175], [231, 250, 178]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #033032, #7D8C87, #ABB199, #D8E5AF, #E7FAB2 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #033032; --color-2: #7d8c87; --color-3: #abb199; --color-4: #d8e5af; --color-5: #e7fab2. 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. 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