#686EFF

#686EFF

Color Values

HEX

#686EFF

RGB

104, 110, 255

HSL

237.6, 100.0%, 70.4%

HSV

237.6, 59.2%, 100.0%

CMYK

59.2%, 56.9%, 0.0%, 0.0%

OKLCH

0.613 0.2112 276.4

Properties

Cool Light Nearest: slateblue 1

Color Harmonies

Complementary

#686EFF

#FFF968

Analogous

#68BAFF

#AD68FF

#686EFF

Triadic

#686EFF

#FF686E

#6EFF68

Split Complementary

#686EFF

#FFAD68

#BAFF68

Tetradic

#686EFF

#FF68BA

#FFF968

#68FFAD

Color Blindness Simulation

Original

#686EFF

Protanopia

#6B6BDC

Deuteranopia

#6A6AD4

Tritanopia

#68C0BA

Achromatopsia

#777777

CSS Usage

background-color: #686EFF;
color: #686EFF;
border-color: #686EFF;
Nearest Tailwind: Indigo 500 #6366F1

Tailwind Shades

50
#F1F1FE
100
#DEDFFC
200
#B8BAFF
300
#8589FF
400
#424AFF
500
#000AFF
600
#0008CC
700
#0007A3
800
#000580
900
#05085C
950
#03053A

Contrast Checker

Text on white

3.99:1

AA Fail AAA Fail

Text on black

5.26:1

AA Pass AAA Fail

Related Articles

Tutorials

Responsive Color: Adapting Colors for Different Screens

Jan 23, 2026
Tutorials

Color for Data Storytelling: Beyond Default Chart Colors

Jan 21, 2026
Tutorials

How to Choose Brand Colors: A Step-by-Step Guide

Jan 18, 2026