#6040FF colour

#6040FF is a vivid violet close to CSS slateblue: RGB 96, 64, 255, HSL 250, 100%, 63%. White text passes AA (5.71:1). Tints, shades and colour harmonies.

#6040FF

Nearest CSS name: slateblue #6a5acd (not an exact match)
Described as: a vivid violet
Red, green, blue: 96, 64, 255
Web safe: No
Luminance: 0.1337 (WCAG relative luminance, 0 is black, 1 is white)

Colour codes

HEX	`#6040ff`
RGB	`rgb(96, 64, 255)`
RGB (percent)	`rgb(37.6% 25.1% 100%)`
HSL	`hsl(250.1, 100%, 62.5%)`
HSV / HSB	`hsv(250.1, 74.9%, 100%)`
HWB	`hwb(250.1 25.1% 0%)`
CMYK (naive)	`cmyk(62%, 75%, 0%, 0%)`
CIELAB (D50)	`lab(41.75% 53.71 -91.6)`
OKLCH	`oklch(53.94% 0.2625 280.61)`
Decimal	`6308095`

CMYK here is the plain formula with no colour profile, so treat it as a starting point; a printer's profile gives the real ink values. CIELAB uses a D50 white point, as CSS lab() does. HSV is not a CSS function, so it is shown for design apps only.

Contrast with white and black text

White text, 5.71:1The quick brown fox jumps over the lazy dog.

Black text, 3.67:1The quick brown fox jumps over the lazy dog.

Text	Ratio	AA normal (4.5)	AA large (3)	AAA normal (7)	AAA large (4.5)
White	5.71:1	Pass	Pass	Fail	Pass
Black	3.67:1	Fail	Pass	Fail	Fail

White text is the better choice on #6040FF (5.71:1). Ratios use the WCAG 2.2 formula; large text means at least 24px, or 18.66px bold. Check another pair.

Tints and shades

Mixed with white, then with black, in ten even steps (straight sRGB mixing, as most design tools do).

9%#6e51ff 18%#7d63ff 27%#8b74ff 36%#9a85ff 45%#a897ff 55%#b7a8ff 64%#c5baff 73%#d4cbff 82%#e2dcff 91%#f1eeff

9%#573ae8 18%#4f34d1 27%#462fb9 36%#3d29a2 45%#34238b 55%#2c1d74 64%#23175d 73%#1a1146 82%#110c2e 91%#090617

Colour harmonies

Hue turned around the HSL colour wheel, saturation and lightness kept.

Complementary

The hue opposite on the colour wheel (180°).

#6040ff #dfff40

Analogous

Neighbours 30° either side.

#4080ff #6040ff #c040ff

Triadic

Three hues 120° apart.

#6040ff #ff6040 #40ff60

Split complementary

The two hues either side of the complement (150° and 210°).

#6040ff #ffc040 #80ff40

Tetradic (square)

Four hues 90° apart.

#6040ff #ff4080 #dfff40 #40ffc0

How it looks with colour blindness

Normal vision#6040ff Protanopia#006dff Deuteranopia#005ffc Tritanopia#00789e Achromatopsia#666666

Simulated with the Machado, Oliveira and Fernandes (2009) matrices at full severity, applied in linear RGB; achromatopsia shows the colour's luminance as grey. Milder forms (protanomaly, deuteranomaly) are far more common and shift colours less. Never use colour as the only way to carry meaning.

CSS

Text colour	`color: #6040ff;`
Background	`background-color: #6040ff;`
Border	`border: 1px solid #6040ff;`
Half transparent	`background-color: rgb(96 64 255 / 50%);`
Custom property	`--colour-main: #6040ff;`
Gradient to a darker shade	`background: linear-gradient(135deg, #6040ff, #3a2699);`
Gradient from a lighter tint	`background: linear-gradient(180deg, #a08cff, #6040ff);`
Text on this colour	`background-color: #6040ff; color: #fff;`

Similar named colours

Distance is measured in OKLab, scaled by 100; under about 2 is hard to tell apart side by side.

Convert #6040FF to other formats · Build a palette from it · Check contrast · All named colours

Colour names from CSS Color Module Level 4. Palette values from the Tailwind CSS v3 default palette (MIT licence) and the Material Design 2014 colour palette as published in Material Design Lite (Apache License 2.0). All other values are calculated from the hex code.