What Is Petrol Blue? Color Swatches and Color Scheme Examples

Petrol blue is a deep blue-green that combines a noticeable blue character with green undertones. It is not as straightforwardly navy as a dark blue, and it has some of the green quality associated with teal. This makes it a possible choice for large dark backgrounds as well as headings and buttons. But petrol blue does not have a single universally fixed HEX value. Here we compare two related published swatches and then use them in an ocean-exhibition page and an outdoor-goods product card.

Petrol blue is a deep color between blue and green

SchemeColor lists ■#0C5678 under the English name “Petrol Blue,” with RGB values of red 12, green 86, and blue 120. The color reference color-sample.com lists ■#008092, with sRGB values of red 0, green 128, and blue 146, under the related French name “Bleu Petrole.” The second source uses a different name; the two references do not establish one identical standardized color. HEX is a web color notation made from a hash sign and six hexadecimal characters, while RGB describes the amounts of red, green, and blue light in a screen color.

SchemeColor’s ■#0C5678 is darker and more noticeably blue, while the Bleu Petrole example ■#008092 is somewhat lighter and greener. The contrast ratio between them is approximately 1.72:1. A contrast ratio measures the difference in relative brightness between two colors. These two similar dark shades are therefore not a reliable color-only distinction between states such as “Selected” and “Not Selected.” For consistent web work, record the exact HEX code of the swatch you choose instead of relying on its name alone.

Use the color in an ocean exhibition page or a product card

Example A: an exhibition page introducing marine wildlife.Fill a large title area with the darker petrol blue ■#0C5678. Set the exhibition title and dates in white ■#FFFFFF, giving a text contrast ratio of approximately 8.02:1. Use pale sand ■#F1D7AD for a short “Special Exhibition” label on the blue background; that pair measures about 5.75:1. Make the “View Exhibition Details” button a sand-colored ■#F1D7AD surface with dark charcoal ■#283039 lettering. Charcoal on sand provides about 9.58:1 text contrast. This allows the blue-green to cover a large area while the lighter button clearly identifies the main action.

Example B: a product card on an outdoor equipment store.Use warm ivory ■#F8F5ED around the product photo, price, and specifications to preserve light space. Set the product name in darker petrol blue ■#0C5678; it contrasts with ivory by approximately 7.36:1. Use charcoal ■#283039 for longer descriptions, with about 12.26:1 contrast against ivory. Give the “View Product” button a dark petrol-blue ■#0C5678 fill and white ■#FFFFFF lettering. The lighter Bleu Petrole swatch ■#008092 may work as a decorative strip beside the photograph, but using both blue-greens throughout the body copy and primary buttons would make the hierarchy less consistent.

Example A makes the dark color dominant, while Example B makes the light background dominant. These are design proposals, not fixed area ratios. Adjust the balance according to photographs, the amount of text, and what visitors should notice first.

Check white text and avoid relying on similar blue-greens alone

White ■#FFFFFF on the darker petrol blue ■#0C5678 has approximately 8.02:1 contrast, but white ■#FFFFFF on the lighter Bleu Petrole ■#008092 provides about 4.66:1. WCAG (Web Content Accessibility Guidelines) 2.2 Level AA calls for at least 4.5:1 for normal-sized text and 3:1 for large text. The lighter pair is numerically just above the normal-text requirement. For important text, especially where thin lettering or display conditions might reduce perceived clarity, the darker shade offers a larger margin.

Using the lighter Bleu Petrole ■#008092 as text on ivory ■#F8F5ED produces only about 4.28:1 contrast, below the normal-text threshold. Keep the distinction between decorative colored areas and text colors clear. White ■#FFFFFF against ivory ■#F8F5ED also differs by just 1.09:1, so it should not be the sole visible edge around a required input field. A border in the darker petrol blue ■#0C5678 contrasts with ivory by about 7.36:1. Visual information needed to recognize user-interface components generally requires at least 3:1 contrast against adjacent colors.

HueRoll lets you adjust colors using HEX input and check the selected color’s contrast against white or black. It cannot directly compare arbitrary pairs of colors or automatically determine WCAG pass/fail results. The ratios for the text, background, buttons, and borders in these examples were calculated separately.