#686FE5

#686FE5

Color Values

HEX

#686FE5

RGB

104, 111, 229

HSL

236.6, 70.6%, 65.3%

HSV

236.6, 54.6%, 89.8%

CMYK

54.6%, 51.5%, 0.0%, 10.2%

OKLCH

0.5964 0.1757 277.1

Properties

Cool Light Nearest: royalblue

Color Harmonies

Complementary

#686FE5

#E5DE68

Analogous

#68AEE5

#9F68E5

#686FE5

Triadic

#686FE5

#E5686F

#6FE568

Split Complementary

#686FE5

#E59F68

#AEE568

Tetradic

#686FE5

#E568AE

#E5DE68

#68E59F

Color Blindness Simulation

Original

#686FE5

Protanopia

#6B6BC8

Deuteranopia

#6B6AC2

Tritanopia

#68B2AD

Achromatopsia

#767676

CSS Usage

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

Tailwind Shades

50
#F3F3FC
100
#E2E4F8
200
#C2C5F5
300
#979BED
400
#5E66E3
500
#2530DA
600
#1E26AE
700
#181F8B
800
#13186D
900
#12154F
950
#0B0D32

Contrast Checker

Text on white

4.21:1

AA Fail AAA Fail

Text on black

4.99: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