#700CAD + #BCA1C7 + #57478F + #A1C7AC + #37657A - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#700CAD

Royal Purple · DarkMagenta · Eggplant

HEX

#700CAD

RGB

rgb(112, 12, 173)

HSL

hsl(277, 87%, 36%)

HSB

hsb(277, 93%, 68%)

CMYK

cmyk(35%, 93%, 0%, 32%)

Oklch

oklch(43.6% 0.218 305.8)

Traditional「Royal Purple」· Paint「Eggplant」· Creative Blush Sunrise

#BCA1C7

Lilac · Silver · Lilac Purple

HEX

#BCA1C7

RGB

rgb(188, 161, 199)

HSL

hsl(283, 25%, 71%)

HSB

hsb(283, 19%, 78%)

CMYK

cmyk(6%, 19%, 0%, 22%)

Oklch

oklch(74.5% 0.061 316.1)

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

#57478F

Deep Indigo · DarkSlateBlue · Navy Blue

HEX

#57478F

RGB

rgb(87, 71, 143)

HSL

hsl(253, 34%, 42%)

HSB

hsb(253, 50%, 56%)

CMYK

cmyk(39%, 50%, 0%, 44%)

Oklch

oklch(45.0% 0.115 291.3)

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

#A1C7AC

Celadon · DarkGray · Apple Green

HEX

#A1C7AC

RGB

rgb(161, 199, 172)

HSL

hsl(137, 25%, 71%)

HSB

hsb(137, 19%, 78%)

CMYK

cmyk(19%, 0%, 14%, 22%)

Oklch

oklch(79.4% 0.056 154.1)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#37657A

Slate Blue · DarkSlateBlue · Mint Ice

HEX

#37657A

RGB

rgb(55, 101, 122)

HSL

hsl(199, 38%, 35%)

HSB

hsb(199, 55%, 48%)

CMYK

cmyk(55%, 17%, 0%, 52%)

Oklch

oklch(48.3% 0.061 229.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

700CAD

49AC0C

Analogous

1F0CAC

700CAD

AC0C99

Triadic

700CAD

AC6E0C

0CAC6E

Split-Comp.

700CAD

99AC0C

0CAC1F

Tetradic

700CAD

AC1F0C

49AC0C

0C99AC

Contrast Matrix WCAG 2.1 Contrast

700CAD	BCA1C7	57478F	A1C7AC	37657A
—	3.9 AA Large	1.2 Fail	4.8 AA	1.4 Fail
3.9 AA Large	—	3.4 AA Large	1.2 Fail	2.7 Fail
1.2 Fail	3.4 AA Large	—	4.2 AA Large	1.2 Fail
4.8 AA	1.2 Fail	4.2 AA Large	—	3.4 AA Large
1.4 Fail	2.7 Fail	1.2 Fail	3.4 AA Large	—

White BG

9.0AAA

2.3Fail

7.8AAA

1.9Fail

6.4AA

Black BG

2.3Fail

9.1AAA

2.7Fail

11.3AAA

3.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

454486

B0B0BE

50507E

B1B2B3

4B4B75

Deuteranopia

4B527D

B2B4BC

515279

AFACB4

484574

Tritanopia

6B6761

BBB7B5

56706D

A3B8B9

397170

Achromatopsia

3C3C3C

ADADAD

545454

B9B9B9

5A5A5A

Shades & Tints Shades & Tints

#700CAD

Dark

Light

#BCA1C7

Dark

Light

#57478F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #700cad;
  --color-2: #bca1c7;
  --color-3: #57478f;
  --color-4: #a1c7ac;
  --color-5: #37657a;
}

SCSS

$color-1: #700cad;
$color-2: #bca1c7;
$color-3: #57478f;
$color-4: #a1c7ac;
$color-5: #37657a;

TAILWIND

colors: {
  'brand-1': '#700cad',
  'brand-2': '#bca1c7',
  'brand-3': '#57478f',
  'brand-4': '#a1c7ac',
  'brand-5': '#37657a',
}

RGB Array

[112, 12, 173], [188, 161, 199], [87, 71, 143], [161, 199, 172], [55, 101, 122]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #700CAD, #BCA1C7, #57478F, #A1C7AC, #37657A 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: #700cad; --color-2: #bca1c7; --color-3: #57478f; --color-4: #a1c7ac; --color-5: #37657a. 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