Colour reference

Violet 500

#8b5cf6

RGB: rgb(139 92 246)
HSL: 258°, 90%, 66%
OKLCh: 60.6% 0.219 292.7

Violet 500 in every format

Web & CSSThe everyday formats for stylesheets and design tools.

Hex	`#8b5cf6`
RGB	`rgb(139 92 246)`
RGB legacy	`rgb(139, 92, 246)`
RGB percent	`rgb(54.51% 36.08% 96.47%)`
HSL	`hsl(258.3 89.5% 66.3%)`
HSL legacy	`hsl(258.3, 89.5%, 66.3%)`
HSV / HSB	`hsv(258.3, 62.6%, 96.5%)`
HWB	`hwb(258.3 36.1% 3.5%)`
Nearest name	`mediumslateblue (approx.)`
CMYK	`cmyk(43.5%, 62.6%, 0%, 3.5%)`Naive conversion. Real print work needs an ICC profile.

Perceptual & wide gamutModern CSS colour spaces for uniform scales and P3 displays.

OKLCh	`oklch(60.563% 0.21892 292.717)`Modern CSS colour space for even palettes — better than HSL when building scales.
OKLab	`oklab(60.563% 0.08454 -0.20193)`
CIE LCh	`lch(50.691% 85.189 302.563)`
CIE Lab	`lab(50.691% 45.851 -71.797)`
Display P3	`color(display-p3 0.5183 0.3688 0.9315)`
Rec. 2020	`color(rec2020 0.476 0.3346 0.9165)`
srgb-linear	`color(srgb-linear 0.2582 0.107 0.9216)`Light-linear sRGB — the same numbers a shader wants for maths.
CIE XYZ (D65)	`color(xyz-d65 0.3111 0.198 0.8937)`

ShadersGLSL, HLSL and WGSL vectors in both encoded and linear form.

GLSL vec3 — sRGB	`vec3(0.545, 0.361, 0.965)`Encoded values. Use when writing straight to the framebuffer.
GLSL vec3 — linear	`vec3(0.258, 0.107, 0.922)`Light-linear values. Use for lighting, blending and mixing.
GLSL vec4 — sRGB	`vec4(0.545, 0.361, 0.965, 1.0)`
GLSL vec4 — linear	`vec4(0.258, 0.107, 0.922, 1.0)`
GLSL ivec3	`ivec3(139, 92, 246)`
HLSL float3 — sRGB	`float3(0.545, 0.361, 0.965)`
HLSL float3 — linear	`float3(0.258, 0.107, 0.922)`
HLSL float4 — sRGB	`float4(0.545, 0.361, 0.965, 1.0)`
HLSL half4 — sRGB	`half4(0.545, 0.361, 0.965, 1.0)`
WGSL vec3f — sRGB	`vec3f(0.545, 0.361, 0.965)`
WGSL vec4f — sRGB	`vec4f(0.545, 0.361, 0.965, 1.0)`
WGSL vec3<f32> — linear	`vec3<f32>(0.258, 0.107, 0.922)`

Engines & appsConstructors for Unity, Unreal, Godot, Flutter, SwiftUI and Android.

Unity Color	`new Color(0.545f, 0.361f, 0.965f, 1.0f)`Color for everyday scripting (0–1). Color32 when you need whole numbers from 0 to 255.
Unity Color32	`new Color32(139, 92, 246, 255)`
Unreal FLinearColor	`FLinearColor(0.2582f, 0.107f, 0.9216f, 1.0f)`FLinearColor for materials and lighting. FColor when you need whole numbers from 0 to 255.
Unreal FColor	`FColor(139, 92, 246, 255)`Whole numbers from 0 to 255 — use when an API asks for FColor, not FLinearColor.
Godot Color	`Color(0.545, 0.361, 0.965, 1)`
Flutter Color	`Color(0xFF8B5CF6)`Packed ARGB, so alpha comes first.
Android Color	`Color.rgb(139, 92, 246)`
SwiftUI Color	`Color(red: 0.545, green: 0.361, blue: 0.965)`
UIKit UIColor	`UIColor(red: 0.545, green: 0.361, blue: 0.965, alpha: 1)`

Raw valuesPacked integers and plain arrays.

0x hex	`0x8B5CF6`
0x hex (ARGB)	`0xFF8B5CF6`
Array 0–1	`[0.545, 0.361, 0.965]`
Array 0–255	`[139, 92, 246]`
Decimal integer	`9133302`

Contrast and accessibility

WCAG 2 ratios are what audits and legislation reference. APCA is shown alongside because WCAG 2 is known to misjudge mid-tone backgrounds, and it is the basis of the WCAG 3 draft.

Pairing	WCAG 2 ratio	Level	APCA	Suitable for
Violet 500 on white	4.23:1	AA Large	Lc 69	Headings and large text
Violet 500 on black	4.96:1	AA	Lc 33	Non-text elements only

Violet 500 text on a white background

Violet 500 text on a black background

White text on Violet 500

Black text on Violet 500

Tonal scale

Hue held fixed while lightness walks OKLCh, ready to use as a design system ramp.

50#f8f4ff
100#eee8ff
200#ddd3ff
300#c8b7ff
400#af90ff
500#9466ff
600#7b4cdf
700#6434be
800#5121a1
900#411087
950#27005c

Tints and shades

Mixed perceptually toward white and black, so the steps feel evenly spaced.

Tint 1#9c7bfa
Tint 2#ae97fd
Tint 3#c1b1ff
Tint 4#d5ccff
Tint 5#e9e5ff
Shade 1#6c46c1
Shade 2#4e328f
Shade 3#321f5f
Shade 4#190d34
Shade 5#04020e

Colours that work with Violet 500

Complementary, triadic and analogous partners, rotated in OKLCh so they keep the same apparent brightness.

#848a00
#d05a00
#009b79
#3476ff
#bc45cc

Closest CSS names

mediumslateblueΔEok 0.036
mediumpurpleΔEok 0.066
slateblueΔEok 0.082
bluevioletΔEok 0.086
darkorchidΔEok 0.098
mediumorchidΔEok 0.100