Soft Sapphire is a medium, saturated shade in the blue color family, with a cool feel. Its HEX code is #3361CC, which equals rgb(51, 97, 204) in RGB and hsl(222, 60%, 50%) in HSL. In print terms it converts to roughly C75 M52 Y0 K20, although exact CMYK results depend on the paper and color profile.
- HEX
#3361CC - RGB
51, 97, 204 - HSL
222°, 60%, 50% - CMYK
75, 52, 0, 20 - Family
Blue - Tone
Medium, saturated
About Soft Sapphire
Blue shades feel trustworthy, calm and professional. This family includes cyans, teals, skies and navies, and it is the most common choice for technology, finance and healthcare brands. Designers often reach for it as an accent, a button color or a background tint. Text in white is the most readable choice on this color, with a contrast ratio of 5.64:1. Its complementary color is #CC9E33.
Download Soft Sapphire as an image
Choose a size and format, then download a solid-color image — or tick colors in the library to batch-download a ZIP.
Loading colors…
Loading gradients…
Soft Sapphire color codes
| HEX | #3361CC |
|---|---|
| RGB | rgb(51, 97, 204) |
| HSL | hsl(222, 60%, 50%) |
| HSV | 222°, 75%, 80% |
| CMYK | 75%, 52%, 0%, 20% |
| Decimal | 3367372 |
Shades and tints of Soft Sapphire
Lighter tints are mixed with white and darker shades are mixed with black.
- 50
#DDE5F7 - 100
#BBCAEE - 200
#99B0E6 - 300
#7796DD - 400
#557BD5 - 500
#3361CC - 600
#2B51AA - 700
#224188 - 800
#1A3166 - 900
#112044 - 950
#091022
Color harmonies for Soft Sapphire
- Complementary
#CC9E33≈ Soft Tangerine - Analogous −30°
#33ADCC≈ Soft Capri - Analogous +30°
#5233CC≈ Soft Iris - Triadic +120°
#CC3361≈ Soft Carmine - Triadic +240°
#61CC33≈ Soft Clover - Split 150°
#CC5233≈ Soft Cinnabar - Split 210°
#ADCC33≈ Soft Chartreuse
Contrast and accessibility of Soft Sapphire
| Text color | Sample | Contrast ratio | WCAG |
|---|---|---|---|
| White text on Soft Sapphire | Aa | 5.64:1 | AA (good) |
| Black text on Soft Sapphire | Aa | 3.72:1 | AA Large only |
CSS code for Soft Sapphire
background-color: #3361CC;color: #3361CC;background-color: rgb(51, 97, 204);background-color: hsl(222, 60%, 50%);:root { --color-soft-sapphire: #3361CC; }class="bg-[#3361CC]"Colors similar to Soft Sapphire
- Soft Cornflower
#3370CC - Soft Cobalt
#3352CC - Royal Blue
#4169E1 - Medium Dark Bright Cornflower
#155AC1 - Denim
#1560BD - Medium Light Soft Royal
#5460D4 - Medium Dark Bright Cerulean
#156BC1 - Medium Light Bright Cobalt
#3E60EA - Medium Light Soft Cobalt
#546DD4 - Medium Dark Soft Cornflower
#2B5EAB - Medium Light Soft Blue
#5454D4 - Muted Cobalt
#4D61B2
More blue shades
- Palest Bright Sapphire
#D1DDFA - Darkest Soft Sapphire
#0A1329 - Very Dark Soft Sapphire
#122349 - Dark Soft Sapphire
#1B326A - Deep Soft Sapphire
#23428B - Medium Dark Soft Sapphire
#2B51AB - Medium Light Soft Sapphire
#547AD4 - Light Soft Sapphire
#7493DC - Pale Soft Sapphire
#95ADE4 - Very Pale Soft Sapphire
#B6C6ED - Palest Soft Sapphire
#D6DFF5
Frequently asked questions
What is the HEX code for Soft Sapphire?
The HEX code for Soft Sapphire is #3361CC.
What is the RGB value of Soft Sapphire?
Soft Sapphire has an RGB value of 51, 97, 204 (rgb(51, 97, 204)). In HSL it is 222°, 60%, 50%.
What text color should I use on Soft Sapphire?
Use white text on Soft Sapphire. White text has a contrast ratio of 5.64:1 and black text has 3.72:1; WCAG AA requires at least 4.5:1 for normal text.
What color goes well with Soft Sapphire?
The complementary color of Soft Sapphire is #CC9E33. Analogous colors #33ADCC and #5233CC also pair well.