Cadet blue is a calming shade that blends blue with a touch of gray, making it both serene and sophisticated. Positioned between blue and gray on the color wheel, it pairs well with slate and steel blue. Use it to add a subtle elegance to backgrounds or minimalist designs.
Cadet Blue is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- Hex Code: #5F9EA0
- RGB value: 37.3% red, 62.0% green, 62.7% blue
Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines
For variations within the same spectrum as Cadet Blue, consider:
- Slate Gray (#6d8196): Slate Gray shares a muted blue undertone, offering a softly sophisticated vibe reminiscent of Cadet Blue's calm, reserved nature.
- Pewter (#909eae): Pewter mimics Cadet Blue with a cool, metallic touch, providing a gentle balance between blue and gray for a settled appearance.
- Slate Blue (#557c99): Slate Blue leans slightly more toward blue with a hint of gray, maintaining the balanced and serene quality that characterizes Cadet Blue.
- Blue-gray (#6a89a7): Blue-gray aligns closely with Cadet Blue by blending blue and gray in harmony, creating a balanced, subdued color palette.
To complement Cadet Blue, consider pairing it with:
- Coral (#FF8559): This warm and cheerful color adds a lively contrast to Cadet Blue, creating a dynamic and inviting palette.
- Peach (#FFD3AC): Peach offers a gentle warmth that contrasts beautifully with Cadet Blue, making the combination feel friendly and approachable.
- Pastel pink (#FFC5D3): This soft color introduces a delicate touch that enhances Cadet Blue’s soothing qualities, resulting in a harmonious and serene look.
While Cadet Blue is calm and soothing, it may clash with:
- Burnt Orange (#BE5103): This intense hue competes with Cadet Blue's serene nature, creating tension due to their opposing color temperatures.
- Rose Red (#FA003F): The vibrant intensity of rose red disrupts Cadet Blue's tranquil undertone, leading to a visually jarring contrast.
- Yellow (#FFDE21): Its brightness can overpower Cadet Blue’s subtler tones, creating an unbalanced color pairing.
- Hot Pink (#FF46A2): The playful boldness of hot pink may overpower Cadet Blue, resulting in a conflicting visual dynamic.
- Neon Green (#2CFF05): The electric brightness of neon green sharply contrasts Cadet Blue's muted quality, causing a harsh visual discord.
Color variations
Shades
Tints
Tones
Hues
Color harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom palettes
Aqua Haven
Coral Frost
Coastal Blossom
Contrast checker
- Large Text
Figma
- Normal Text
How you design, align, and build matters. Do it together with Figma.
3.05:1
WCAG 2.2 Simple Contrast
Normal Text
- Fail
- AA
- 4.5:1
- Fail
- AAA
- 7:1
Large Text
- Pass
- AA
- 3:1
- Fail
- AAA
- 4.5:1
- Large Text
Figma
- Normal Text
How you design, align, and build matters. Do it together with Figma.
6.88:1
WCAG 2.2 Simple Contrast
Normal Text
- Pass
- AA
- 4.5:1
- Fail
- AAA
- 7:1
Large Text
- Pass
- AA
- 3:1
- Pass
- AAA
- 4.5:1
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #5F9EA0, known as Cadet Blue, has RGB values of R:95, G:158, B:160 and CMYK values of C:41, M:1, Y:0, K:37.
| VALUE | CSS | |
|---|---|---|
| HEX | #5F9EA0 | #5F9EA0 |
| RGB DECIMAL | 95, 158, 160 | RGB(95,158,160) |
| RGB PERCENTAGE | 37.3, 62.0, 62.7 | RGB(37.3%,62.0%,62.7%) |
| CMYK | 41, 1, 0, 37 | |
| HSL | HSL(181.8, 25.5%, 50.0%) | HSL(181.8, 25.5%, 50.0%) |
| HSV (OR HSB) | 181.8°, 40.6, 62.7 | |
| WEB SAFE | #102153153 | #102153153 |
| BINARY | 01011111, 10011110, 10100000 | |
| iOS - SwiftUI | Color(red: 0.373, green: 0.620, blue: 0.627) | |
| iOS - UIKit | UIColor(red: 0.373, green: 0.620, blue: 0.627, alpha: 1) | |
| Android - Compose | Color(0xFF5F9EA0) |
