What Is the Difference Between Tetsukon and Navy? Choosing Dark Blue Colors
Tetsukon, a traditional Japanese dark blue, and navy are both deep blues, but the names do not always refer to the same color. Tetsukon suggests an iron-toned indigo or navy shade, while the everyday term “navy” is used for a range of dark blues. This article compares one tetsukon swatch #17184B with the fixed color #000080 used by the CSS keyword “navy,” then shows how to choose between them for a banner. HEX is a six-digit code of letters and numbers used to specify colors on the web.
Tetsukon is a muted deep blue; CSS navy is a more saturated blue
The Japanese color name tetsukon (鉄紺) refers to a very dark navy associated with the iron-toned colors of indigo dyeing. In the example tetsukon #17184B, the RGB values are red 23, green 24, and blue 75. RGB represents screen color as three components of light, each ranging from 0 to 255. Because blue is the largest component but some red and green are also present, the result looks almost black, with a muted blue cast.
By contrast, CSS “navy” is #000080, with RGB values red 0, green 0, and blue 128. With no red or green components, its blue color appears more pronounced than the chosen tetsukon example. However, the general color name “navy” does not always mean the exact CSS keyword color in everyday design discussions.
Even tetsukon does not have a universally fixed HEX code: another reference gives #0B1644. Specifying the code, rather than only the color name, makes it easier to communicate the intended shade to everyone working on a site. The contrast ratio between our two main swatches, tetsukon #17184B and CSS navy #000080, is only about 1.03:1. Their names differ, but their relative brightness is almost identical.
Comparing the two dark blues in an astronomy-event banner
Option 1: A quieter tetsukon background. Give a “Stargazing Night” banner a tetsukon #17184B background. Use warm off-white #F7F5EF for its heading and short introduction. The text-to-background contrast ratio is approximately 15.18:1. A contrast ratio measures the difference in relative luminance between adjacent colors. Place the event date and meeting point in a pale blue-gray #EEF2F8 information card, with dark blue-gray #273449 text for approximately 11.17:1 contrast.
On the dark banner area, add a “Register” button in soft gold-like yellow #E6C98E with tetsukon #17184B lettering. The text-to-button ratio is approximately 10.33:1, and the yellow button also contrasts with the tetsukon background at approximately 10.33:1. The dark blue fills the broad area, while brighter colors are reserved for the headline and action.
Option 2: A stronger CSS navy background. Keep the layout and other colors the same, changing only the banner background to CSS navy #000080. The off-white #F7F5EF heading has approximately 14.68:1 contrast. Keep the pale blue-gray #EEF2F8 information card and its dark blue-gray #273449 text. Use the same gold-like yellow #E6C98E button, with CSS navy #000080 text, to achieve approximately 9.99:1 contrast. This variation maintains text and button clarity but gives the large background a more distinctly blue appearance.
Do not use the two dark blues alone to indicate different states
Tetsukon #17184B and CSS navy #000080 have only about 1.03:1 contrast with each other. Avoid using only this color difference to communicate selected versus unselected tabs or levels of importance. Add an underline, a label, an icon, or another visual cue. Also, the gold-like yellow #E6C98E contrasts with warm off-white #F7F5EF at only about 1.47:1, so it is a poor choice for small lettering or an essential thin line on the pale background.
WCAG 2.2 (Web Content Accessibility Guidelines) generally requires at least 4.5:1 contrast for normal-size text and 3:1 for large text at Level AA. Meaningful non-text information needed to recognize controls may also need at least 3:1 against adjacent colors. HueRoll accepts HEX values and shows the selected color’s contrast against white and black, but it does not automatically compare arbitrary color pairs or judge AA compliance. Verify the actual text, button, and background combinations in the finished design separately.