← Back to Editor

#3B5DF5 · #8070B6 · #C48376 · #BC6D79 · #76C4B3

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

#3B5DF5

Azure · DodgerBlue · Navy Blue

HEX
#3B5DF5
RGB
rgb(59, 93, 245)
HSL
hsl(229, 90%, 60%)
HSB
hsb(229, 76%, 96%)
CMYK
cmyk(76%, 62%, 0%, 4%)
Oklch
oklch(55.1% 0.230 268.0)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#8070B6

Deep Indigo · SlateBlue · Navy Blue

HEX
#8070B6
RGB
rgb(128, 112, 182)
HSL
hsl(254, 32%, 58%)
HSB
hsb(254, 38%, 71%)
CMYK
cmyk(30%, 38%, 0%, 29%)
Oklch
oklch(58.9% 0.106 293.4)

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

#C48376

Peach Pink · DarkSalmon · Coral Red

HEX
#C48376
RGB
rgb(196, 131, 118)
HSL
hsl(10, 40%, 62%)
HSB
hsb(10, 40%, 77%)
CMYK
cmyk(0%, 33%, 40%, 23%)
Oklch
oklch(67.3% 0.083 31.8)

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

#BC6D79

Crimson · LightCoral · Passion Red

HEX
#BC6D79
RGB
rgb(188, 109, 121)
HSL
hsl(351, 37%, 58%)
HSB
hsb(351, 42%, 74%)
CMYK
cmyk(0%, 42%, 36%, 26%)
Oklch
oklch(62.5% 0.101 10.6)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#76C4B3

Jade · MediumAquaMarine · Lake Green

HEX
#76C4B3
RGB
rgb(118, 196, 179)
HSL
hsl(167, 40%, 62%)
HSB
hsb(167, 40%, 77%)
CMYK
cmyk(40%, 0%, 9%, 23%)
Oklch
oklch(76.5% 0.082 178.5)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3B5DF5
F5D33D

Analogous

3DBBF5
3B5DF5
773DF5

Triadic

3B5DF5
F53D5F
5FF53D

Split-Comp.

3B5DF5
F5773D
BBF53D

Tetradic

3B5DF5
F53DBB
F5D33D
3DF577

Contrast Matrix WCAG 2.1 Contrast

3B5DF5
8070B6
C48376
BC6D79
76C4B3
—
1.2
Fail
1.7
Fail
1.4
Fail
2.5
Fail
1.2
Fail
—
1.4
Fail
1.1
Fail
2.1
Fail
1.7
Fail
1.4
Fail
—
1.2
Fail
1.5
Fail
1.4
Fail
1.1
Fail
1.2
Fail
—
1.8
Fail
2.5
Fail
2.1
Fail
1.5
Fail
1.8
Fail
—
White BG
5.2AA
4.3AA Large
3.1AA Large
3.7AA Large
2.0Fail
Black BG
4.1AA Large
4.9AA
6.9AA
5.6AA
10.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4A4AD0
7979A5
A8A779
9A9976
9898B7

Deuteranopia

4845C7
7A7BA1
ACB17A
9EA475
938DB8

Tritanopia

3DB3AD
7F9895
C17C7C
B87473
7ABABB

Achromatopsia

646464
7D7D7D
959595
868686
ABABAB

Shades & Tints Shades & Tints

#3B5DF5

Dark
Light

#8070B6

Dark
Light

#C48376

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3b5df5;
  --color-2: #8070b6;
  --color-3: #c48376;
  --color-4: #bc6d79;
  --color-5: #76c4b3;
}

SCSS

$color-1: #3b5df5;
$color-2: #8070b6;
$color-3: #c48376;
$color-4: #bc6d79;
$color-5: #76c4b3;

TAILWIND

colors: {
  'brand-1': '#3b5df5',
  'brand-2': '#8070b6',
  'brand-3': '#c48376',
  'brand-4': '#bc6d79',
  'brand-5': '#76c4b3',
}

RGB Array

[59, 93, 245], [128, 112, 182], [196, 131, 118], [188, 109, 121], [118, 196, 179]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3B5DF5, #8070B6, #C48376, #BC6D79, #76C4B3 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: #3b5df5; --color-2: #8070b6; --color-3: #c48376; --color-4: #bc6d79; --color-5: #76c4b3. 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