Petrol Blue

Petrol Blue is a deep, saturated color that sits at the intersection of blue and green.

It carries a cool temperature and is characterized by its significant green undertones, which distinguish it from a more traditional navy or royal blue.

Petrol Blue projects a sense of deep calm and introspection. It carries the stability of blue and the harmony of green, creating a feeling of quiet confidence and intellectual depth.

Symbolically, the color #216477 represents a balance between the organic and the industrial. It suggests seriousness and integrity, making it a color of thoughtful consideration.

Petrol Blue, with its hex code #216477, works beautifully as a primary color to create a sense of stability and sophistication. For a balanced interface, pair it with soft neutrals like cream or light gray. To make elements pop, introduce a vibrant accent—think a sharp coral or a warm mustard yellow. Applying the 60-30-10 rule can help structure these combinations, using Petrol Blue for key interactive elements like buttons or headers against a neutral backdrop.

This deep teal is not a common choice for brand palettes, which presents a clear opportunity for differentiation. While few major brands build their identity around it, the fintech company Monzo uses a similar hue for its card and app interface, creating a memorable and modern look that feels both secure and approachable.

To see these principles in action, use the tools below. You can explore curated palettes, check the accessibility of your color combinations, and see how Petrol Blue looks within the UI components of well-known apps.

Using Petrol Blue (#216477) in your design work is a matter of context and medium. Its rich, saturated quality makes it a strong candidate for both a foundational color and a striking accent, depending on the mood you want to set.

While #216477 is the standard hexadecimal code for web design, you'll need to convert it for different applications. For digital displays, its RGB (Red, Green, Blue) values ensure color consistency across screens. If the design is destined for print, you must use its CMYK (Cyan, Magenta, Yellow, Key) equivalent for accurate reproduction on paper. Other formats like HSL (Hue, Saturation, Lightness) provide an intuitive way to adjust the color for variations and themes.

To help you get started, we've converted #216477 to a range of popular formats. You can find and copy the exact codes you need for your project below.