← Back to Editor

#993B28 · #B38686 · #CCB89B · #6C7580 · #333E40

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

#993B28

Crimson · Brown · Wine Red

HEX
#993B28
RGB
rgb(153, 59, 40)
HSL
hsl(10, 59%, 38%)
HSB
hsb(10, 74%, 60%)
CMYK
cmyk(0%, 61%, 74%, 40%)
Oklch
oklch(48.0% 0.130 33.2)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#B38686

Peach Pink · DarkGray · Coral Red

HEX
#B38686
RGB
rgb(179, 134, 134)
HSL
hsl(0, 23%, 61%)
HSB
hsb(0, 25%, 70%)
CMYK
cmyk(0%, 25%, 25%, 30%)
Oklch
oklch(66.4% 0.055 18.7)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#CCB89B

Ginger · Tan · Warm Sun

HEX
#CCB89B
RGB
rgb(204, 184, 155)
HSL
hsl(36, 32%, 70%)
HSB
hsb(36, 24%, 80%)
CMYK
cmyk(0%, 10%, 24%, 20%)
Oklch
oklch(79.2% 0.046 77.1)

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

#6C7580

Indigo · SlateGray · Warm Gray

HEX
#6C7580
RGB
rgb(108, 117, 128)
HSL
hsl(213, 8%, 46%)
HSB
hsb(213, 16%, 50%)
CMYK
cmyk(16%, 9%, 0%, 50%)
Oklch
oklch(55.9% 0.020 253.4)

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

#333E40

Slate Blue · DarkSlateGray · Peacock Green

HEX
#333E40
RGB
rgb(51, 62, 64)
HSL
hsl(189, 11%, 23%)
HSB
hsb(189, 20%, 25%)
CMYK
cmyk(20%, 3%, 0%, 75%)
Oklch
oklch(35.5% 0.015 209.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

993B28
28879A

Analogous

9A284E
993B28
9A7428

Triadic

993B28
289A3B
3B289A

Split-Comp.

993B28
289A74
284E9A

Tetradic

993B28
4E9A28
28879A
74289A

Contrast Matrix WCAG 2.1 Contrast

993B28
B38686
CCB89B
6C7580
333E40
—
2.2
Fail
3.6
AA Large
1.5
Fail
1.6
Fail
2.2
Fail
—
1.6
Fail
1.5
Fail
3.5
AA Large
3.6
AA Large
1.6
Fail
—
2.4
Fail
5.7
AA
1.5
Fail
1.5
Fail
2.4
Fail
—
2.4
Fail
1.6
Fail
3.5
AA Large
5.7
AA
2.4
Fail
—
White BG
7.0AA
3.1AA Large
1.9Fail
4.7AA
11.0AAA
Black BG
3.0AA Large
6.7AA
10.9AAA
4.5AA Large
1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

706F2D
A09F86
C3C3A2
70707D
383840

Deuteranopia

767D2E
A2A686
C5C6A4
6F6F7D
37363F

Tritanopia

943031
B18686
CBA8A9
6C7B7B
343F3F

Achromatopsia

555555
939393
BBBBBB
747474
3B3B3B

Shades & Tints Shades & Tints

#993B28

Dark
Light

#B38686

Dark
Light

#CCB89B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #993b28;
  --color-2: #b38686;
  --color-3: #ccb89b;
  --color-4: #6c7580;
  --color-5: #333e40;
}

SCSS

$color-1: #993b28;
$color-2: #b38686;
$color-3: #ccb89b;
$color-4: #6c7580;
$color-5: #333e40;

TAILWIND

colors: {
  'brand-1': '#993b28',
  'brand-2': '#b38686',
  'brand-3': '#ccb89b',
  'brand-4': '#6c7580',
  'brand-5': '#333e40',
}

RGB Array

[153, 59, 40], [179, 134, 134], [204, 184, 155], [108, 117, 128], [51, 62, 64]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #993B28, #B38686, #CCB89B, #6C7580, #333E40 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: #993b28; --color-2: #b38686; --color-3: #ccb89b; --color-4: #6c7580; --color-5: #333e40. 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