Steel Blue Color Scheme Examples | Choosing Highlight and Supporting Colors for Charts and Tables
When presenting sales or inquiry counts in a chart, giving every bar and line the same visual weight can make the most important number hard to find. Using steel blue as the highlight color and a quieter supporting color for comparisons creates a hierarchy without adding more bright hues. This article uses fictional monthly figures to show how to apply the combination to bar charts, line charts, and tables.
Choose the role of steel blue before coloring your chart
Our steel blue is ■#4682B4, the value of the named CSS color steelblue. CSS (Cascading Style Sheets) defines the appearance of web pages, and HEX (hexadecimal) codes specify colors on the web. Here, steel blue is assigned to the particular bar or line that deserves attention.
- Highlight: steel blue ■#4682B4, for the featured month’s bar or the main data series.
- Supporting color: gray ■#6B7280, for comparison bars or a previous-year series.
- Chart background: white ■#FFFFFF, providing a light field around the data marks.
- Values and labels: dark blue-gray ■#273445, keeping chart text separate from the plotted colors.
Choose the single figure or series you want to emphasize before assigning colors. Steel blue and gray are fairly close in brightness, so do not rely on their hues alone to identify series. Include numerical labels or different line and marker styles too.
Examples for bar charts, line charts, and tables
Bar chart: Highlight only the latest month
Imagine a fictional inquiry report with 38 inquiries in April, 42 in May, and 57 in June. Make April and May gray ■#6B7280, and reserve steel blue ■#4682B4 for the highlighted June bar. Use white ■#FFFFFF behind the chart and dark blue-gray ■#273445 for the month names and numbers. The exact numbers remain available even when the bars are difficult to distinguish by color.
Monthly inquiries (fictional example)
| Month | Relative count | Count |
|---|---|---|
| Apr | 38 | |
| May | 42 | |
| Jun | 57 |
The steel blue bar has about 4.11:1 contrast against white, while the gray bars have about 4.83:1. Leave visible gaps between bars and show the counts as text rather than conveying the data through bar length alone.
Line chart: Change line style as well as color
To compare this year with last year, use a solid steel blue ■#4682B4 line with circular markers for this year, and a dashed gray ■#6B7280 line with diamond markers for last year. The example below shows the legend styles. Place series names near their lines in the finished chart when possible, so readers do not need to look back and forth at the legend.
Example legend for two line-chart series
● This year (solid line, circle / focus)
◆ Last year (dashed line, diamond / comparison)
Steel blue and gray have a contrast ratio of only about 1.18:1 against each other, so color alone is not a reliable way to tell the series apart. Different markers and direct labels are particularly useful where the lines cross. In a table, you can use steel blue for a short left-side highlight or part of the featured row heading, while leaving the actual values in the dark text color.
Check contrast for text, gridlines, and data marks
Steel blue ■#4682B4 text on white ■#FFFFFF has a contrast ratio of about 4.11:1, which is not enough for normal-sized text. Use dark blue-gray ■#273445 for value labels (about 12.63:1 against white), or use a deeper blue ■#2D608A if colored text is necessary (about 6.66:1). Avoid placing small white labels inside the steel blue bars for the same contrast reason.
Under WCAG (Web Content Accessibility Guidelines) 2.2 Level AA, one of its accessibility conformance levels, normal-sized text generally needs at least 4.5:1 contrast and qualifying large text needs 3:1. Graphical marks that are necessary to understand the chart, such as bars and lines, need at least 3:1 against adjacent colors. Light gridlines ■#D9E1E8 have only about 1.32:1 contrast against white ■#FFFFFF, so they should not be the sole way to convey an essential boundary or data value.
HueRoll lets you enter a HEX code, adjust a color, and compare the selected color against white or black. It cannot directly compare arbitrary pairs such as steel blue and its supporting gray, or automatically determine WCAG AA compliance. The custom color-pair ratios above were calculated separately. Before finalizing your chart, review its colors, line patterns, and numerical labels together.