#677AC0

#677AC0

Color Values

HEX

#677AC0

RGB

103, 122, 192

HSL

227.2, 41.4%, 57.8%

HSV

227.2, 46.4%, 75.3%

CMYK

46.4%, 36.5%, 0.0%, 24.7%

OKLCH

0.5949 0.1095 271.2

Properties

Cool Light Nearest: Indigo

Color Harmonies

Complementary

#677AC0

#C0AD67

Analogous

#67A6C0

#8067C0

#677AC0

Triadic

#677AC0

#C0677A

#7AC067

Split Complementary

#677AC0

#C08067

#A6C067

Tetradic

#677AC0

#C067A6

#C0AD67

#67C080

Color Blindness Simulation

Original

#677AC0

Protanopia

#6F6FAF

Deuteranopia

#6E6DAB

Tritanopia

#68A29F

Achromatopsia

#7B7B7B

CSS Usage

background-color: #677AC0;
color: #677AC0;
border-color: #677AC0;
Nearest Tailwind: Sky 600 #0284C7

Tailwind Shades

50
#F5F6FA
100
#E7EAF3
200
#CDD3EA
300
#A8B3DB
400
#7A8AC8
500
#4B61B4
600
#3C4E90
700
#303E73
800
#25315A
900
#1E2643
950
#13182A

Contrast Checker

Text on white

4.1:1

AA Fail AAA Fail

Text on black

5.12:1

AA Pass AAA Fail

Related Articles

Tutorials

Building a Color Picker Web Component from Scratch

Feb 20, 2026
Tutorials

Web Color Performance: Gradients, Shadows, and Filters

Feb 19, 2026
Tutorials

Tailwind CSS Colors: Complete Shade System Guide

Feb 19, 2026