← Back to Editor

#333331 · #2C736D · #53A67C · #A5A17E · #CEA97F

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 LibraryData Visualization

Color Details Color Details

#333331

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#333331
RGB
rgb(51, 51, 49)
HSL
hsl(60, 2%, 20%)
HSB
hsb(60, 4%, 20%)
CMYK
cmyk(0%, 0%, 4%, 80%)
Oklch
oklch(32.0% 0.003 106.6)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#2C736D

Mineral Blue · SeaGreen · Mint Ice

HEX
#2C736D
RGB
rgb(44, 115, 109)
HSL
hsl(175, 45%, 31%)
HSB
hsb(175, 62%, 45%)
CMYK
cmyk(62%, 0%, 5%, 55%)
Oklch
oklch(50.9% 0.071 187.5)

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

#53A67C

Mineral Blue · MediumSeaGreen · Olive Green

HEX
#53A67C
RGB
rgb(83, 166, 124)
HSL
hsl(150, 33%, 49%)
HSB
hsb(150, 50%, 65%)
CMYK
cmyk(50%, 0%, 25%, 35%)
Oklch
oklch(66.1% 0.104 159.6)

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

#A5A17E

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#A5A17E
RGB
rgb(165, 161, 126)
HSL
hsl(54, 18%, 57%)
HSB
hsb(54, 24%, 65%)
CMYK
cmyk(0%, 2%, 24%, 35%)
Oklch
oklch(70.3% 0.049 102.1)

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

#CEA97F

Ginger · Tan · Warm Sun

HEX
#CEA97F
RGB
rgb(206, 169, 127)
HSL
hsl(32, 45%, 65%)
HSB
hsb(32, 38%, 81%)
CMYK
cmyk(0%, 18%, 38%, 19%)
Oklch
oklch(75.8% 0.071 70.0)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

333331
323234

Analogous

343332
333331
333432

Triadic

333331
323434
343234

Split-Comp.

333331
323334
333234

Tetradic

333331
323433
323234
343233

Contrast Matrix WCAG 2.1 Contrast

333331
2C736D
53A67C
A5A17E
CEA97F
—
2.3
Fail
4.3
AA Large
4.8
AA
5.8
AA
2.3
Fail
—
1.9
Fail
2.1
Fail
2.5
Fail
4.3
AA Large
1.9
Fail
—
1.1
Fail
1.4
Fail
4.8
AA
2.1
Fail
1.1
Fail
—
1.2
Fail
5.8
AA
2.5
Fail
1.4
Fail
1.2
Fail
—
White BG
12.7AAA
5.6AA
3.0Fail
2.6Fail
2.2Fail
Black BG
1.7Fail
3.8AA Large
7.1AAA
8.0AAA
9.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

333331
4B4B6E
777886
A3A386
BEBE89

Deuteranopia

333332
47416F
726C89
A4A489
C0C38C

Tritanopia

333232
307070
578E90
A58D8F
CC9193

Achromatopsia

333333
5D5D5D
888888
9E9E9E
AFAFAF

Shades & Tints Shades & Tints

#333331

Dark
Light

#2C736D

Dark
Light

#53A67C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #333331;
  --color-2: #2c736d;
  --color-3: #53a67c;
  --color-4: #a5a17e;
  --color-5: #cea97f;
}

SCSS

$color-1: #333331;
$color-2: #2c736d;
$color-3: #53a67c;
$color-4: #a5a17e;
$color-5: #cea97f;

TAILWIND

colors: {
  'brand-1': '#333331',
  'brand-2': '#2c736d',
  'brand-3': '#53a67c',
  'brand-4': '#a5a17e',
  'brand-5': '#cea97f',
}

RGB Array

[51, 51, 49], [44, 115, 109], [83, 166, 124], [165, 161, 126], [206, 169, 127]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #333331, #2C736D, #53A67C, #A5A17E, #CEA97F 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: #333331; --color-2: #2c736d; --color-3: #53a67c; --color-4: #a5a17e; --color-5: #cea97f. 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