Ultramarine
General Information about Ultramarine
The hex color #140992, also known as Ultramarine, is a deep and saturated shade of blue. It is composed of 7.84% red, 3.53% green, and 57.25% blue. In the RGB color model, it has the numerical values of (20, 9, 146), indicating a strong presence of blue. Ultramarine is often associated with depth, stability, and sophistication, making it a popular choice in various design applications. The color's historical significance dates back to its origin from the precious mineral lapis lazuli, which was ground into pigment, making it highly valued in art. Today, synthetic ultramarine provides a more accessible alternative, retaining the same rich hue. Ultramarine is located in the blue-violet part of the color spectrum and can evoke feelings of calmness and serenity. In design, its intense saturation works best when used as an accent color or in combination with lighter, contrasting hues to maintain visual balance. Its Pantone is 2935 C.
The color #140992, a deep ultramarine, presents significant accessibility challenges, particularly for users with visual impairments. Its low luminance value of approximately 2% means that text rendered in this color against a white background, or vice versa, would fail WCAG (Web Content Accessibility Guidelines) contrast ratio requirements. Specifically, it falls far short of the minimum 4.5:1 contrast ratio for normal text and 3:1 for large text. Therefore, it is crucial to avoid using this color for text or important UI elements without careful consideration. To improve accessibility, pair #140992 with very light colors such as whites, creams, or very light yellows to ensure sufficient contrast. Furthermore, consider using larger font sizes and bold text to enhance readability for users with low vision. When using this color as a background, ensure that all foreground elements meet the necessary contrast requirements. Also, ensure that interactive elements have other visual cues besides color to allow all users to be able to understand what they are.
Shades
Digital Color Formats
Alternative colors
A slightly lighter shade of blue offers improved visibility and contrast, making it a more accessible choice for text and UI elements.
A deeper, near-black blue provides a strong contrast when paired with light text, enhancing readability and visual appeal.
A more vibrant blue that can add a pop of color while still being paired with colors that meet the WCAG standards.
Applications
Luxury Branding
Ultramarine's depth and richness make it suitable for creating a sense of luxury and sophistication in branding materials. It can be used in logos, website backgrounds, and marketing collateral for high-end products or services. The color evokes feelings of trust and stability, making it ideal for businesses seeking to project a reliable and established image. However, it must be carefully balanced with lighter colors to maintain visual appeal and prevent the design from appearing too heavy or somber. To achieve a better visual hierarchy, consider combining #140992 with a color like white.
Fashion and Interior Design Accent
This color is appropriate to use in fashion. Ultramarine can be used as an accent color in clothing designs, accessories, or footwear to add a touch of elegance and intrigue. It pairs well with neutral colors like gray, black, or white, allowing the ultramarine to stand out as a focal point. The color also works well with metallic accents like gold or silver, enhancing its luxurious appeal. In interior design, ultramarine can be incorporated into textiles, wall art, or decorative objects to create a sophisticated and calming atmosphere.
Web Design Backgrounds and UI elements
In web design, ultramarine can serve as a background color for headers or footers, creating a visually appealing and professional aesthetic. It can also be used for buttons, icons, and other interactive elements, provided that sufficient contrast is ensured with the text or other elements within those components. Additionally, #140992 works well in data visualizations and infographics, helping to highlight key information and create a sense of depth. Ensure its contrast ratio is sufficient to be accessible to all users.