#2C1A06 + #3F0624 + #3F2130 + #4B3B5F + #3E4464 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#2C1A06

Ochre · Black · Cinnamon

HEX

#2C1A06

RGB

rgb(44, 26, 6)

HSL

hsl(32, 76%, 10%)

HSB

hsb(32, 86%, 17%)

CMYK

cmyk(0%, 41%, 86%, 83%)

Oklch

oklch(23.7% 0.043 66.4)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

#3F0624

Rose Purple · Black · Raspberry

HEX

#3F0624

RGB

rgb(63, 6, 36)

HSL

hsl(328, 83%, 14%)

HSB

hsb(328, 90%, 25%)

CMYK

cmyk(0%, 90%, 43%, 75%)

Oklch

oklch(24.8% 0.091 354.1)

Traditional「Rose Purple」· Paint「Raspberry」· Creative Blush Sunrise

#3F2130

Dark Violet · DarkSlateGray · Raspberry

HEX

#3F2130

RGB

rgb(63, 33, 48)

HSL

hsl(330, 31%, 19%)

HSB

hsb(330, 48%, 25%)

CMYK

cmyk(0%, 48%, 24%, 75%)

Oklch

oklch(29.3% 0.051 349.4)

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

#4B3B5F

Deep Indigo · DarkSlateGray · Eggplant

HEX

#4B3B5F

RGB

rgb(75, 59, 95)

HSL

hsl(267, 23%, 30%)

HSB

hsb(267, 38%, 37%)

CMYK

cmyk(21%, 38%, 0%, 63%)

Oklch

oklch(38.5% 0.063 304.0)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

#3E4464

Indigo · DarkSlateGray · Prussian Blue

HEX

#3E4464

RGB

rgb(62, 68, 100)

HSL

hsl(231, 23%, 32%)

HSB

hsb(231, 38%, 39%)

CMYK

cmyk(38%, 32%, 0%, 61%)

Oklch

oklch(39.5% 0.055 275.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2C1A06

06182D

Analogous

2D0706

2C1A06

2C2D06

Triadic

2C1A06

062D1B

1B062D

Split-Comp.

2C1A06

062C2D

07062D

Tetradic

2C1A06

062D07

06182D

2D062C

Contrast Matrix WCAG 2.1 Contrast

2C1A06	3F0624	3F2130	4B3B5F	3E4464
—	1.0 Fail	1.2 Fail	1.7 Fail	1.8 Fail
1.0 Fail	—	1.2 Fail	1.7 Fail	1.8 Fail
1.2 Fail	1.2 Fail	—	1.4 Fail	1.5 Fail
1.7 Fail	1.7 Fail	1.4 Fail	—	1.1 Fail
1.8 Fail	1.8 Fail	1.5 Fail	1.1 Fail	—

White BG

16.7AAA

16.6AAA

14.3AAA

10.0AAA

9.5AAA

Black BG

1.3Fail

1.5Fail

2.1Fail

2.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

24240B

26261D

32322C

444456

41415C

Deuteranopia

25270C

2A2E1B

34362B

454654

40405A

Tritanopia

2B0F10

3C1716

3D2A29

4A4F4E

3E5655

Achromatopsia

1D1D1D

1A1A1A

2C2C2C

444444

464646

Shades & Tints Shades & Tints

#2C1A06

Dark

Light

#3F0624

Dark

Light

#3F2130

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2c1a06;
  --color-2: #3f0624;
  --color-3: #3f2130;
  --color-4: #4b3b5f;
  --color-5: #3e4464;
}

SCSS

$color-1: #2c1a06;
$color-2: #3f0624;
$color-3: #3f2130;
$color-4: #4b3b5f;
$color-5: #3e4464;

TAILWIND

colors: {
  'brand-1': '#2c1a06',
  'brand-2': '#3f0624',
  'brand-3': '#3f2130',
  'brand-4': '#4b3b5f',
  'brand-5': '#3e4464',
}

RGB Array

[44, 26, 6], [63, 6, 36], [63, 33, 48], [75, 59, 95], [62, 68, 100]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2C1A06, #3F0624, #3F2130, #4B3B5F, #3E4464 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: #2c1a06; --color-2: #3f0624; --color-3: #3f2130; --color-4: #4b3b5f; --color-5: #3e4464. 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