← Back to Editor

#401D23 · #66202E · #912F39 · #BD334C · #ADB86D

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#401D23

Crimson · DarkSlateGray · Deep Berry

HEX
#401D23
RGB
rgb(64, 29, 35)
HSL
hsl(350, 38%, 18%)
HSB
hsb(350, 55%, 25%)
CMYK
cmyk(0%, 55%, 45%, 75%)
Oklch
oklch(28.2% 0.055 10.3)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#66202E

Crimson · Maroon · Wine Red

HEX
#66202E
RGB
rgb(102, 32, 46)
HSL
hsl(348, 52%, 26%)
HSB
hsb(348, 69%, 40%)
CMYK
cmyk(0%, 69%, 55%, 60%)
Oklch
oklch(35.6% 0.101 11.9)

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

#912F39

Crimson · Brown · Wine Red

HEX
#912F39
RGB
rgb(145, 47, 57)
HSL
hsl(354, 51%, 38%)
HSB
hsb(354, 68%, 57%)
CMYK
cmyk(0%, 68%, 61%, 43%)
Oklch
oklch(45.3% 0.132 18.3)

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

#BD334C

Crimson · Brown · Passion Red

HEX
#BD334C
RGB
rgb(189, 51, 76)
HSL
hsl(349, 58%, 47%)
HSB
hsb(349, 73%, 74%)
CMYK
cmyk(0%, 73%, 60%, 26%)
Oklch
oklch(53.8% 0.174 15.2)

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

#ADB86D

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#ADB86D
RGB
rgb(173, 184, 109)
HSL
hsl(69, 35%, 57%)
HSB
hsb(69, 41%, 72%)
CMYK
cmyk(6%, 0%, 41%, 28%)
Oklch
oklch(75.7% 0.099 115.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

401D23
1C3F3A

Analogous

3F1C34
401D23
3F281C

Triadic

401D23
223F1C
1C223F

Split-Comp.

401D23
1C3F28
1C343F

Tetradic

401D23
343F1C
1C3F3A
281C3F

Contrast Matrix WCAG 2.1 Contrast

401D23
66202E
912F39
BD334C
ADB86D
—
1.3
Fail
1.9
Fail
2.6
Fail
6.9
AA
1.3
Fail
—
1.5
Fail
2.1
Fail
5.4
AA
1.9
Fail
1.5
Fail
—
1.4
Fail
3.7
AA Large
2.6
Fail
2.1
Fail
1.4
Fail
—
2.6
Fail
6.9
AA
5.4
AA
3.7
AA Large
2.6
Fail
—
White BG
14.8AAA
11.6AAA
7.9AAA
5.6AA
2.1Fail
Black BG
1.4Fail
1.8Fail
2.7Fail
3.7AA Large
9.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

313122
48472B
676637
818046
B2B27F

Deuteranopia

333621
4C512A
6C7436
899445
B1B084

Tritanopia

3E2020
622827
8C3534
B64140
AE8D91

Achromatopsia

282828
373737
4D4D4D
5F5F5F
ACACAC

Shades & Tints Shades & Tints

#401D23

Dark
Light

#66202E

Dark
Light

#912F39

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #401d23;
  --color-2: #66202e;
  --color-3: #912f39;
  --color-4: #bd334c;
  --color-5: #adb86d;
}

SCSS

$color-1: #401d23;
$color-2: #66202e;
$color-3: #912f39;
$color-4: #bd334c;
$color-5: #adb86d;

TAILWIND

colors: {
  'brand-1': '#401d23',
  'brand-2': '#66202e',
  'brand-3': '#912f39',
  'brand-4': '#bd334c',
  'brand-5': '#adb86d',
}

RGB Array

[64, 29, 35], [102, 32, 46], [145, 47, 57], [189, 51, 76], [173, 184, 109]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #401D23, #66202E, #912F39, #BD334C, #ADB86D 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: #401d23; --color-2: #66202e; --color-3: #912f39; --color-4: #bd334c; --color-5: #adb86d. 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