CSS named colour
Blue Violet
#8a2be2
A CSS named colour: blueviolet is valid anywhere a colour is expected.
- RGB
- rgb(138 43 226)
- HSL
- 271°, 76%, 53%
- OKLCh
- 53.4% 0.250 301.4
Blue Violet in every format
Web & CSSThe everyday formats for stylesheets and design tools.
| Hex | #8a2be2 | |
|---|---|---|
| RGB | rgb(138 43 226) | |
| RGB legacy | rgb(138, 43, 226) | |
| RGB percent | rgb(54.12% 16.86% 88.63%) | |
| HSL | hsl(271.1 75.9% 52.7%) | |
| HSL legacy | hsl(271.1, 75.9%, 52.7%) | |
| HSV / HSB | hsv(271.1, 81%, 88.6%) | |
| HWB | hwb(271.1 16.9% 11.4%) | |
| Nearest name | blueviolet | |
| CMYK | cmyk(38.9%, 81%, 0%, 11.4%)Naive conversion. Real print work needs an ICC profile. |
Perceptual & wide gamutModern CSS colour spaces for uniform scales and P3 displays.
| OKLCh | oklch(53.376% 0.25031 301.375)Modern CSS colour space for even palettes — better than HSL when building scales. | |
|---|---|---|
| OKLab | oklab(53.376% 0.13032 -0.21371) | |
| CIE LCh | lch(41.211% 98.691 309.675) | |
| CIE Lab | lab(41.211% 63.008 -75.96) | |
| Display P3 | color(display-p3 0.4992 0.1957 0.8535) | |
| Rec. 2020 | color(rec2020 0.4339 0.1821 0.8294) | |
| srgb-linear | color(srgb-linear 0.2542 0.0242 0.7605)Light-linear sRGB — the same numbers a shader wants for maths. | |
| CIE XYZ (D65) | color(xyz-d65 0.2507 0.1262 0.7307) |
ShadersGLSL, HLSL and WGSL vectors in both encoded and linear form.
| GLSL vec3 — sRGB | vec3(0.541, 0.169, 0.886)Encoded values. Use when writing straight to the framebuffer. | |
|---|---|---|
| GLSL vec3 — linear | vec3(0.254, 0.024, 0.761)Light-linear values. Use for lighting, blending and mixing. | |
| GLSL vec4 — sRGB | vec4(0.541, 0.169, 0.886, 1.0) | |
| GLSL vec4 — linear | vec4(0.254, 0.024, 0.761, 1.0) | |
| GLSL ivec3 | ivec3(138, 43, 226) | |
| HLSL float3 — sRGB | float3(0.541, 0.169, 0.886) | |
| HLSL float3 — linear | float3(0.254, 0.024, 0.761) | |
| HLSL float4 — sRGB | float4(0.541, 0.169, 0.886, 1.0) | |
| HLSL half4 — sRGB | half4(0.541, 0.169, 0.886, 1.0) | |
| WGSL vec3f — sRGB | vec3f(0.541, 0.169, 0.886) | |
| WGSL vec4f — sRGB | vec4f(0.541, 0.169, 0.886, 1.0) | |
| WGSL vec3<f32> — linear | vec3<f32>(0.254, 0.024, 0.761) |
Engines & appsConstructors for Unity, Unreal, Godot, Flutter, SwiftUI and Android.
| Unity Color | new Color(0.541f, 0.169f, 0.886f, 1.0f)Color for everyday scripting (0–1). Color32 when you need whole numbers from 0 to 255. | |
|---|---|---|
| Unity Color32 | new Color32(138, 43, 226, 255) | |
| Unreal FLinearColor | FLinearColor(0.2542f, 0.0242f, 0.7605f, 1.0f)FLinearColor for materials and lighting. FColor when you need whole numbers from 0 to 255. | |
| Unreal FColor | FColor(138, 43, 226, 255)Whole numbers from 0 to 255 — use when an API asks for FColor, not FLinearColor. | |
| Godot Color | Color(0.541, 0.169, 0.886, 1) | |
| Flutter Color | Color(0xFF8A2BE2)Packed ARGB, so alpha comes first. | |
| Android Color | Color.rgb(138, 43, 226) | |
| SwiftUI Color | Color(red: 0.541, green: 0.169, blue: 0.886) | |
| UIKit UIColor | UIColor(red: 0.541, green: 0.169, blue: 0.886, alpha: 1) |
Raw valuesPacked integers and plain arrays.
| 0x hex | 0x8A2BE2 | |
|---|---|---|
| 0x hex (ARGB) | 0xFF8A2BE2 | |
| Array 0–1 | [0.541, 0.169, 0.886] | |
| Array 0–255 | [138, 43, 226] | |
| Decimal integer | 9055202 |
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 |
|---|---|---|---|---|
| Blue Violet on white | 5.96:1 | AA | Lc 78 | Body text, 18px and up |
| Blue Violet on black | 3.52:1 | AA Large | Lc 23 | Not usable for text |
Blue Violet text on a white background
Blue Violet text on a black background
White text on Blue Violet
Black text on Blue Violet
Tonal scale
Hue held fixed while lightness walks OKLCh, ready to use as a design system ramp.
- 50#fcf2ff
- 100#f4e6ff
- 200#e6d0ff
- 300#d5b1ff
- 400#c087ff
- 500#a954ff
- 600#8e36e4
- 700#751bc3
- 800#5f00a5
- 900#4d008a
- 950#2e0058
Tints and shades
Mixed perceptually toward white and black, so the steps feel evenly spaced.
- Tint 1#9c5aea
- Tint 2#ae7ff0
- Tint 3#c1a0f6
- Tint 4#d5c0fa
- Tint 5#eadffd
- Shade 1#6b1fb1
- Shade 2#4e1483
- Shade 3#320a57
- Shade 4#18032f
- Shade 5#04000c
Colours that work with Blue Violet
Complementary, triadic and analogous partners, rotated in OKLCh so they keep the same apparent brightness.
- #607900
- #a65400
- #008271
- #424efa
- #b600ac
Closest CSS names
bluevioletexact matchdarkvioletΔEok 0.043darkorchidΔEok 0.049slateblueΔEok 0.098mediumslateblueΔEok 0.109mediumorchidΔEok 0.125