What Is Saxe Blue? Color Swatches and How It Differs from Similar Blues

TIPS

What does Saxe blue look like, and how is it different from sky blue or steel blue? Even references using the same color name can show slightly different shades. Here we compare specific color swatches and explain how to choose a suitable blue for website backgrounds, headings, and accents.

Saxe blue is a muted, medium-toned blue

Saxe blue takes its name from Saxony in Germany. It is classified as a muted blue among the traditional color names listed under JIS (Japanese Industrial Standards). Rather than meaning every vivid or extremely pale shade of blue, the name is often associated with a mid-tone blue that has some grayness.

A color name and a web color value do not always correspond one-to-one. A HEX code specifies a web color using a # sign followed by six hexadecimal digits or letters. For example, the I-IRO color reference gives Saxe blue as #5B7E96 (RGB 91, 126, 150), while color-sample.com shows #5A7993. Both are muted blue-gray shades; the latter is slightly darker than the former. When working with another person, specify the actual HEX code alongside the name instead of treating the two swatches as identical.

Compare Saxe blue with similar blues using color swatches

  • Saxe blue, reference swatch A: #5B7E96 — a muted blue with a gray undertone
  • Saxe blue, reference swatch B: #5A7993 — slightly darker than swatch A
  • Sky blue: #87CEEB — lighter and more airy than swatch A
  • Steel blue: #4682B4 — slightly lighter and more distinctly blue than swatch A

Sky blue #87CEEB and steel blue #4682B4 have defined color-name values in CSS, the language used to style the appearance of web pages. Saxe blue, however, is illustrated with different numeric values by different color references, so checking a code is more reliable than relying on the name alone.

When comparing these samples, check their brightness first, then saturation (how vivid or muted they are), and then whether the hue leans toward blue or blue-green. Sky blue may suit a light and airy background, Saxe blue may work on a calmer color surface, and steel blue may suit a somewhat deeper accent. These are starting points rather than fixed effects: surrounding colors and the amount of each color will change the result.

For web use, choose text and background colors separately

For an information page, you could set a pale blue-white background #EAF2F7, body text in deep blue-gray #20323C, a button in dark blue #25566B, and its lettering in white #FFFFFF. Use the reference Saxe blue #5B7E96 for a card edge or a short decorative band to keep the palette connected without making body text harder to read.

A contrast ratio measures the difference in relative brightness between two colors. Saxe blue #5B7E96 against white #FFFFFF gives approximately 4.31:1. That does not reach the 4.5:1 minimum for regular-size white text under WCAG (Web Content Accessibility Guidelines) Level AA.

By comparison, deep blue-gray #20323C against pale blue-white #EAF2F7 gives approximately 11.71:1, and dark blue #25566B against white #FFFFFF gives approximately 8.01:1. These combinations have enough contrast for regular-size text at Level AA. Also check heading size and weight, as well as how the layout appears on a phone.

HueRoll lets you enter a HEX code, adjust the color, and check its contrast against white or black. It does not directly compare arbitrary pairs of colors or automatically determine AA or AAA compliance. After selecting the palette, verify the actual text-and-background pairs with a separate contrast checker.