#9D3326 + #9E542D + #66525B + #4D5369 + #283349 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#9D3326

Vermilion · Brown · Wine Red

HEX

#9D3326

RGB

rgb(157, 51, 38)

HSL

hsl(7, 61%, 38%)

HSB

hsb(7, 76%, 62%)

CMYK

cmyk(0%, 68%, 76%, 38%)

Oklch

oklch(47.6% 0.143 30.2)

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

#9E542D

Tangerine · Sienna · Amber Brown

HEX

#9E542D

RGB

rgb(158, 84, 45)

HSL

hsl(21, 56%, 40%)

HSB

hsb(21, 72%, 62%)

CMYK

cmyk(0%, 47%, 72%, 38%)

Oklch

oklch(52.7% 0.111 46.8)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#66525B

Dark Violet · DimGray · Camellia

HEX

#66525B

RGB

rgb(102, 82, 91)

HSL

hsl(333, 11%, 36%)

HSB

hsb(333, 20%, 40%)

CMYK

cmyk(0%, 20%, 11%, 60%)

Oklch

oklch(46.2% 0.030 349.5)

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

#4D5369

Indigo · DimGray · Prussian Blue

HEX

#4D5369

RGB

rgb(77, 83, 105)

HSL

hsl(227, 15%, 36%)

HSB

hsb(227, 27%, 41%)

CMYK

cmyk(27%, 21%, 0%, 59%)

Oklch

oklch(44.6% 0.037 272.9)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#283349

Indigo · DarkSlateGray · Prussian Blue

HEX

#283349

RGB

rgb(40, 51, 73)

HSL

hsl(220, 29%, 22%)

HSB

hsb(220, 45%, 29%)

CMYK

cmyk(45%, 30%, 0%, 71%)

Oklch

oklch(32.1% 0.042 263.7)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9D3326

268E9C

Analogous

9C2653

9D3326

9C6F26

Triadic

9D3326

269C34

34269C

Split-Comp.

9D3326

269C6F

26539C

Tetradic

9D3326

539C26

268E9C

6F269C

Contrast Matrix WCAG 2.1 Contrast

9D3326	9E542D	66525B	4D5369	283349
—	1.3 Fail	1.0 Fail	1.1 Fail	1.8 Fail
1.3 Fail	—	1.3 Fail	1.4 Fail	2.3 Fail
1.0 Fail	1.3 Fail	—	1.1 Fail	1.8 Fail
1.1 Fail	1.4 Fail	1.1 Fail	—	1.7 Fail
1.8 Fail	2.3 Fail	1.8 Fail	1.7 Fail	—

White BG

7.2AAA

5.6AA

7.2AAA

7.6AAA

12.7AAA

Black BG

2.9Fail

3.8AA Large

2.9Fail

2.8Fail

1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

6F6E29

7E7D36

5D5D59

505064

2D2D44

Deuteranopia

757D2A

828839

5F6058

4F4F62

2C2B42

Tritanopia

982C2C

9A3E40

655757

4D5F5F

293F3F

Achromatopsia

515151

666666

595959

545454

323232

Shades & Tints Shades & Tints

#9D3326

Dark

Light

#9E542D

Dark

Light

#66525B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9d3326;
  --color-2: #9e542d;
  --color-3: #66525b;
  --color-4: #4d5369;
  --color-5: #283349;
}

SCSS

$color-1: #9d3326;
$color-2: #9e542d;
$color-3: #66525b;
$color-4: #4d5369;
$color-5: #283349;

TAILWIND

colors: {
  'brand-1': '#9d3326',
  'brand-2': '#9e542d',
  'brand-3': '#66525b',
  'brand-4': '#4d5369',
  'brand-5': '#283349',
}

RGB Array

[157, 51, 38], [158, 84, 45], [102, 82, 91], [77, 83, 105], [40, 51, 73]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9D3326, #9E542D, #66525B, #4D5369, #283349 is ideal for: tech websites, dark mode UIs, game UIs. 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: #9d3326; --color-2: #9e542d; --color-3: #66525b; --color-4: #4d5369; --color-5: #283349. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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