#3B3A3D + #693E6B + #9C4476 + #B06F15 + #FF780A · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#3B3A3D

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#3B3A3D

RGB

rgb(59, 58, 61)

HSL

hsl(260, 3%, 23%)

HSB

hsb(260, 5%, 24%)

CMYK

cmyk(3%, 5%, 0%, 76%)

Oklch

oklch(35.1% 0.005 301.2)

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

#693E6B

Dark Plum · DimGray · Eggplant

HEX

#693E6B

RGB

rgb(105, 62, 107)

HSL

hsl(297, 27%, 33%)

HSB

hsb(297, 42%, 42%)

CMYK

cmyk(2%, 42%, 0%, 58%)

Oklch

oklch(43.3% 0.089 325.4)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#9C4476

Rose Purple · DimGray · Camellia

HEX

#9C4476

RGB

rgb(156, 68, 118)

HSL

hsl(326, 39%, 44%)

HSB

hsb(326, 56%, 61%)

CMYK

cmyk(0%, 56%, 24%, 39%)

Oklch

oklch(51.7% 0.131 347.5)

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

#B06F15

Ochre · DarkGoldenRod · Amber Brown

HEX

#B06F15

RGB

rgb(176, 111, 21)

HSL

hsl(35, 79%, 39%)

HSB

hsb(35, 88%, 69%)

CMYK

cmyk(0%, 37%, 88%, 31%)

Oklch

oklch(59.8% 0.125 67.7)

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

#FF780A

Tangerine · Orange · Warm Sun

HEX

#FF780A

RGB

rgb(255, 120, 10)

HSL

hsl(27, 100%, 52%)

HSB

hsb(27, 96%, 100%)

CMYK

cmyk(0%, 53%, 96%, 0%)

Oklch

oklch(72.0% 0.190 49.3)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3B3A3D

3B3C39

Analogous

39393C

3B3A3D

3C393C

Triadic

3B3A3D

3C3A39

393C3A

Split-Comp.

3B3A3D

3C3C39

393C39

Tetradic

3B3A3D

3C3939

3B3C39

393C3C

Contrast Matrix WCAG 2.1 Contrast

3B3A3D	693E6B	9C4476	B06F15	FF780A
—	1.3 Fail	1.9 Fail	2.8 Fail	4.3 AA Large
1.3 Fail	—	1.4 Fail	2.1 Fail	3.2 AA Large
1.9 Fail	1.4 Fail	—	1.5 Fail	2.3 Fail
2.8 Fail	2.1 Fail	1.5 Fail	—	1.5 Fail
4.3 AA Large	3.2 AA Large	2.3 Fail	1.5 Fail	—

White BG

11.3AAA

8.4AAA

6.0AA

4.1AA Large

2.6Fail

Black BG

1.9Fail

2.5Fail

3.5AA Large

5.1AA

7.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3B3B3C

565660

76756A

94932B

C5C325

Deuteranopia

3B3B3C

595C5D

7B8267

989D30

CCD72B

Tritanopia

3B3C3C

675856

98605E

AD3C40

F83A3E

Achromatopsia

3B3B3B

505050

646464

787878

949494

Shades & Tints Shades & Tints

#3B3A3D

Dark

Light

#693E6B

Dark

Light

#9C4476

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3b3a3d;
  --color-2: #693e6b;
  --color-3: #9c4476;
  --color-4: #b06f15;
  --color-5: #ff780a;
}

SCSS

$color-1: #3b3a3d;
$color-2: #693e6b;
$color-3: #9c4476;
$color-4: #b06f15;
$color-5: #ff780a;

TAILWIND

colors: {
  'brand-1': '#3b3a3d',
  'brand-2': '#693e6b',
  'brand-3': '#9c4476',
  'brand-4': '#b06f15',
  'brand-5': '#ff780a',
}

RGB Array

[59, 58, 61], [105, 62, 107], [156, 68, 118], [176, 111, 21], [255, 120, 10]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #3B3A3D, #693E6B, #9C4476, #B06F15, #FF780A 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: #3b3a3d; --color-2: #693e6b; --color-3: #9c4476; --color-4: #b06f15; --color-5: #ff780a. 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 warm-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