#FFA342 + #DF3B31 + #483342 + #7C9460 + #8195B8 · 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

#FFA342

Ginger · SandyBrown · Warm Sun

HEX

#FFA342

RGB

rgb(255, 163, 66)

HSL

hsl(31, 100%, 63%)

HSB

hsb(31, 74%, 100%)

CMYK

cmyk(0%, 36%, 74%, 0%)

Oklch

oklch(79.2% 0.153 63.3)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#DF3B31

Vermilion · Crimson · Passion Red

HEX

#DF3B31

RGB

rgb(223, 59, 49)

HSL

hsl(3, 73%, 53%)

HSB

hsb(3, 78%, 87%)

CMYK

cmyk(0%, 74%, 78%, 13%)

Oklch

oklch(59.9% 0.202 28.4)

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

#483342

Rose Purple · DarkSlateGray · Eggplant

HEX

#483342

RGB

rgb(72, 51, 66)

HSL

hsl(317, 17%, 24%)

HSB

hsb(317, 29%, 28%)

CMYK

cmyk(0%, 29%, 8%, 72%)

Oklch

oklch(35.1% 0.039 337.2)

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

#7C9460

Grass Green · Gray · Olive Green

HEX

#7C9460

RGB

rgb(124, 148, 96)

HSL

hsl(88, 21%, 48%)

HSB

hsb(88, 35%, 58%)

CMYK

cmyk(16%, 0%, 35%, 42%)

Oklch

oklch(63.4% 0.079 128.6)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#8195B8

Azure · LightSlateGray · Cobalt Blue

HEX

#8195B8

RGB

rgb(129, 149, 184)

HSL

hsl(218, 28%, 61%)

HSB

hsb(218, 30%, 72%)

CMYK

cmyk(30%, 19%, 0%, 28%)

Oklch

oklch(66.7% 0.057 261.5)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFA342

429EFF

Analogous

FF4542

FFA342

FCFF42

Triadic

FFA342

42FFA4

A442FF

Split-Comp.

FFA342

42FCFF

4542FF

Tetradic

FFA342

42FF45

429EFF

FF42FC

Contrast Matrix WCAG 2.1 Contrast

FFA342	DF3B31	483342	7C9460	8195B8
—	2.2 Fail	5.8 AA	1.7 Fail	1.5 Fail
2.2 Fail	—	2.6 Fail	1.3 Fail	1.4 Fail
5.8 AA	2.6 Fail	—	3.4 AA Large	3.8 AA Large
1.7 Fail	1.3 Fail	3.4 AA Large	—	1.1 Fail
1.5 Fail	1.4 Fail	3.8 AA Large	1.1 Fail	—

White BG

2.0Fail

4.4AA Large

11.5AAA

3.4AA Large

3.0AA Large

Black BG

10.6AAA

4.8AA

1.8Fail

6.3AA

6.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D7D659

989733

3F3F3E

86876D

8A8AB0

Deuteranopia

DDE35F

A2AE34

40423D

858370

8987AD

Tritanopia

FA6C70

D73536

473C3B

7D7779

82A9A7

Achromatopsia

B3B3B3

6B6B6B

3B3B3B

878787

939393

Shades & Tints Shades & Tints

#FFA342

Dark

Light

#DF3B31

Dark

Light

#483342

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffa342;
  --color-2: #df3b31;
  --color-3: #483342;
  --color-4: #7c9460;
  --color-5: #8195b8;
}

SCSS

$color-1: #ffa342;
$color-2: #df3b31;
$color-3: #483342;
$color-4: #7c9460;
$color-5: #8195b8;

TAILWIND

colors: {
  'brand-1': '#ffa342',
  'brand-2': '#df3b31',
  'brand-3': '#483342',
  'brand-4': '#7c9460',
  'brand-5': '#8195b8',
}

RGB Array

[255, 163, 66], [223, 59, 49], [72, 51, 66], [124, 148, 96], [129, 149, 184]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #FFA342, #DF3B31, #483342, #7C9460, #8195B8 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: #ffa342; --color-2: #df3b31; --color-3: #483342; --color-4: #7c9460; --color-5: #8195b8. 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 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