#2C3435 + #A3A281 + #C07F5E + #DD6243 + #F23B33 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#2C3435

Slate Blue · DarkSlateGray · Dark Stone

HEX

#2C3435

RGB

rgb(44, 52, 53)

HSL

hsl(187, 9%, 19%)

HSB

hsb(187, 17%, 21%)

CMYK

cmyk(17%, 2%, 0%, 79%)

Oklch

oklch(31.8% 0.011 205.8)

Traditional「Slate Blue」· Paint「Dark Stone」· Creative Midnight Shadow

#A3A281

Autumn Sage · DarkSeaGreen · Sunflower

HEX

#A3A281

RGB

rgb(163, 162, 129)

HSL

hsl(58, 16%, 57%)

HSB

hsb(58, 21%, 64%)

CMYK

cmyk(0%, 1%, 21%, 36%)

Oklch

oklch(70.4% 0.046 106.1)

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

#C07F5E

Tangerine · DarkSalmon · Warm Sun

HEX

#C07F5E

RGB

rgb(192, 127, 94)

HSL

hsl(20, 44%, 56%)

HSB

hsb(20, 51%, 75%)

CMYK

cmyk(0%, 34%, 51%, 25%)

Oklch

oklch(65.6% 0.093 47.5)

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

#DD6243

Vermilion · Tomato · Passion Red

HEX

#DD6243

RGB

rgb(221, 98, 67)

HSL

hsl(12, 69%, 56%)

HSB

hsb(12, 70%, 87%)

CMYK

cmyk(0%, 56%, 70%, 13%)

Oklch

oklch(64.3% 0.161 35.3)

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

#F23B33

Vermilion · Crimson · Passion Red

HEX

#F23B33

RGB

rgb(242, 59, 51)

HSL

hsl(3, 88%, 57%)

HSB

hsb(3, 79%, 95%)

CMYK

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

Oklch

oklch(63.2% 0.220 28.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2C3435

352D2C

Analogous

2C3531

2C3435

2C2F35

Triadic

2C3435

352C34

34352C

Split-Comp.

2C3435

352C2F

35312C

Tetradic

2C3435

312C35

352D2C

2F352C

Contrast Matrix WCAG 2.1 Contrast

2C3435	A3A281	C07F5E	DD6243	F23B33
—	4.9 AA	3.9 AA Large	3.6 AA Large	3.3 AA Large
4.9 AA	—	1.2 Fail	1.4 Fail	1.5 Fail
3.9 AA Large	1.2 Fail	—	1.1 Fail	1.2 Fail
3.6 AA Large	1.4 Fail	1.1 Fail	—	1.1 Fail
3.3 AA Large	1.5 Fail	1.2 Fail	1.1 Fail	—

White BG

12.7AAA

2.6Fail

3.3AA Large

3.6AA Large

3.9AA Large

Black BG

1.6Fail

8.0AAA

6.4AA

5.9AA

5.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2F3035

A3A389

A4A366

A8A74B

A3A135

Deuteranopia

2F2E35

A3A38B

A8AC68

AFB84C

ADBB35

Tritanopia

2C3535

A38F91

BD6C6E

D75052

E93637

Achromatopsia

323232

9F9F9F

8F8F8F

838383

717171

Shades & Tints Shades & Tints

#2C3435

Dark

Light

#A3A281

Dark

Light

#C07F5E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2c3435;
  --color-2: #a3a281;
  --color-3: #c07f5e;
  --color-4: #dd6243;
  --color-5: #f23b33;
}

SCSS

$color-1: #2c3435;
$color-2: #a3a281;
$color-3: #c07f5e;
$color-4: #dd6243;
$color-5: #f23b33;

TAILWIND

colors: {
  'brand-1': '#2c3435',
  'brand-2': '#a3a281',
  'brand-3': '#c07f5e',
  'brand-4': '#dd6243',
  'brand-5': '#f23b33',
}

RGB Array

[44, 52, 53], [163, 162, 129], [192, 127, 94], [221, 98, 67], [242, 59, 51]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2C3435, #A3A281, #C07F5E, #DD6243, #F23B33 is ideal for: corporate websites, product showcases, portfolios. 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: #2c3435; --color-2: #a3a281; --color-3: #c07f5e; --color-4: #dd6243; --color-5: #f23b33. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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