← Back to Editor

#4CAAAE · #D5CBB8 · #FABE96 · #DB9ED6 · #686077

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

#4CAAAE

Slate Blue · CadetBlue · Mint Ice

HEX
#4CAAAE
RGB
rgb(76, 170, 174)
HSL
hsl(182, 39%, 49%)
HSB
hsb(182, 56%, 68%)
CMYK
cmyk(56%, 2%, 0%, 32%)
Oklch
oklch(68.3% 0.088 199.1)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#D5CBB8

Goose Yellow · Silver · Peach Orange

HEX
#D5CBB8
RGB
rgb(213, 203, 184)
HSL
hsl(39, 26%, 78%)
HSB
hsb(39, 14%, 84%)
CMYK
cmyk(0%, 5%, 14%, 16%)
Oklch
oklch(84.5% 0.028 83.5)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#FABE96

Apricot · BurlyWood · Peach Orange

HEX
#FABE96
RGB
rgb(250, 190, 150)
HSL
hsl(24, 91%, 78%)
HSB
hsb(24, 40%, 98%)
CMYK
cmyk(0%, 24%, 40%, 2%)
Oklch
oklch(84.7% 0.087 54.9)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#DB9ED6

Mauve · Violet · Lilac Purple

HEX
#DB9ED6
RGB
rgb(219, 158, 214)
HSL
hsl(305, 46%, 74%)
HSB
hsb(305, 28%, 86%)
CMYK
cmyk(0%, 28%, 2%, 14%)
Oklch
oklch(77.5% 0.103 329.3)

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

#686077

Deep Indigo · DimGray · Violet

HEX
#686077
RGB
rgb(104, 96, 119)
HSL
hsl(261, 11%, 42%)
HSB
hsb(261, 19%, 47%)
CMYK
cmyk(13%, 19%, 0%, 53%)
Oklch
oklch(50.5% 0.037 301.0)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4CAAAE
AE4F4C

Analogous

4CAE80
4CAAAE
4C7AAE

Triadic

4CAAAE
AE4CAA
AAAE4C

Split-Comp.

4CAAAE
AE4C7A
AE804C

Tetradic

4CAAAE
804CAE
AE4F4C
7AAE4C

Contrast Matrix WCAG 2.1 Contrast

4CAAAE
D5CBB8
FABE96
DB9ED6
686077
—
1.7
Fail
1.7
Fail
1.3
Fail
2.2
Fail
1.7
Fail
—
1.0
Fail
1.3
Fail
3.7
AA Large
1.7
Fail
1.0
Fail
—
1.3
Fail
3.6
AA Large
1.3
Fail
1.3
Fail
1.3
Fail
—
2.8
Fail
2.2
Fail
3.7
AA Large
3.6
AA Large
2.8
Fail
—
White BG
2.7Fail
1.6Fail
1.6Fail
2.1Fail
6.0AA
Black BG
7.7AAA
13.1AAA
12.9AAA
9.9AAA
3.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

7576AD
D1D1BD
E0DFA0
C1C0C8
656471

Deuteranopia

6F68AD
D1D2BE
E4E8A2
C4C9C5
656670

Tritanopia

51ACAC
D5C0C1
F7A7A9
D8BEBB
686D6C

Achromatopsia

8E8E8E
CCCCCC
CBCBCB
B7B7B7
656565

Shades & Tints Shades & Tints

#4CAAAE

Dark
Light

#D5CBB8

Dark
Light

#FABE96

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4caaae;
  --color-2: #d5cbb8;
  --color-3: #fabe96;
  --color-4: #db9ed6;
  --color-5: #686077;
}

SCSS

$color-1: #4caaae;
$color-2: #d5cbb8;
$color-3: #fabe96;
$color-4: #db9ed6;
$color-5: #686077;

TAILWIND

colors: {
  'brand-1': '#4caaae',
  'brand-2': '#d5cbb8',
  'brand-3': '#fabe96',
  'brand-4': '#db9ed6',
  'brand-5': '#686077',
}

RGB Array

[76, 170, 174], [213, 203, 184], [250, 190, 150], [219, 158, 214], [104, 96, 119]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4CAAAE, #D5CBB8, #FABE96, #DB9ED6, #686077 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: #4caaae; --color-2: #d5cbb8; --color-3: #fabe96; --color-4: #db9ed6; --color-5: #686077. 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