Cool Gray

What color is cool gray?

Cool gray is a neutral shade with calming and sophisticated qualities. It sits between pure gray and blue on the color wheel, exuding a sense of quiet strength and reliability.

What does cool gray look like on digital screens?

Cool gray is defined by the following color codes and values to ensure consistency across various digital platforms and devices.

• HEX code: #CBCBCB
• RGB value: 80% red, 80% green, and 80% blue

Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines.

How should I effectively use cool gray in UI design?

Here are some ways to use cool gray in your designs:

• Add depth and dimension. Cool gray works wonders for subtle shadows and gradients, lending a sense of layering to elements like cards, modals, and drop-down menus.
• Provide a neutral background. This versatile color offers a clean canvas that doesn’t compete with other colors, icons, or text, allowing the main content to stand out.
• Convey trust and credibility. Cool gray is sleek and professional, making it ideal for corporate websites, portfolios, and business applications.
• Incorporate a minimalistic look. Cool gray lends a calm and uncluttered aesthetic, reducing visual noise for a sleek design.

Keep in mind that color and its meaning can change from culture to culture—and at any given time. If you are designing for a global audience, research color considerations for your specific regions.

What are similar colors to cool gray?

For variations within the same neutral spectrum as cool gray, consider:

• Silver (#C4C4C4) is a light metallic gray with a hint of reflective sheen, resembling polished metal.
• Slate (#6D8196) is a medium-dark gray with slightly bluish undertones.
• Gray (#898989) is a mid-tone neutral color, evenly balanced between light and dark.

What colors go with cool gray?

To complement cool gray, consider pairing it with:

• Navy blue (#000080) creates a striking contrast, adding depth and intensity to the overall design.
• Pink (#FF8DA1) provides a gentle warmth, balancing the coolness of cool gray with a touch of softness and femininity.
• Teal (#069494) is a refreshing and modern color that complements cool gray without overpowering it.
• Cream (#FDFBD4) can also work well, enhancing the soft tones of cool gray for a more neutral, inviting palette.

Other colors worth considering include burgundy to add warmth and contrast to cool gray and mustard yellow to introduce a bold, vibrant pop of color that complements the neutral tone of cool gray.

What colors conflict with cool gray?

While cool gray is calming, it may clash with:

• Neon green (#2CFF05) is an excessively vibrant and fluorescent color, which can overwhelm the subtlety of cool gray.
• Fuchsia (#FE3894) has an intense saturation and brightness that can create a jarring contrast.
• Orange (#FF4500) is its intense and eye-catching hue, which can overshadow the calmness and neutrality of cool gray.
• Red (#FF2C2C) has a bold and aggressive tone that may conflict with the softer, more subdued quality of cool gray.

What does cool gray symbolize?

Cool gray symbolizes neutrality and balance. It also carries connotations of calmness, reliability, and sophistication due to its hint of blue.

In color psychology, cool gray evokes a sense of calm and serenity. Its subtle tones can promote focus and relaxation, reducing overstimulation in environments where attention to detail is important.

In UI design, cool gray acts as a versatile base color that complements other hues and enhances readability. It conveys a sense of professionalism and objectivity, offering a refined and subtle aesthetic.

What’s the history of cool gray?

Cool gray tones became prominent during the industrialization era in the 18th and 19th centuries. The increased use of metal, machinery, and concrete brought gray tones into the spotlight.

This connection with industrial materials gave cool gray its modern and functional connotations. Today, cool gray is widely used in corporate branding, contemporary architecture, and business websites for its sleek and minimalist look.

Color variations

Shades

Tints

Tones

Hues

Color Harmonies

Custom Palettes

Accessibility: Contrast Checker

Color simulations

Protanopia

Deuteranopia

Tritanopia

Achromatopsia

Color conversion

The hexadecimal color #CBCBCB, known as cool gray, has RGB values of R:203, G:203, B:203 and CMYK values of C:0, M:0, Y:0, K:2.