#FD7000 + #AB5280 + #533154 + #88A5B3 + #8584A3 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#FD7000

Tangerine · OrangeRed · Amber Brown

HEX

#FD7000

RGB

rgb(253, 112, 0)

HSL

hsl(27, 100%, 50%)

HSB

hsb(27, 100%, 99%)

CMYK

cmyk(0%, 56%, 100%, 1%)

Oklch

oklch(70.6% 0.195 47.1)

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

#AB5280

Rose Purple · Gray · Camellia

HEX

#AB5280

RGB

rgb(171, 82, 128)

HSL

hsl(329, 35%, 50%)

HSB

hsb(329, 52%, 67%)

CMYK

cmyk(0%, 52%, 25%, 33%)

Oklch

oklch(56.2% 0.128 349.8)

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

#533154

Dark Plum · DarkSlateGray · Eggplant

HEX

#533154

RGB

rgb(83, 49, 84)

HSL

hsl(298, 26%, 26%)

HSB

hsb(298, 42%, 33%)

CMYK

cmyk(1%, 42%, 0%, 67%)

Oklch

oklch(36.9% 0.073 325.9)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#88A5B3

Sky Blue · DarkGray · Cobalt Blue

HEX

#88A5B3

RGB

rgb(136, 165, 179)

HSL

hsl(200, 22%, 62%)

HSB

hsb(200, 24%, 70%)

CMYK

cmyk(24%, 8%, 0%, 30%)

Oklch

oklch(70.5% 0.038 228.7)

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

#8584A3

Deep Indigo · LightSlateGray · Navy Blue

HEX

#8584A3

RGB

rgb(133, 132, 163)

HSL

hsl(242, 14%, 58%)

HSB

hsb(242, 19%, 64%)

CMYK

cmyk(18%, 19%, 0%, 36%)

Oklch

oklch(62.5% 0.046 286.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FD7000

008CFF

Analogous

FF000D

FD7000

FFF200

Triadic

FD7000

00FF73

7300FF

Split-Comp.

FD7000

00FFF2

000DFF

Tetradic

FD7000

0DFF00

008CFF

F200FF

Contrast Matrix WCAG 2.1 Contrast

FD7000	AB5280	533154	88A5B3	8584A3
—	1.8 Fail	3.9 AA Large	1.1 Fail	1.3 Fail
1.8 Fail	—	2.2 Fail	1.9 Fail	1.4 Fail
3.9 AA Large	2.2 Fail	—	4.2 AA Large	3.0 AA Large
1.1 Fail	1.9 Fail	4.2 AA Large	—	1.4 Fail
1.3 Fail	1.4 Fail	3.0 AA Large	1.4 Fail	—

White BG

2.8Fail

4.9AA

10.9AAA

2.6Fail

3.6AA Large

Black BG

7.5AAA

4.3AA Large

1.9Fail

8.1AAA

5.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C0BF1B

848475

44444C

9595B0

85859B

Deuteranopia

C8D322

8A9072

46494A

9391AF

85859A

Tritanopia

F63035

A76C6A

514543

89ADAC

859694

Achromatopsia

8D8D8D

727272

3F3F3F

9E9E9E

888888

Shades & Tints Shades & Tints

#FD7000

Dark

Light

#AB5280

Dark

Light

#533154

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fd7000;
  --color-2: #ab5280;
  --color-3: #533154;
  --color-4: #88a5b3;
  --color-5: #8584a3;
}

SCSS

$color-1: #fd7000;
$color-2: #ab5280;
$color-3: #533154;
$color-4: #88a5b3;
$color-5: #8584a3;

TAILWIND

colors: {
  'brand-1': '#fd7000',
  'brand-2': '#ab5280',
  'brand-3': '#533154',
  'brand-4': '#88a5b3',
  'brand-5': '#8584a3',
}

RGB Array

[253, 112, 0], [171, 82, 128], [83, 49, 84], [136, 165, 179], [133, 132, 163]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FD7000, #AB5280, #533154, #88A5B3, #8584A3 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: #fd7000; --color-2: #ab5280; --color-3: #533154; --color-4: #88a5b3; --color-5: #8584a3. 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