Mirage
General Information about Mirage (#131B21)
The hex color code #131B21, also known as Mirage, is a dark, desaturated shade of blue-gray. It is composed of 7.45% red, 10.59% green, and 12.94% blue. In the RGB color space, it has values of R:19, G:27, B:33. When converted to the CMYK color space, it consists of 42.4% cyan, 18.2% magenta, 0% yellow, and 87.1% black. Mirage is often associated with feelings of sophistication, mystery, and calmness due to its muted tone. In web design, it can be used to create a sense of depth and professionalism, especially when paired with lighter colors for contrast. It's a versatile color that can be incorporated into various design projects.
The hex color #131B21, also known as Mirage, presents significant accessibility challenges due to its low luminance. Its dark nature results in very low contrast against typical light-colored backgrounds used for text or interactive elements. According to WCAG guidelines, this color would fail most contrast ratio tests, making it difficult for users with visual impairments to read text or distinguish interface elements. To improve accessibility, it is crucial to pair Mirage with significantly lighter colors that provide a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Using lighter shades of gray, white, or even pastel colors as foreground elements on a Mirage background can drastically enhance readability and usability for a wider audience, including those with low vision or color deficiencies. Thoughtful color selection is imperative for inclusive design.
Shades
Digital Color Formats
Alternative colors
- #29333d
A slightly lighter shade of gray provides better contrast for text and interface elements, enhancing readability and accessibility.
- #0a121a
This darker shade of blue offers a subtle variation while maintaining a similar aesthetic, suitable for backgrounds and accents.
- #080808
A near black option can be used for creating stronger contrasts in designs.
Applications
Dark UI Theme Background
Mirage (#131B21) can be used as a sophisticated background color for websites or applications aiming for a dark and modern aesthetic. Its deep, muted tone provides a canvas that allows brighter elements to stand out, creating a visually appealing interface. It's particularly well-suited for technology, gaming, or creative portfolio websites where a sleek and professional look is desired. Consider using it for headers, footers, or sidebars to create depth and visual interest, contrasting it with lighter text and interactive elements for optimal readability and user experience. When using mirage, make sure to test the contrast between other UI elements.
Elegant Fashion Base
In fashion, Mirage can serve as a versatile base color for creating understated yet elegant outfits. Its dark hue pairs well with both vibrant accent colors and neutral tones, making it suitable for a variety of styles and occasions. Consider using it for staple pieces such as trousers, jackets, or dresses, and accessorize with brighter colors to add pops of interest or with muted tones for a more refined look. Mirage can also be used as a complementary shade when paired with other shades such as gray, blue or black.
Video Game Design
Mirage (#131B21) can be used for creating atmospheric and immersive environments in video games. It is very fitting for space games due to its relation with the night sky and the absence of lights. Using this color can allow for an increased focus on the game itself instead of having a bright and distracting background. If the game has any form of artificial lights, they will also stand out more as contrast with the darker mirage color. Also, mirage can be used as the predominant color for a character's outfit, such as a ninja.