Colors EncyclopediaNamed color
Sapphire
Sapphire color #0F52BA: RGB 15, 82, 186 and HSL 216°, 85%, 39%. Explore its cool blue profile, contrast, CSS, palettes and harmonies.
Use this color
Create with Sapphire
Open a professional color tool with #0F52BA already applied. Each configuration stays canonical to the tool and can be adjusted or shared.
Generate palette & CSS variablesCreate 50–950 tokens and export CSS, SCSS, JSON, or Tailwind.Open configured tool →Open in Gradient StudioStart with Sapphire and its complementary color.Open configured tool →Mix this colorBlend it with a complementary color and copy color-mix() CSS.Open configured tool →Check contrastOpen the strongest black or white background pairing.Open configured tool →Accessible combinationsReview AA and AAA text options, alternatives, warnings, and UI guidance.Open configured tool →Create glass surfaceUse this color as the tint for a translucent UI panel.Open configured tool →
CSS Utilities
--color-sapphire: #0F52BA;
.bg-sapphire { background-color: #0F52BA; }
.text-sapphire { color: #0F52BA; }Color history, meaning and use · Editorially reviewed
About Sapphire Color
Sapphire is corundum that is not classified as ruby red. Although blue is the best-known form, GIA records sapphire in violet, green, yellow, orange, pink, purple, gray, black, brown, and colorless varieties. The color name Sapphire therefore narrows a much broader gem family into one familiar blue convention.
A digital Sapphire Blue can serve as a rich, credible anchor for interfaces and premium palettes, especially with pale gray, silver, or warm neutral accents. Physical sapphire adds saturation, inclusions, cut, optical effects, and sometimes color change under different illumination. None of those properties is contained in a single HEX value.
This page is a color reference, not a gemstone grade, treatment statement, origin determination, or claim that all sapphires are blue.
WCAG Accessibility
Contrast checks for Sapphire against black and white text.
Black text2.94:1AA Fail
White text7.15:1AA Pass
Downloadable color reference infographic
Sapphire Color Reference Infographic
Save a high-resolution infographic of Sapphire, including its color values, coordinated palette, and black and white text contrast.
Color Harmonies
Variants
Pairings
Machine-readable data
Machine-Readable Color Data (JSON)
Perfect for CSS, design systems, automation, and AI ingestion.
Luminance0.0968
Black text2.94:1AA Fail
White text7.15:1AA Pass
hexCanonical HEX valuergbRed, green, blue channelshslHue, saturation, lightnesscmykApproximate print conversionwcagAA and AAA contrast optionsharmoniesMathematical harmony setsvariantsGenerated tone variantsnearestColorsKnowledge graph neighborsStructured sections
Color systems
{
"hex": "#0F52BA",
"rgb": [
15,
82,
186
],
"hsl": [
216,
85,
39
],
"cmyk": [
92,
56,
0,
27
],
"luminance": 0.0968,
"contrast": {
"black": 2.94,
"white": 7.15
}
}WCAG
{
"AA": [
"#FFFFFF",
"#F5F5F5"
],
"AAA": [
"#FFFFFF"
]
}Harmonies
{
"complementary": "#B8740F",
"analogous": [
"#0FA7B8",
"#200FB8"
],
"triadic": [
"#B80F53",
"#53B80F"
],
"tetradic": [
"#B80FA7",
"#B8740F",
"#0FB820"
],
"splitComplementary": [
"#B8200F",
"#A7B80F"
],
"monochromatic": [
"#347FEF",
"#0F52BA",
"#082C63"
]
}Variants
{
"light": "#347FEF",
"dark": "#082C63",
"saturated": "#0050C7",
"desaturated": "#2557A2",
"pastel": "#6396E3",
"neon": "#0060F0"
}Pairings
{
"best": [
"#FFFFFF",
"#B8740F",
"#0FA7B8",
"#200FB8"
],
"avoid": [
"#2557A2",
"#347FEF"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#FFFFFF"
],
"lowContrast": [
"#347FEF",
"#2557A2"
]
}Knowledge graph
{
"nearestColors": [
"denim",
"signal-blue",
"cobalt-blue",
"persian-blue",
"anodized-blue"
],
"generatedPalettes": [
"sapphire"
],
"generatedComparisons": [
"cobalt-blue-vs-sapphire",
"denim-vs-sapphire",
"persian-blue-vs-sapphire",
"sapphire-vs-signal-blue"
],
"relatedFamilies": [
"/colors/by-family/blue",
"/colors/by-temperature/cool",
"/colors/by-tone/vibrant",
"/colors/by-tone/jewel-tone"
],
"relatedTools": [
"/harmonies/sapphire",
"/wcag/sapphire",
"/css/colors/sapphire",
"/hex/0f52ba",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
],
"semanticRelations": {
"broader": [
"/colors/by-family/blue",
"/colors/by-temperature/cool",
"/colors/by-tone/vibrant",
"/colors/by-tone/jewel-tone"
],
"narrower": [
"/palettes/sapphire"
],
"related": [
"/colors/denim",
"/colors/signal-blue",
"/colors/cobalt-blue",
"/colors/persian-blue",
"/colors/anodized-blue",
"/compare/cobalt-blue-vs-sapphire",
"/compare/denim-vs-sapphire",
"/compare/persian-blue-vs-sapphire",
"/compare/sapphire-vs-signal-blue",
"/harmonies/sapphire",
"/wcag/sapphire",
"/css/colors/sapphire",
"/hex/0f52ba",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
]
}
}Full JSON dataset
{
"slug": "sapphire",
"name": "Sapphire",
"hex": "#0F52BA",
"uses": [
"interfaces",
"brand systems",
"technical design"
],
"psychology": {
"associations": [
"trust",
"clarity",
"calm"
],
"contexts": [
"technology",
"finance",
"healthcare",
"navigation"
],
"avoidIn": [
"high-warmth food palettes"
]
},
"aliases": [],
"sourceType": "curated",
"confidence": "medium",
"reviewStatus": "manual",
"sourceUrl": "https://www.colorsencyclopedia.com/assets/colors.json",
"origin": {
"type": "common",
"notes": "Curated common color reference used in design and editorial color systems."
},
"family": "blue",
"temperature": "cool",
"tone": [
"vibrant",
"jewel-tone"
],
"editorialNotes": "Curated internal color record with computed technical properties.",
"tags": [
"blue",
"cool",
"vibrant",
"jewel-tone",
"interfaces",
"brand-systems",
"technical-design",
"trust",
"clarity",
"calm"
],
"popularity": 84,
"rgb": [
15,
82,
186
],
"hsl": [
216,
85,
39
],
"cmyk": [
92,
56,
0,
27
],
"luminance": 0.0968,
"contrast": {
"black": 2.94,
"white": 7.15
},
"harmonies": {
"complementary": "#B8740F",
"analogous": [
"#0FA7B8",
"#200FB8"
],
"triadic": [
"#B80F53",
"#53B80F"
],
"tetradic": [
"#B80FA7",
"#B8740F",
"#0FB820"
],
"splitComplementary": [
"#B8200F",
"#A7B80F"
],
"monochromatic": [
"#347FEF",
"#0F52BA",
"#082C63"
]
},
"variants": {
"light": "#347FEF",
"dark": "#082C63",
"saturated": "#0050C7",
"desaturated": "#2557A2",
"pastel": "#6396E3",
"neon": "#0060F0"
},
"wcag": {
"AA": [
"#FFFFFF",
"#F5F5F5"
],
"AAA": [
"#FFFFFF"
]
},
"css": {
"variable": "--color-sapphire: #0F52BA;",
"utility": ".bg-sapphire { background-color: #0F52BA; }",
"textUtility": ".text-sapphire { color: #0F52BA; }"
},
"nearestColors": [
"denim",
"signal-blue",
"cobalt-blue",
"persian-blue",
"anodized-blue"
],
"generatedPalettes": [
"sapphire"
],
"generatedComparisons": [
"cobalt-blue-vs-sapphire",
"denim-vs-sapphire",
"persian-blue-vs-sapphire",
"sapphire-vs-signal-blue"
],
"relatedFamilies": [
"/colors/by-family/blue",
"/colors/by-temperature/cool",
"/colors/by-tone/vibrant",
"/colors/by-tone/jewel-tone"
],
"relatedTools": [
"/harmonies/sapphire",
"/wcag/sapphire",
"/css/colors/sapphire",
"/hex/0f52ba",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
],
"semanticRelations": {
"broader": [
"/colors/by-family/blue",
"/colors/by-temperature/cool",
"/colors/by-tone/vibrant",
"/colors/by-tone/jewel-tone"
],
"narrower": [
"/palettes/sapphire"
],
"related": [
"/colors/denim",
"/colors/signal-blue",
"/colors/cobalt-blue",
"/colors/persian-blue",
"/colors/anodized-blue",
"/compare/cobalt-blue-vs-sapphire",
"/compare/denim-vs-sapphire",
"/compare/persian-blue-vs-sapphire",
"/compare/sapphire-vs-signal-blue",
"/harmonies/sapphire",
"/wcag/sapphire",
"/css/colors/sapphire",
"/hex/0f52ba",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
]
},
"pairings": {
"best": [
"#FFFFFF",
"#B8740F",
"#0FA7B8",
"#200FB8"
],
"avoid": [
"#2557A2",
"#347FEF"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#FFFFFF"
],
"lowContrast": [
"#347FEF",
"#2557A2"
]
}
}