#674AAF#674AAF
#674AAF is a mid, vivid violet. Relative luminance 0.109; OKLCH L 49.2% C 0.154 H 293.1°. Best body text is #FFFFFF at 6.61:1 contrast (WCAG AA passes).
Color values
| HEX | #674AAF |
|---|---|
| RGB | rgb(103, 74, 175) |
| HSL | hsl(257, 41%, 49%) |
| HSV | hsv(257, 58%, 69%) |
| CMYK | cmyk(41.1%, 57.7%, 0%, 31.4%) |
| CIE-LAB | lab(39.37, 36.13, -49.91) |
| CIE-LCH | lch(39.37, 61.61, 305.90°) |
| OKLab | oklab(49.25% 0.0606 -0.142) |
| OKLCH | oklch(49.25% 0.154 293.1) |
| XYZ | xyz(15.7781, 10.8759, 41.8171) |
| Luminance | 0.1088 (WCAG relative) |
| Temperature | cool |
| Family | violet |
Closest named colors
Bluey Purple
#6241C7
ΔE00 4.50
Royal Purple
#7851A9
ΔE00 4.52
Ocean Blue
#4F42B5
ΔE00 4.89
Iris
#6258C4
ΔE00 5.62
Blue With A Hint Of Purple
#533CC6
ΔE00 6.04
Slate Blue
#6A5ACD
ΔE00 6.59
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#674AAF #92AF4A
analogous
#4A60AF #674AAF #9A4AAF
triadic
#674AAF #AF674A #4AAF67
tetradic
#674AAF #AF4A60 #92AF4A #4AAF9A
square
#674AAF #AF4A60 #92AF4A #4AAF9A
split-complementary
#674AAF #AF9A4A #60AF4A
monochromatic
#342659 #4E3884 #674AAF #8A73C4 #AE9ED6
Accessibility & contrast
On white
6.61
#674AAF on #FFFFFF
AA ✓AA large ✓AAA ✗
On black
3.18
#674AAF on #000000
AA ✗AA large ✓AAA ✗
Best text color
#FFFFFF on #674AAF
6.61:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##674AAF | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##674AAF | 1.00 | 6.61 | 3.18 | 6.61 |
| #FFFFFF | 6.61 | 1.00 | 21.00 | 1.00 |
| #000000 | 3.18 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 6.61 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#0F5EB2
Deuteranopia (green-blind)
#1B5BAD
Tritanopia (blue-blind)
#546075
Achromatopsia (no color)
#5D5D5D
Design tokens & code
CSS
--color: #674aaf; /* rgb */ color: rgb(103, 74, 175); /* oklch */ color: oklch(49.2% 0.154 293.1);
Tailwind
colors: {
custom: {
50: '#977dc7',
500: '#674aaf',
950: '#000000',
},
}SCSS
$custom: #674aaf; $custom-light: #977dc7; $custom-dark: #000000;
JSON
{
"hex": "#674aaf",
"rgb": {
"r": 103,
"g": 74,
"b": 175
},
"hsl": {
"h": 257.228,
"s": 40.562,
"l": 48.824
},
"oklch": {
"l": 0.49248,
"c": 0.15438,
"h": 293.1
},
"luminance": 0.10876
}Semantic roles & 50–950 ramp
primary
#674AAF
secondary
#B5C292
accent
#D057AE
background
#F9F7FC
surface
#F2EEF8
border
#CCC9D1
text
#0E0A13
muted
#7E7C82