← Back to Editor

#495C6E · #7A6B8C · #B3799E · #FC7C7C · #F25C8C

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

#495C6E

Slate Blue · DimGray · Prussian Blue

HEX
#495C6E
RGB
rgb(73, 92, 110)
HSL
hsl(209, 20%, 36%)
HSB
hsb(209, 34%, 43%)
CMYK
cmyk(34%, 16%, 0%, 57%)
Oklch
oklch(46.6% 0.038 247.2)

Traditional「Slate Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

#7A6B8C

Deep Indigo · SlateGray · Violet

HEX
#7A6B8C
RGB
rgb(122, 107, 140)
HSL
hsl(267, 13%, 48%)
HSB
hsb(267, 24%, 55%)
CMYK
cmyk(13%, 24%, 0%, 45%)
Oklch
oklch(55.4% 0.053 305.4)

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

#B3799E

Rose Purple · DarkGray · Rose Pink

HEX
#B3799E
RGB
rgb(179, 121, 158)
HSL
hsl(322, 28%, 59%)
HSB
hsb(322, 32%, 70%)
CMYK
cmyk(0%, 32%, 12%, 30%)
Oklch
oklch(64.7% 0.087 341.2)

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

#FC7C7C

Peach Pink · Salmon · Coral Red

HEX
#FC7C7C
RGB
rgb(252, 124, 124)
HSL
hsl(0, 96%, 74%)
HSB
hsb(0, 51%, 99%)
CMYK
cmyk(0%, 51%, 51%, 1%)
Oklch
oklch(73.4% 0.157 21.6)

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

#F25C8C

Rouge · LightCoral · Rose Pink

HEX
#F25C8C
RGB
rgb(242, 92, 140)
HSL
hsl(341, 85%, 65%)
HSB
hsb(341, 62%, 95%)
CMYK
cmyk(0%, 62%, 42%, 5%)
Oklch
oklch(68.2% 0.188 3.7)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

495C6E
6E5B49

Analogous

496E6E
495C6E
494A6E

Triadic

495C6E
6E495C
5C6E49

Split-Comp.

495C6E
6E494A
6E6E49

Tetradic

495C6E
6E496E
6E5B49
4A6E49

Contrast Matrix WCAG 2.1 Contrast

495C6E
7A6B8C
B3799E
FC7C7C
F25C8C
—
1.4
Fail
2.0
Fail
2.7
Fail
2.2
Fail
1.4
Fail
—
1.4
Fail
1.9
Fail
1.6
Fail
2.0
Fail
1.4
Fail
—
1.4
Fail
1.1
Fail
2.7
Fail
1.9
Fail
1.4
Fail
—
1.2
Fail
2.2
Fail
1.6
Fail
1.1
Fail
1.2
Fail
—
White BG
6.9AA
4.9AA
3.4AA Large
2.5Fail
3.1AA Large
Black BG
3.0AA Large
4.3AA Large
6.1AA
8.3AAA
6.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

51516A
747384
9A9995
C5C37C
B1B080

Deuteranopia

504F69
747682
9DA293
CCD67C
BAC57E

Tritanopia

4A6665
797E7C
B08E8C
F67C7C
EA7775

Achromatopsia

585858
737373
8F8F8F
A2A2A2
8E8E8E

Shades & Tints Shades & Tints

#495C6E

Dark
Light

#7A6B8C

Dark
Light

#B3799E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #495c6e;
  --color-2: #7a6b8c;
  --color-3: #b3799e;
  --color-4: #fc7c7c;
  --color-5: #f25c8c;
}

SCSS

$color-1: #495c6e;
$color-2: #7a6b8c;
$color-3: #b3799e;
$color-4: #fc7c7c;
$color-5: #f25c8c;

TAILWIND

colors: {
  'brand-1': '#495c6e',
  'brand-2': '#7a6b8c',
  'brand-3': '#b3799e',
  'brand-4': '#fc7c7c',
  'brand-5': '#f25c8c',
}

RGB Array

[73, 92, 110], [122, 107, 140], [179, 121, 158], [252, 124, 124], [242, 92, 140]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #495C6E, #7A6B8C, #B3799E, #FC7C7C, #F25C8C 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: #495c6e; --color-2: #7a6b8c; --color-3: #b3799e; --color-4: #fc7c7c; --color-5: #f25c8c. 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