← Back to Editor

#AB5AA5 · #FF9500 · #E1FF33 · #A8BCBD · #979FB0

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#AB5AA5

Rose Purple · MediumOrchid · Violet

HEX
#AB5AA5
RGB
rgb(171, 90, 165)
HSL
hsl(304, 33%, 51%)
HSB
hsb(304, 47%, 67%)
CMYK
cmyk(0%, 47%, 4%, 33%)
Oklch
oklch(59.0% 0.143 330.0)

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

#FF9500

Ochre · Orange · Amber Brown

HEX
#FF9500
RGB
rgb(255, 149, 0)
HSL
hsl(35, 100%, 50%)
HSB
hsb(35, 100%, 100%)
CMYK
cmyk(0%, 42%, 100%, 0%)
Oklch
oklch(76.5% 0.175 62.6)

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

#E1FF33

Autumn Sage · GreenYellow · Sunflower

HEX
#E1FF33
RGB
rgb(225, 255, 51)
HSL
hsl(69, 100%, 60%)
HSB
hsb(69, 80%, 100%)
CMYK
cmyk(12%, 0%, 80%, 0%)
Oklch
oklch(94.6% 0.209 118.3)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#A8BCBD

Sky Blue · Silver · Lake Green

HEX
#A8BCBD
RGB
rgb(168, 188, 189)
HSL
hsl(183, 14%, 70%)
HSB
hsb(183, 11%, 74%)
CMYK
cmyk(11%, 1%, 0%, 26%)
Oklch
oklch(78.0% 0.022 200.4)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#979FB0

Azure · DarkGray · Cobalt Blue

HEX
#979FB0
RGB
rgb(151, 159, 176)
HSL
hsl(221, 14%, 64%)
HSB
hsb(221, 14%, 69%)
CMYK
cmyk(14%, 10%, 0%, 31%)
Oklch
oklch(70.2% 0.026 265.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AB5AA5
59AB5E

Analogous

8859AB
AB5AA5
AB597D

Triadic

AB5AA5
A6AB59
59A6AB

Split-Comp.

AB5AA5
7DAB59
59AB88

Tetradic

AB5AA5
AB8859
59AB5E
597DAB

Contrast Matrix WCAG 2.1 Contrast

AB5AA5
FF9500
E1FF33
A8BCBD
979FB0
—
2.0
Fail
3.9
AA Large
2.2
Fail
1.7
Fail
2.0
Fail
—
1.9
Fail
1.1
Fail
1.2
Fail
3.9
AA Large
1.9
Fail
—
1.8
Fail
2.3
Fail
2.2
Fail
1.1
Fail
1.8
Fail
—
1.3
Fail
1.7
Fail
1.2
Fail
2.3
Fail
1.3
Fail
—
White BG
4.4AA Large
2.2Fail
1.1Fail
2.0Fail
2.7Fail
Black BG
4.7AA
9.6AAA
18.6AAA
10.6AAA
7.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

888793
D1D024
EEEE64
B1B1BD
9A9BAC

Deuteranopia

8D938F
D7DF2D
ECEA70
B0AEBD
9A99AB

Tritanopia

A78581
FA4147
E38B94
A9BDBD
97A9A8

Achromatopsia

7B7B7B
A4A4A4
DFDFDF
B6B6B6
9F9F9F

Shades & Tints Shades & Tints

#AB5AA5

Dark
Light

#FF9500

Dark
Light

#E1FF33

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ab5aa5;
  --color-2: #ff9500;
  --color-3: #e1ff33;
  --color-4: #a8bcbd;
  --color-5: #979fb0;
}

SCSS

$color-1: #ab5aa5;
$color-2: #ff9500;
$color-3: #e1ff33;
$color-4: #a8bcbd;
$color-5: #979fb0;

TAILWIND

colors: {
  'brand-1': '#ab5aa5',
  'brand-2': '#ff9500',
  'brand-3': '#e1ff33',
  'brand-4': '#a8bcbd',
  'brand-5': '#979fb0',
}

RGB Array

[171, 90, 165], [255, 149, 0], [225, 255, 51], [168, 188, 189], [151, 159, 176]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AB5AA5, #FF9500, #E1FF33, #A8BCBD, #979FB0 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: #ab5aa5; --color-2: #ff9500; --color-3: #e1ff33; --color-4: #a8bcbd; --color-5: #979fb0. 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