Cadet Blue (#5F9EA0)

HEX, RGB, HSL, CMYK values + mood/style/use-case color tags. Use this page to keep your colors consistent across web and print.

Preview

Sample Text

This is how text may look on this color.

Best text color: #000000
Contrast vs white: 3.05:1 — vs black: 6.88:1

Color values

HEX #5F9EA0
RGB rgb(95, 158, 160)
HSL hsl(181, 40%, 62%)
CMYK cmyk( 40.63, 1.25, 0, 37.25 )
Websafe #669999

Convert this color Check contrast Extract from image Resize/Compress image

Tags

Mood

Style

Use case

Text (210) Logo (175) Print (170)

Tip: tags are heuristic suggestions (helpful for browsing and inspiration).

Color Harmonies

Colors that pair well with #5F9EA0 based on color theory relationships.

Complementary

The color directly opposite on the color wheel — creates maximum contrast and vibrance.

Cadet Blue
#5F9EA0 Base

#A0615F

Analogous

Colors adjacent on the wheel — naturally harmonious and pleasing to the eye.

Cadet Blue
#5F9EA0 Base

#5FA082

#5F7DA0

Triadic

Three colors equally spaced 120° apart — bold, balanced, and visually rich.

Cadet Blue
#5F9EA0 Base

#A05F9E

#9EA05F

Split-Complementary

Two colors flanking the complement — high contrast with less tension than full complementary.

Cadet Blue
#5F9EA0 Base

#A05F7D

#A0825F

Tetradic (Square)

Four colors at 90° intervals — rich variety, best when one color dominates.

Cadet Blue
#5F9EA0 Base

#825FA0

#A0615F

#7DA05F

Monochromatic

Shades and tints of the same hue — cohesive, elegant, and easy to work with.

Cadet Blue
#5F9EA0 Base

#263F40

#426F70

#508586

#79AEAF

#8FBBBD

#BFD8D9

Shades & Tints

Darker shades and lighter tints of Cadet Blue, generated by adjusting lightness while keeping the same hue and saturation.

Shades (darker)

— #091010

— #1B2C2D

— #2C494A

— #3D6566

— #4E8283

Cadet Blue #5F9EA0 Base

— #7CAFB1

— #99C1C2

— #B5D2D3

— #D2E4E4

— #EFF5F6

CSS & SCSS Snippets

Ready-to-use code snippets for #5F9EA0. Click the copy button to copy any snippet to your clipboard.

/* Background */
.element {
    background-color: #5F9EA0;
}

/* Text */
.element {
    color: #5F9EA0;
}

/* Border */
.element {
    border: 1px solid #5F9EA0;
}

/* Linear gradient to complementary */
.element {
    background: linear-gradient(
        to right,
        #5F9EA0,
        #C77C79
    );
}

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #5F9EA0,
        #C77C79
    );
}

// SCSS variable
$cadet-blue: #5F9EA0;

// With RGB channels (useful for rgba() usage)
$cadet-blue-r: 95;
$cadet-blue-g: 158;
$cadet-blue-b: 160;

// Usage
.element {
    background-color: $cadet-blue;
    color: rgba($cadet-blue-r, $cadet-blue-g, $cadet-blue-b, 0.8);
}

Color Blindness Simulation

How Cadet Blue appears to people with different types of color vision deficiency.

Normal Vision #5F9EA0 How the color appears with full color vision.

Deuteranopia #8F8FA1 Deuteranopia affects ~8% of males. Green cones are absent, making it difficult to distinguish red from green. The most common form of color blindness.

Protanopia #9999A0 Protanopia affects ~1% of males. Red cones are absent, causing reds to appear dark and indistinguishable from greens and browns.

Tritanopia #5E9E9E Tritanopia is rare (~0.003%). Blue cones are absent, making blue and yellow difficult to distinguish. Blues may appear green, yellows appear pink.

Achromatopsia #949494 Achromatopsia is complete color blindness. The world is seen entirely in shades of grey. Affects ~1 in 30,000 people.

Similar Named Colors

The closest named colors to Cadet Blue ranked by perceptual difference (Delta-E 2000 — lower = more similar).

Cadet Blue #5F9EA0 Base

Desaturated Cyan #669999 ΔE 2.36

Blue Lagoon #5E93A1 ΔE 6.85

Viridian Green #009698 ΔE 7.37

Verdigris #43B3AE ΔE 8.00

How to use this color

Copy HEX for CSS and design tools, or RGB/HSL for UI adjustments.
Use CMYK when preparing print assets (posters, packaging, brochures).
Check contrast before using it for text or important UI elements.