#272B36 + #3B3F58 + #C79F61 + #946A40 + #573218 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#272B36

Indigo · DarkSlateGray · Deep Sea Blue

HEX

#272B36

RGB

rgb(39, 43, 54)

HSL

hsl(224, 16%, 18%)

HSB

hsb(224, 28%, 21%)

CMYK

cmyk(28%, 20%, 0%, 79%)

Oklch

oklch(29.0% 0.021 269.4)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#3B3F58

Indigo · DarkSlateGray · Prussian Blue

HEX

#3B3F58

RGB

rgb(59, 63, 88)

HSL

hsl(232, 20%, 29%)

HSB

hsb(232, 33%, 35%)

CMYK

cmyk(33%, 28%, 0%, 65%)

Oklch

oklch(37.5% 0.043 277.1)

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

#C79F61

Ginger · DarkSalmon · Warm Sun

HEX

#C79F61

RGB

rgb(199, 159, 97)

HSL

hsl(36, 48%, 58%)

HSB

hsb(36, 51%, 78%)

CMYK

cmyk(0%, 20%, 51%, 22%)

Oklch

oklch(72.6% 0.093 77.4)

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

#946A40

Ochre · Sienna · Amber Brown

HEX

#946A40

RGB

rgb(148, 106, 64)

HSL

hsl(30, 40%, 42%)

HSB

hsb(30, 57%, 58%)

CMYK

cmyk(0%, 28%, 57%, 42%)

Oklch

oklch(55.8% 0.079 65.0)

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

#573218

Tangerine · DarkOliveGreen · Cinnamon

HEX

#573218

RGB

rgb(87, 50, 24)

HSL

hsl(25, 57%, 22%)

HSB

hsb(25, 72%, 34%)

CMYK

cmyk(0%, 43%, 72%, 66%)

Oklch

oklch(35.8% 0.066 53.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

272B36

353127

Analogous

273235

272B36

2A2735

Triadic

272B36

35272A

2A3527

Split-Comp.

272B36

352A27

323527

Tetradic

272B36

352732

353127

27352A

Contrast Matrix WCAG 2.1 Contrast

272B36	3B3F58	C79F61	946A40	573218
—	1.4 Fail	5.8 AA	3.0 Fail	1.3 Fail
1.4 Fail	—	4.2 AA Large	2.2 Fail	1.1 Fail
5.8 AA	4.2 AA Large	—	1.9 Fail	4.6 AA
3.0 Fail	2.2 Fail	1.9 Fail	—	2.3 Fail
1.3 Fail	1.1 Fail	4.6 AA	2.3 Fail	—

White BG

14.1AAA

10.3AAA

2.5Fail

4.8AA

11.2AAA

Black BG

1.5Fail

2.0Fail

8.6AAA

4.4AA Large

1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

292933

3D3D52

B6B570

82814A

47471E

Deuteranopia

292833

3D3C51

B8BB74

84874D

494C20

Tritanopia

273131

3B4D4C

C57C7E

925254

552324

Achromatopsia

2B2B2B

414141

A4A4A4

727272

3A3A3A

Shades & Tints Shades & Tints

#272B36

Dark

Light

#3B3F58

Dark

Light

#C79F61

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #272b36;
  --color-2: #3b3f58;
  --color-3: #c79f61;
  --color-4: #946a40;
  --color-5: #573218;
}

SCSS

$color-1: #272b36;
$color-2: #3b3f58;
$color-3: #c79f61;
$color-4: #946a40;
$color-5: #573218;

TAILWIND

colors: {
  'brand-1': '#272b36',
  'brand-2': '#3b3f58',
  'brand-3': '#c79f61',
  'brand-4': '#946a40',
  'brand-5': '#573218',
}

RGB Array

[39, 43, 54], [59, 63, 88], [199, 159, 97], [148, 106, 64], [87, 50, 24]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #272B36, #3B3F58, #C79F61, #946A40, #573218 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: #272b36; --color-2: #3b3f58; --color-3: #c79f61; --color-4: #946a40; --color-5: #573218. 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