#2A251F + #403D34 + #494238 + #A74A2B + #C9552E · sunset - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#2A251F

Ochre · DarkSlateGray · Cinnamon

HEX

#2A251F

RGB

rgb(42, 37, 31)

HSL

hsl(33, 15%, 14%)

HSB

hsb(33, 26%, 16%)

CMYK

cmyk(0%, 12%, 26%, 84%)

Oklch

oklch(26.8% 0.013 72.3)

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

#403D34

Ochre · DarkSlateGray · Amber Gold

HEX

#403D34

RGB

rgb(64, 61, 52)

HSL

hsl(45, 10%, 23%)

HSB

hsb(45, 19%, 25%)

CMYK

cmyk(0%, 5%, 19%, 75%)

Oklch

oklch(36.0% 0.016 91.7)

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

#494238

Ochre · DarkSlateGray · Cinnamon

HEX

#494238

RGB

rgb(73, 66, 56)

HSL

hsl(35, 13%, 25%)

HSB

hsb(35, 23%, 29%)

CMYK

cmyk(0%, 10%, 23%, 71%)

Oklch

oklch(38.3% 0.019 76.8)

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

#A74A2B

Tangerine · Sienna · Amber Brown

HEX

#A74A2B

RGB

rgb(167, 74, 43)

HSL

hsl(15, 59%, 41%)

HSB

hsb(15, 74%, 65%)

CMYK

cmyk(0%, 56%, 74%, 35%)

Oklch

oklch(52.4% 0.131 38.6)

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

#C9552E

Tangerine · Chocolate · Amber Brown

HEX

#C9552E

RGB

rgb(201, 85, 46)

HSL

hsl(15, 63%, 48%)

HSB

hsb(15, 77%, 79%)

CMYK

cmyk(0%, 58%, 77%, 21%)

Oklch

oklch(59.3% 0.157 38.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2A251F

1E2329

Analogous

291F1E

2A251F

29291E

Triadic

2A251F

1E2924

241E29

Split-Comp.

2A251F

1E2929

1F1E29

Tetradic

2A251F

1E291F

1E2329

291E29

Contrast Matrix WCAG 2.1 Contrast

2A251F	403D34	494238	A74A2B	C9552E
—	1.4 Fail	1.5 Fail	2.6 Fail	3.5 AA Large
1.4 Fail	—	1.1 Fail	1.9 Fail	2.5 Fail
1.5 Fail	1.1 Fail	—	1.7 Fail	2.3 Fail
2.6 Fail	1.9 Fail	1.7 Fail	—	1.3 Fail
3.5 AA Large	2.5 Fail	2.3 Fail	1.3 Fail	—

White BG

15.2AAA

10.9AAA

9.9AAA

5.7AA

4.4AA Large

Black BG

1.4Fail

1.9Fail

2.1Fail

3.7AA Large

4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

282820

3F3F36

46463A

7F7E33

979637

Deuteranopia

282921

3F3F37

46473B

848B34

9EA63A

Tritanopia

2A2222

403838

493C3D

A2383A

C33F41

Achromatopsia

262626

3D3D3D

434343

626262

737373

Shades & Tints Shades & Tints

#2A251F

Dark

Light

#403D34

Dark

Light

#494238

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2a251f;
  --color-2: #403d34;
  --color-3: #494238;
  --color-4: #a74a2b;
  --color-5: #c9552e;
}

SCSS

$color-1: #2a251f;
$color-2: #403d34;
$color-3: #494238;
$color-4: #a74a2b;
$color-5: #c9552e;

TAILWIND

colors: {
  'brand-1': '#2a251f',
  'brand-2': '#403d34',
  'brand-3': '#494238',
  'brand-4': '#a74a2b',
  'brand-5': '#c9552e',
}

RGB Array

[42, 37, 31], [64, 61, 52], [73, 66, 56], [167, 74, 43], [201, 85, 46]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #2A251F, #403D34, #494238, #A74A2B, #C9552E 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: #2a251f; --color-2: #403d34; --color-3: #494238; --color-4: #a74a2b; --color-5: #c9552e. 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 sunset-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