ColorTool
Log in
#677CA5

#677ca5 ≈ Glaucous

  • azure
  • Lightness: medium
  • Saturation: muted
  • Cool
Check contrast Explore in graph Random color

#677ca5 is a color from the azure family, with medium lightness and muted saturation. In the RGB model it is made of 40.39% red, 48.63% green and 64.71% blue; printed in CMYK it uses 37.58% cyan, 24.85% magenta, 0% yellow and 35.29% black. Its hue angle is 219.68°, with 25.62% saturation and 52.55% lightness in HSL. It is a cool color, often associated with openness, freedom and calm. Designers typically use it for technology products, finance and banking and brand accents. Black text on this color reaches a contrast ratio of 5:1 (WCAG AA). The closest named color is Glaucous (#6082b6), ΔE 4.21.

Description generated from the measured properties of this color.

HEX
RGB
RGB percent
CMY
CMYK
HSL
HSV / HSB
Web safe#666699
CIE-LAB
XYZ
xyY
CIE-LCH
CIE-LUV
Hunter-Lab
OKLab
Binary
Decimal
Relative luminance0.2002

Complementary

  1. #677ca5
  2. #a59067

Split complementary

  1. #677ca5
  2. #a57167
  3. #9ba567

Analogous

  1. #679ba5
  2. #677ca5
  3. #7167a5

Triadic

  1. #677ca5
  2. #a5677c
  3. #7ca567

Tetradic

  1. #677ca5
  2. #9067a5
  3. #a59067
  4. #7ca567

Square

  1. #677ca5
  2. #a5679b
  3. #a59067
  4. #67a571

Monochromatic

  1. #2b3548
  2. #475878
  3. #677ca5
  4. #97a5c1
  5. #c7cfde

Shades

#677ca5 mixed progressively with black.

  1. #677ca5
  2. #5d7095
  3. #526384
  4. #485774
  5. #3e4a63
  6. #343e53
  7. #293242
  8. #1f2532
  9. #151921
  10. #0a0c11
  11. #000000

Tints

#677ca5 mixed progressively with white.

  1. #677ca5
  2. #7689ae
  3. #8596b7
  4. #95a3c0
  5. #a4b0c9
  6. #b3bed2
  7. #c2cbdb
  8. #d1d8e4
  9. #e1e5ed
  10. #f0f2f6
  11. #ffffff

Tones

#677ca5 mixed progressively with gray.

  1. #677ca5
  2. #6a7ca1
  3. #6c7d9e
  4. #6f7d9a
  5. #717e96
  6. #747e93
  7. #767e8f
  8. #797f8b
  9. #7b7f87
  10. #7e8084
  11. #808080

Readable text 4.2:1 AA ✕ AA Large ✓ AAA ✕ AAA Large ✕
Readable text 5:1 AA ✓ AA Large ✓ AAA ✕ AAA Large ✓

Achromatopsia #7c7c7c ≈ 0.003% of males
Achromatomaly #747c8e ≈ 0.001% of males
Protanopia #6e7fa7 ≈ 1.01% of males
Deuteranopia #6879a4 ≈ 1.27% of males
Tritanopia #53848a ≈ 0.0001% of males
Protanomaly #6b7ea6 ≈ 1.08% of males
Deuteranomaly #677aa4 ≈ 4.63% of males
Tritanomaly #5c8196 ≈ 0.0002% of males
Simulate on your own image

Text in this color

Background in this color

Border in this color

Text color
.text-677ca5 {
  color: #677ca5;
}
Background
.bg-677ca5 {
  background-color: #677ca5;
  color: #000000;
}
Border
.border-677ca5 {
  border: 2px solid #677ca5;
}
CSS variables
:root {
  --color-primary: #677ca5;
  --color-primary-rgb: 103 124 165;
  --color-primary-hsl: 220 26% 53%;
}
Gradient
.gradient-677ca5 {
  background: linear-gradient(135deg, #677ca5, #7167a5);
}
Colored shadow
.shadow-677ca5 {
  box-shadow: 0 8px 24px rgb(103 124 165 / 0.35);
}

#6082b6 Glaucous ΔE 4.21 #417dc1 Tufts Blue ΔE 8.08 #708090 Slate Gray ΔE 8.42 #708090 Slate Grey ΔE 8.42 #4682b4 Steel Blue ΔE 8.50 #778899 Light Slate Gray ΔE 8.98 #778899 Light Slate Grey ΔE 8.98 #98835a Inverted #7c7c7c Grayscale 

Glaucous
#677ca5  rgb(103, 124, 165)  hsl(220, 26%, 53%)  Glaucous
#a59067  rgb(165, 144, 103)  hsl(40, 26%, 53%)  Camel
#a5677c  rgb(165, 103, 124)  hsl(340, 26%, 53%)  Turkish Rose
#7ca567  rgb(124, 165, 103)  hsl(100, 26%, 53%)  Asparagus