Colors EncyclopediaNamed color
Ultramarine
Ultramarine color #120A8F: RGB 18, 10, 143 and HSL 244°, 87%, 30%. Explore its cool blue profile, contrast, CSS, palettes and harmonies.
Use this color
Create with Ultramarine
Open a professional color tool with #120A8F 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 Ultramarine 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-ultramarine: #120A8F;
.bg-ultramarine { background-color: #120A8F; }
.text-ultramarine { color: #120A8F; }Color history, meaning and use · Editorially reviewed
About Ultramarine Color
Natural ultramarine was made from lapis lazuli and was historically prized for its luminous blue as well as its cost. Scientific and conservation histories distinguish that scarce material from synthetic ultramarine, whose nineteenth-century development made an intense blue available on a much broader scale.
Ultramarine usually reads deeper and more violet-leaning than a conventional primary blue. It can provide a dramatic anchor for cultural, editorial, and artistic palettes, especially beside golds, warm whites, and earth pigments. On a display, the HEX value captures hue relationships but not the particle behavior and surface effects of paint.
This digital reference is named after a historic pigment family; it does not claim to reproduce a specific lapis or manufactured pigment sample.
WCAG Accessibility
Contrast checks for Ultramarine against black and white text.
Black text1.47:1AA Fail
White text14.32:1AA Pass
Downloadable color reference infographic
Ultramarine Color Reference Infographic
Save a high-resolution infographic of Ultramarine, 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.0233
Black text1.47:1AA Fail
White text14.32: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": "#120A8F",
"rgb": [
18,
10,
143
],
"hsl": [
244,
87,
30
],
"cmyk": [
87,
93,
0,
44
],
"luminance": 0.0233,
"contrast": {
"black": 1.47,
"white": 14.32
}
}WCAG
{
"AA": [
"#FFFFFF",
"#F5F5F5"
],
"AAA": [
"#FFFFFF",
"#F5F5F5"
]
}Harmonies
{
"complementary": "#868F0A",
"analogous": [
"#0A448F",
"#550A8F"
],
"triadic": [
"#8F130A",
"#0A8F13"
],
"tetradic": [
"#8F0A44",
"#868F0A",
"#0A8F55"
],
"splitComplementary": [
"#8F550A",
"#448F0A"
],
"monochromatic": [
"#1E10E5",
"#120A8F",
"#080439"
]
}Variants
{
"light": "#1E10E5",
"dark": "#080439",
"saturated": "#0A0099",
"desaturated": "#211B7E",
"pastel": "#453ADF",
"neon": "#0D00C2"
}Pairings
{
"best": [
"#FFFFFF",
"#868F0A",
"#0A448F",
"#550A8F"
],
"avoid": [
"#211B7E",
"#1E10E5"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#FFFFFF"
],
"lowContrast": [
"#1E10E5",
"#211B7E"
]
}Knowledge graph
{
"nearestColors": [
"dark-blue",
"navy",
"navy-blue",
"zaffre",
"midnight-blue"
],
"generatedPalettes": [
"ultramarine"
],
"generatedComparisons": [
"midnight-blue-vs-ultramarine",
"ultramarine-vs-dark-blue",
"ultramarine-vs-navy",
"zaffre-vs-ultramarine"
],
"relatedFamilies": [
"/colors/by-family/blue",
"/colors/by-temperature/cool",
"/colors/by-tone/jewel-tone"
],
"relatedTools": [
"/harmonies/ultramarine",
"/wcag/ultramarine",
"/css/colors/ultramarine",
"/hex/120a8f",
"/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/jewel-tone"
],
"narrower": [
"/palettes/ultramarine"
],
"related": [
"/colors/dark-blue",
"/colors/navy",
"/colors/navy-blue",
"/colors/zaffre",
"/colors/midnight-blue",
"/compare/midnight-blue-vs-ultramarine",
"/compare/ultramarine-vs-dark-blue",
"/compare/ultramarine-vs-navy",
"/compare/zaffre-vs-ultramarine",
"/harmonies/ultramarine",
"/wcag/ultramarine",
"/css/colors/ultramarine",
"/hex/120a8f",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
]
}
}Full JSON dataset
{
"slug": "ultramarine",
"name": "Ultramarine",
"hex": "#120A8F",
"uses": [
"historical references",
"pigment palettes",
"cultural color systems"
],
"psychology": {
"associations": [
"heritage",
"craft",
"specificity"
],
"contexts": [
"museum design",
"education",
"editorial research",
"cultural references"
],
"avoidIn": [
"generic unlabeled palette systems"
]
},
"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, material, cultural, and editorial color systems."
},
"family": "blue",
"temperature": "cool",
"tone": [
"jewel-tone"
],
"editorialNotes": "Curated internal color record with computed technical properties.",
"tags": [
"blue",
"cool",
"jewel-tone",
"historical-references",
"pigment-palettes",
"cultural-color-systems",
"heritage",
"craft",
"specificity"
],
"popularity": 84,
"rgb": [
18,
10,
143
],
"hsl": [
244,
87,
30
],
"cmyk": [
87,
93,
0,
44
],
"luminance": 0.0233,
"contrast": {
"black": 1.47,
"white": 14.32
},
"harmonies": {
"complementary": "#868F0A",
"analogous": [
"#0A448F",
"#550A8F"
],
"triadic": [
"#8F130A",
"#0A8F13"
],
"tetradic": [
"#8F0A44",
"#868F0A",
"#0A8F55"
],
"splitComplementary": [
"#8F550A",
"#448F0A"
],
"monochromatic": [
"#1E10E5",
"#120A8F",
"#080439"
]
},
"variants": {
"light": "#1E10E5",
"dark": "#080439",
"saturated": "#0A0099",
"desaturated": "#211B7E",
"pastel": "#453ADF",
"neon": "#0D00C2"
},
"wcag": {
"AA": [
"#FFFFFF",
"#F5F5F5"
],
"AAA": [
"#FFFFFF",
"#F5F5F5"
]
},
"css": {
"variable": "--color-ultramarine: #120A8F;",
"utility": ".bg-ultramarine { background-color: #120A8F; }",
"textUtility": ".text-ultramarine { color: #120A8F; }"
},
"nearestColors": [
"dark-blue",
"navy",
"navy-blue",
"zaffre",
"midnight-blue"
],
"generatedPalettes": [
"ultramarine"
],
"generatedComparisons": [
"midnight-blue-vs-ultramarine",
"ultramarine-vs-dark-blue",
"ultramarine-vs-navy",
"zaffre-vs-ultramarine"
],
"relatedFamilies": [
"/colors/by-family/blue",
"/colors/by-temperature/cool",
"/colors/by-tone/jewel-tone"
],
"relatedTools": [
"/harmonies/ultramarine",
"/wcag/ultramarine",
"/css/colors/ultramarine",
"/hex/120a8f",
"/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/jewel-tone"
],
"narrower": [
"/palettes/ultramarine"
],
"related": [
"/colors/dark-blue",
"/colors/navy",
"/colors/navy-blue",
"/colors/zaffre",
"/colors/midnight-blue",
"/compare/midnight-blue-vs-ultramarine",
"/compare/ultramarine-vs-dark-blue",
"/compare/ultramarine-vs-navy",
"/compare/zaffre-vs-ultramarine",
"/harmonies/ultramarine",
"/wcag/ultramarine",
"/css/colors/ultramarine",
"/hex/120a8f",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
]
},
"pairings": {
"best": [
"#FFFFFF",
"#868F0A",
"#0A448F",
"#550A8F"
],
"avoid": [
"#211B7E",
"#1E10E5"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#FFFFFF"
],
"lowContrast": [
"#1E10E5",
"#211B7E"
]
}
}