← Back to Editor

#A89DA7 · #A48DC5 · #C67AAF · #E46E82 · #FE683D

cool

A 5-color cool 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

#A89DA7

Ash · DarkGray · Silver Sand

HEX
#A89DA7
RGB
rgb(168, 157, 167)
HSL
hsl(305, 6%, 64%)
HSB
hsb(305, 7%, 66%)
CMYK
cmyk(0%, 7%, 1%, 34%)
Oklch
oklch(70.8% 0.019 328.6)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#A48DC5

Wisteria · DarkGray · Lilac Purple

HEX
#A48DC5
RGB
rgb(164, 141, 197)
HSL
hsl(265, 33%, 66%)
HSB
hsb(265, 28%, 77%)
CMYK
cmyk(17%, 28%, 0%, 23%)
Oklch
oklch(68.4% 0.085 303.0)

Traditional「Wisteria」· Paint「Lilac Purple」· Creative Lavender Dream

#C67AAF

Mauve · Orchid · Lilac Purple

HEX
#C67AAF
RGB
rgb(198, 122, 175)
HSL
hsl(318, 40%, 63%)
HSB
hsb(318, 38%, 78%)
CMYK
cmyk(0%, 38%, 12%, 22%)
Oklch
oklch(67.7% 0.116 339.0)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#E46E82

Peach Pink · LightCoral · Coral Red

HEX
#E46E82
RGB
rgb(228, 110, 130)
HSL
hsl(350, 69%, 66%)
HSB
hsb(350, 52%, 89%)
CMYK
cmyk(0%, 52%, 43%, 11%)
Oklch
oklch(68.2% 0.147 11.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#FE683D

Peach Pink · Tomato · Coral Red

HEX
#FE683D
RGB
rgb(254, 104, 61)
HSL
hsl(13, 99%, 62%)
HSB
hsb(13, 76%, 100%)
CMYK
cmyk(0%, 59%, 76%, 0%)
Oklch
oklch(70.0% 0.192 36.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A89DA7
9EA99F

Analogous

A49EA9
A89DA7
A99EA2

Triadic

A89DA7
A8A99E
9EA8A9

Split-Comp.

A89DA7
A2A99E
9EA9A4

Tetradic

A89DA7
A9A49E
9EA99F
9EA2A9

Contrast Matrix WCAG 2.1 Contrast

A89DA7
A48DC5
C67AAF
E46E82
FE683D
—
1.1
Fail
1.2
Fail
1.2
Fail
1.1
Fail
1.1
Fail
—
1.1
Fail
1.1
Fail
1.0
Fail
1.2
Fail
1.1
Fail
—
1.0
Fail
1.1
Fail
1.2
Fail
1.1
Fail
1.0
Fail
—
1.1
Fail
1.1
Fail
1.0
Fail
1.1
Fail
1.1
Fail
—
White BG
2.6Fail
2.9Fail
3.1AA Large
3.1AA Large
2.9Fail
Black BG
8.0AAA
7.2AAA
6.8AA
6.9AA
7.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A3A3A5
9A9AB7
A5A4A2
B1B07D
BDBC47

Deuteranopia

A4A5A4
9B9DB4
AAAF9F
B8C17C
C6D14A

Tritanopia

A7A3A2
A3ADAA
C29896
DE7979
F65051

Achromatopsia

A1A1A1
9A9A9A
979797
949494
909090

Shades & Tints Shades & Tints

#A89DA7

Dark
Light

#A48DC5

Dark
Light

#C67AAF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a89da7;
  --color-2: #a48dc5;
  --color-3: #c67aaf;
  --color-4: #e46e82;
  --color-5: #fe683d;
}

SCSS

$color-1: #a89da7;
$color-2: #a48dc5;
$color-3: #c67aaf;
$color-4: #e46e82;
$color-5: #fe683d;

TAILWIND

colors: {
  'brand-1': '#a89da7',
  'brand-2': '#a48dc5',
  'brand-3': '#c67aaf',
  'brand-4': '#e46e82',
  'brand-5': '#fe683d',
}

RGB Array

[168, 157, 167], [164, 141, 197], [198, 122, 175], [228, 110, 130], [254, 104, 61]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #A89DA7, #A48DC5, #C67AAF, #E46E82, #FE683D 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: #a89da7; --color-2: #a48dc5; --color-3: #c67aaf; --color-4: #e46e82; --color-5: #fe683d. 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 cool-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