Color values & contrast

Metallic Blue Hex

Inspect #325D88 as RGB(50, 93, 136), see a working CSS example, and verify contrast and opacity before using the color.

By Uddhav Gopani, FounderPublished 27 September 2026Updated 29 September 2026

This blue base swatch is #325D88. A metallic-blue effect requires additional shading or an actual material definition, so this value is a base color rather than a complete metallic effect.

Exact values for this swatch

Representation	Value
Six-digit hex	`#325D88`
RGB channels	`rgb(50 93 136)`
Approximate HSL	`hsl(210.0 46.24% 36.47%)`

The red pair is 32, the green pair is 5D, and the blue pair is 88. Interpreting each pair in base sixteen gives 50, 93 and 136 respectively. The channels are integers from zero to 255. This color has no exact three-digit shorthand because at least one channel pair contains two different digits.

Use the value in a real CSS example

.sample {
  background-color: #325D88;
  color: #FFFFFF;
  border: 2px solid currentColor;
  padding: 1rem;
}

Apply this class to an element containing actual sample text and inspect it in the browser. The background and foreground are specified separately. A valid color value does not automatically style every part of a component: links, borders, icons, disabled controls and hover states may use other rules. Inspect the computed style if the displayed color differs from the value you entered.

Check this color against its background

Using the WCAG sRGB relative-luminance formula, this opaque swatch has approximately 3.06:1 contrast against black and 6.87:1 against white. The example chooses #FFFFFF text, giving approximately 6.87:1. These figures compare two flat, opaque colors. They do not automatically describe text placed over a photograph, gradient or translucent overlay.

For ordinary text, WCAG’s minimum contrast criterion uses 4.5:1; qualifying large text uses 3:1. Check the applicable text size and weight, and test the actual foreground/background pair with Color Contrast Checker. Do not round a value below the threshold upward to declare a pass. A passing ratio addresses one criterion and does not establish complete accessibility or legal compliance for a page.

The computed relative luminance for this sample is approximately 0.10284 on the normalized zero-to-one scale. That value comes from linearizing the sRGB channels and weighting them, not from averaging 50, 93 and 136. If you adjust this swatch, recalculate the resulting pair rather than assuming that equal numeric changes in different channels have equal effects on contrast.

Keep opacity and channel order explicit

A six-digit hex code has no separate alpha channel and represents an opaque sRGB color. In CSS, an eight-digit hex color uses the order red, green, blue, alpha. Other environments can use alpha first, so copying an eight-digit value between platforms without checking its convention can change both color and opacity. Test a partially transparent sample over at least two different backgrounds to reveal accidental alpha mistakes.

Case does not change a hexadecimal color: uppercase and lowercase digits encode the same values. Leading zeros do matter, however. Keep exactly the required number of digits, and include the leading hash where the receiving format expects CSS notation. A field asking for an RGB triple may want decimal channel values instead of a hash-prefixed string; consult the field’s actual format rather than repeatedly pasting an incompatible value.

Verify the saved color and its limits

Enter the hex value in Hex to RGB, compare its three decimal channels with the table, and then convert the channels back to hex. That round trip should reproduce the same six-digit value. When the display uses rounded HSL values, a small round-trip channel difference can result from rounding, so retain hex or integer RGB as the exact reference for this sample.

A screen swatch is not a print, paint or textile match. Device calibration, color profiles, surrounding colors and lighting affect appearance. CMYK output requires a printing condition and color-management workflow; a named physical product requires its own verified specification or sample. Do not label a convenient on-screen approximation as an official brand formula. Keep the original numeric value, color space and intended role with the design so later edits remain traceable.

Primary references

CSS hexadecimal color notation and WCAG contrast minimum explanation.