Adding dark blue text or background colors in HTML can be done in a few different ways. The most common approaches are using HTML color names, RGB values, or HEX codes to specify the exact shade of dark blue you want to use on your web page.
Using Predefined HTML Color Names
One of the easiest ways to add dark blue in HTML is to use one of the predefined color names supported by all major browsers. HTML has basic color keywords for common colors like “blue,” “green,” “red,” etc. However, there are also specific shades of blue defined including “darkblue” and “navy.”
To use these colors, you simply include the color name as a value for CSS properties like color, background-color, border-color, etc. For example:
<p style="color:darkblue;">This text will be dark blue.</p> <div style="background-color:navy;">This div has a navy blue background.</div>
The color names are case insensitive, so “DarkBlue” or “DARKBLUE” would work too. The major downside to predefined colors is you are limited to a small set of options and can’t precisely control how dark of a blue is used.
Using RGB Values
For more flexibility over shades of blue, you can use RGB color values. An RGB value represents the amount of red, green, and blue to make up a specific color. RGB values are commonly written in one of these formats:
rgb(0, 0, 255) rgb(0, 0, 100%) #0000FF
The rgb() format specifies each color channel on a scale of 0-255. The percentage format also uses a 0-100% scale. And the HEX format writes RGB values as a 6-digit hexadecimal number.
To get a dark blue, you want high blue values with low amounts of red and green. Here are some examples of dark blue RGB values you could use:
| RGB Value | Shade |
|---|---|
| rgb(0, 0, 139) | Dark blue |
| rgb(0, 0, 155) | Midnight blue |
| rgb(0, 0, 205) | Rich blue |
To use an RGB value, again just include it as the value for any CSS color property:
<p style="color:rgb(0, 0, 155);">This text is midnight blue.</p> <div style="background-color:#0000FF;">This div has a rich blue background.</div>
RGB gives you a ton of flexibility for picking the exact darkness and shade of blue you want.
Using HEX Color Codes
The other common way to represent colors in HTML/CSS is hex color codes. As mentioned above, HEX codes are just another way to write RGB values, using 6 hexadecimal digits.
HEX colors always begin with a #, then have 2 digits each for red, green and blue. For example:
- #000000 is black (no color)
- #FFFFFF is white (full red, green and blue)
- #0000FF is blue (no red or green)
Some examples of dark blue HEX values:
#00008B = Dark blue #00009C = Midnight blue #0000CD = Medium blue #0000FF = Rich blue
And to use a HEX color in HTML/CSS:
<p style="color:#00009C;">This text is midnight blue.</p> <div style="background-color:#0000FF;">This div has a rich blue background.</div>
HEX codes are commonly used because they provide a compact way to represent RGB colors. All modern browsers support them.
Tips for Picking a Dark Blue
Now that you know the main ways to specify colors, here are some tips for picking a good dark blue:
- Use a color picking tool to find the exact blue you want visually
- Make sure there is enough contrast with the text/foreground
- Watch out for accessibility issues with very dark blues
- Try different shades on different background colors
- Pick a blue that aligns with your brand colors
- Use HEX for consistency across platforms
There are many shades of rich, deep blues to choose from. Whether you want a midnight blue, navy blue, or primary blue, you can precisely control the tones using RGB or HEX values.
Conclusion
Adding dark blues in HTML and CSS is easy using color names, RGB values, or hex codes. The key is picking a distinct blue that looks great with the rest of your content and design. Experiment with different saturation and brightness levels to find the perfect deep blue.
No matter what tags, attributes or styles you use, HTML gives you the ability to make text, backgrounds, borders, and other elements that beautiful dark blue you want. So don’t settle for the basic “blue” color – use RGB and HEX codes to unlock a wide range of rich, vivid blue shades.
