North Star
Meet North Star (#CAD0D2), a color defined by its quiet confidence. This cool, muted gray-blue offers a sophisticated alternative to standard neutrals, providing a subtle yet distinct character that works as a versatile base for clean, modern digital product design.
What color is North Star?
North Star is a pale, cool-toned gray that sits near the edge of off-white.
Its visual temperature is cool, with a distinct silvery-blue hue and a subtle green undertone that gives #CAD0D2 its quiet complexity.
What is the meaning behind the color North Star (#CAD0D2)?
The name North Star evokes a powerful sense of guidance and constancy. For centuries, it has been a fixed point for navigators, symbolizing purpose, hope, and a clear path forward.
As a color, #CAD0D2 projects calm and clarity. Its quiet confidence suggests stability and a sophisticated, modern outlook, making it a color of quiet assurance.
How can I use North Star in my UI design?
In UI design, North Star (#CAD0D2) shines as a primary background color, creating a calm and focused user experience. For excellent readability, pair it with dark charcoal or navy text. To add energy, introduce a vibrant accent like a warm terracotta or a deep green. Applying the 60-30-10 rule, you could use #CAD0D2 as your dominant 60% hue to establish a serene and sophisticated foundation.
While not a widely used color, its rarity offers a chance for distinction. Brands like Yubo and Peloton incorporate similar muted blue-grays to project a premium, uncluttered feel. Adopting a less common color like North Star can make your interface feel unique and memorable in a crowded market.
Use the tools below to see how North Star performs in different scenarios. You can explore curated palettes, check color contrast for accessibility, and preview #CAD0D2 in real UI components from leading apps.
How do I use the North Star color codes?
To work with North Star in your digital projects, its hex code, #CAD0D2, is your direct reference. As the web standard, it provides a consistent color representation across browsers and devices.
Different design contexts call for different color models. The hex value can be converted to other formats like RGB (Red, Green, Blue) for screen-based light emission, CMYK (Cyan, Magenta, Yellow, Key) for four-color printing, or HSL (Hue, Saturation, Lightness) for more intuitive digital adjustments.
To make things easier, we've converted #CAD0D2 into a range of popular formats. You can find and copy the exact values you need for your project below.
Analogous
Analogous colors sit side-by-side on the color wheel. Using North Star as a base, these schemes produce a serene and cohesive visual effect.
Complementary
Pair North Star with its complementary colors—found directly opposite on the color wheel—for a combination that offers maximum contrast and visual energy.
Split Complementary
Split complementary colors provide a more nuanced contrast. For North Star, this involves pairing it with the two colors adjacent to its direct complement.
Triadic
A triadic combination pairs North Star with two other colors, each equidistant on the color wheel, resulting in a bold and balanced visual effect.
Tetradic
Tetradic schemes pair North Star with three other colors, forming two complementary pairs for a vibrant and well-balanced palette.
Square
Built around North Star, a square color scheme features four hues equidistant on the color wheel, offering a balanced yet highly contrasting visual effect.
Text Color
Background Color
Your Catchy Large Text Goes Here
Shades
By adding black to North Star, you create darker shades that give your design weight.
Tints
Tints are lighter versions of North Star, created by mixing in white for a softer effect.
Tones
Tones of North Star are created by adding gray, resulting in softer, muted variations.
Hues
Hues are variations of North Star, creating different effects by altering its intensity and temperature.
Never run out of inspiration again.
Use Mobbin for free as long as you like or get full access with any of our paid plans.
