#634E47 + #C63400 + #FC4508 + #403A39 + #5E5755 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#634E47

Tangerine · DarkOliveGreen · Amber Brown

HEX

#634E47

RGB

rgb(99, 78, 71)

HSL

hsl(15, 16%, 33%)

HSB

hsb(15, 28%, 39%)

CMYK

cmyk(0%, 21%, 28%, 61%)

Oklch

oklch(44.4% 0.031 39.2)

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

#C63400

Tangerine · FireBrick · Amber Brown

HEX

#C63400

RGB

rgb(198, 52, 0)

HSL

hsl(16, 100%, 39%)

HSB

hsb(16, 100%, 78%)

CMYK

cmyk(0%, 74%, 100%, 22%)

Oklch

oklch(54.6% 0.189 35.5)

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

#FC4508

Tangerine · OrangeRed · Warm Sun

HEX

#FC4508

RGB

rgb(252, 69, 8)

HSL

hsl(15, 98%, 51%)

HSB

hsb(15, 97%, 99%)

CMYK

cmyk(0%, 73%, 97%, 1%)

Oklch

oklch(65.5% 0.226 35.1)

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

#403A39

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#403A39

RGB

rgb(64, 58, 57)

HSL

hsl(9, 6%, 24%)

HSB

hsb(9, 11%, 25%)

CMYK

cmyk(0%, 9%, 11%, 75%)

Oklch

oklch(35.4% 0.009 28.9)

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

#5E5755

Ink Gray · DimGray · Charcoal

HEX

#5E5755

RGB

rgb(94, 87, 85)

HSL

hsl(13, 5%, 35%)

HSB

hsb(13, 10%, 37%)

CMYK

cmyk(0%, 7%, 10%, 63%)

Oklch

oklch(46.3% 0.010 36.5)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

634E47

475B62

Analogous

62474D

634E47

625B47

Triadic

634E47

47624D

4D4762

Split-Comp.

634E47

47625B

474D62

Tetradic

634E47

4D6247

475B62

5B4762

Contrast Matrix WCAG 2.1 Contrast

634E47	C63400	FC4508	403A39	5E5755
—	1.4 Fail	2.2 Fail	1.4 Fail	1.1 Fail
1.4 Fail	—	1.5 Fail	2.1 Fail	1.3 Fail
2.2 Fail	1.5 Fail	—	3.2 AA Large	2.0 Fail
1.4 Fail	2.1 Fail	3.2 AA Large	—	1.6 Fail
1.1 Fail	1.3 Fail	2.0 Fail	1.6 Fail	—

White BG

7.7AAA

5.4AA

3.5AA Large

11.2AAA

7.1AAA

Black BG

2.7Fail

3.9AA Large

6.0AA

1.9Fail

3.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

5A5A49

87850D

ADAB17

3D3D39

5B5B55

Deuteranopia

5B5D49

8F9A10

B7C51A

3E3E39

5B5C56

Tritanopia

624A4A

BF1719

F32225

403939

5E5656

Achromatopsia

535353

5A5A5A

757575

3C3C3C

595959

Shades & Tints Shades & Tints

#634E47

Dark

Light

#C63400

Dark

Light

#FC4508

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #634e47;
  --color-2: #c63400;
  --color-3: #fc4508;
  --color-4: #403a39;
  --color-5: #5e5755;
}

SCSS

$color-1: #634e47;
$color-2: #c63400;
$color-3: #fc4508;
$color-4: #403a39;
$color-5: #5e5755;

TAILWIND

colors: {
  'brand-1': '#634e47',
  'brand-2': '#c63400',
  'brand-3': '#fc4508',
  'brand-4': '#403a39',
  'brand-5': '#5e5755',
}

RGB Array

[99, 78, 71], [198, 52, 0], [252, 69, 8], [64, 58, 57], [94, 87, 85]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #634E47, #C63400, #FC4508, #403A39, #5E5755 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: #634e47; --color-2: #c63400; --color-3: #fc4508; --color-4: #403a39; --color-5: #5e5755. 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