#FFA024 + #E87819 + #28293E + #343E56 + #6991AA - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#FFA024

Ginger · Orange · Warm Sun

HEX

#FFA024

RGB

rgb(255, 160, 36)

HSL

hsl(34, 100%, 57%)

HSB

hsb(34, 86%, 100%)

CMYK

cmyk(0%, 37%, 86%, 0%)

Oklch

oklch(78.5% 0.166 66.0)

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

#E87819

Tangerine · Chocolate · Amber Brown

HEX

#E87819

RGB

rgb(232, 120, 25)

HSL

hsl(28, 82%, 50%)

HSB

hsb(28, 89%, 91%)

CMYK

cmyk(0%, 48%, 89%, 9%)

Oklch

oklch(68.8% 0.167 53.1)

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

#28293E

Indigo · DarkSlateGray · Deep Sea Blue

HEX

#28293E

RGB

rgb(40, 41, 62)

HSL

hsl(237, 22%, 20%)

HSB

hsb(237, 35%, 24%)

CMYK

cmyk(35%, 34%, 0%, 76%)

Oklch

oklch(29.0% 0.038 281.6)

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

#343E56

Indigo · DarkSlateGray · Prussian Blue

HEX

#343E56

RGB

rgb(52, 62, 86)

HSL

hsl(222, 25%, 27%)

HSB

hsb(222, 40%, 34%)

CMYK

cmyk(40%, 28%, 0%, 66%)

Oklch

oklch(36.6% 0.044 266.8)

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

#6991AA

Slate Blue · CadetBlue · Navy Blue

HEX

#6991AA

RGB

rgb(105, 145, 170)

HSL

hsl(203, 28%, 54%)

HSB

hsb(203, 38%, 67%)

CMYK

cmyk(38%, 15%, 0%, 33%)

Oklch

oklch(63.7% 0.058 236.3)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFA024

2483FF

Analogous

FF3224

FFA024

F0FF24

Triadic

FFA024

24FFA0

A024FF

Split-Comp.

FFA024

24F0FF

3224FF

Tetradic

FFA024

24FF32

2483FF

FF24F0

Contrast Matrix WCAG 2.1 Contrast

FFA024	E87819	28293E	343E56	6991AA
—	1.4 Fail	7.0 AA	5.2 AA	1.7 Fail
1.4 Fail	—	4.8 AA	3.6 AA Large	1.1 Fail
7.0 AA	4.8 AA	—	1.3 Fail	4.2 AA Large
5.2 AA	3.6 AA Large	1.3 Fail	—	3.2 AA Large
1.7 Fail	1.1 Fail	4.2 AA Large	3.2 AA Large	—

White BG

2.0Fail

2.9Fail

14.2AAA

10.7AAA

3.4AA Large

Black BG

10.3AAA

7.1AAA

1.5Fail

2.0Fail

6.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D6D542

B8B630

282839

383850

7A7BA4

Deuteranopia

DBE349

BEC636

282838

38374F

7875A3

Tritanopia

FA5A5F

E24246

283534

354C4B

6B9F9E

Achromatopsia

AEAEAE

8F8F8F

2B2B2B

3E3E3E

888888

Shades & Tints Shades & Tints

#FFA024

Dark

Light

#E87819

Dark

Light

#28293E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffa024;
  --color-2: #e87819;
  --color-3: #28293e;
  --color-4: #343e56;
  --color-5: #6991aa;
}

SCSS

$color-1: #ffa024;
$color-2: #e87819;
$color-3: #28293e;
$color-4: #343e56;
$color-5: #6991aa;

TAILWIND

colors: {
  'brand-1': '#ffa024',
  'brand-2': '#e87819',
  'brand-3': '#28293e',
  'brand-4': '#343e56',
  'brand-5': '#6991aa',
}

RGB Array

[255, 160, 36], [232, 120, 25], [40, 41, 62], [52, 62, 86], [105, 145, 170]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFA024, #E87819, #28293E, #343E56, #6991AA 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: #ffa024; --color-2: #e87819; --color-3: #28293e; --color-4: #343e56; --color-5: #6991aa. 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