Steel blue is a cool shade evoking calm and sophistication. It sits in the blue spectrum on the color wheel, with hints of gray. Related shades include slate and azure. Perfect for interior or web design, it adds depth and tranquility to spaces or layouts. Experiment with this versatile color for balanced visual aesthetics.
Steel blue is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- Hex Code: #4682B4
- RGB value: 27.5% red, 51.0% green, 70.6% 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 steel blue, consider:
- Slate Blue (#557c99): Slate Blue features a soft, muted tone with a subtle grayish hue, resembling Steel Blue's calming and versatile qualities.
- Pewter (#909eae): Like Steel Blue, Pewter has a balanced mix of blue and gray, creating a cool and understated appearance perfect for adding a touch of sophisticated elegance.
- Cadet Blue (#5F9EA0): Cadet Blue closely mirrors Steel Blue with its tranquil combination of blue and gray, offering a similarly soothing and neutral palette for various design applications.
- Chambray (#A4C8E1): Chambray presents a lighter, softer version of Steel Blue, delivering a breezy, serene vibe with a touch of blue that maintains visual harmony in design.
To complement Steel blue, consider pairing it with:
- Coral (#FF8559): Adds warmth and vibrancy, creating an inviting and balanced palette that highlights Steel blue's cool shade.
- Mustard Yellow (#FFCE1B): Provides a striking contrast that evokes energy and depth, making it perfect for unique interior design and captivating paint options.
- Mint Blue (#98FBCB): Offers a harmonious blend that enhances Steel blue's serene qualities, ideal for fresh and calming environments.
- Peach (#FFD3AC): Introduces a soft, warm touch that complements Steel blue's cool tone, contributing to a soothing and inviting atmosphere.
- Saffron (#F1C338): Complements Steel blue with a rich and lively contrast, perfect for creating dynamic and fashionable color palettes that suit modern design trends.
While steel blue is a cool shade often used in design trends for its calm and sophisticated vibe, it may clash with:
Color variations
Shades
Tints
Tones
Hues
Color harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom palettes
Azure Waves
Seaside Ember
Twilight Splash
Contrast checker
Contrast 4.11
- Large Text
#4682B4
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Pass | Fail | |
Pass | Fail |
Contrast 5.11
- Large Text
#4682B4
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Fail | |
Pass | Pass | |
Pass | Pass |
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #4682B4, known as Steel blue, has RGB values of R:70, G:130, B:180 and CMYK values of C:61, M:28, Y:0, K:29.
| VALUE | CSS | |
|---|---|---|
| HEX | #4682B4 | #4682B4 |
| RGB DECIMAL | 70, 130, 180 | RGB(70,130,180) |
| RGB PERCENTAGE | 27.5, 51.0, 70.6 | RGB(27.5%,51.0%,70.6%) |
| CMYK | 61, 28, 0, 29 | |
| HSL | HSL(207.3, 44.0%, 49.0%) | HSL(207.3, 44.0%, 49.0%) |
| HSV (OR HSB) | 207.3°, 61.1, 70.6 | |
| WEB SAFE | #51153204 | #51153204 |
| BINARY | 01000110, 10000010, 10110100 | |
| iOS - SwiftUI | Color(red: 0.275, green: 0.510, blue: 0.706) | |
| iOS - UIKit | UIColor(red: 0.275, green: 0.510, blue: 0.706, alpha: 1) | |
| Android - Compose | Color(0xFF4682B4) |
