HEX (Hexadecimal) is a color notation system used in HTML, CSS, and other computing applications to represent colors. It uses a 6-digit hexadecimal number to specify RGB color values, preceded by a hash (#) symbol.
Understanding Hexadecimal Notation
Hexadecimal is a base-16 number system that uses 16 distinct symbols: the numbers 0-9 and the letters A-F (or a-f, as hexadecimal is case-insensitive). In the context of colors, hexadecimal notation is used to represent RGB color values in a more compact form.
A HEX color code consists of three pairs of hexadecimal digits, where each pair represents one of the three RGB color components:
#RRGGBB
# RR: Red component (00-FF)
# GG: Green component (00-FF)
# BB: Blue component (00-FF)For example, the HEX code #FF0000 represents pure red, with the red component at its maximum value (FF in hexadecimal, which equals 255 in decimal) and the green and blue components at their minimum values (00).
Common HEX Color Codes
- #000000: Black (all components at minimum)
- #FFFFFF: White (all components at maximum)
- #FF0000: Red
- #00FF00: Green
- #0000FF: Blue
- #FFFF00: Yellow (red + green)
- #FF00FF: Magenta (red + blue)
- #00FFFF: Cyan (green + blue)
Shorthand HEX Notation
For HEX codes where each component has two identical digits (e.g., #RRGGBB where R=R, G=G, and B=B), a shorthand notation can be used:
#RGB
# R: Red component (single digit, equivalent to RR)
# G: Green component (single digit, equivalent to GG)
# B: Blue component (single digit, equivalent to BB)For example, #F00 is equivalent to #FF0000 (pure red), and #FFF is equivalent to #FFFFFF (white).
HEX with Alpha Channel
Modern CSS also supports an 8-digit HEX notation that includes an alpha (transparency) channel:
#RRGGBBAA
# RR: Red component (00-FF)
# GG: Green component (00-FF)
# BB: Blue component (00-FF)
# AA: Alpha component (00-FF, where 00 is fully transparent and FF is fully opaque)For example, #FF0000FF represents fully opaque red, while #FF000080 represents red with 50% opacity (80 in hexadecimal is 128 in decimal, which is about 50% of the maximum value 255).
Using HEX Colors in Web Development
HEX colors are widely used in CSS and HTML to define colors for various elements:
/* CSS examples */
body {
background-color: #F5F5F5; /* Light gray background */
}
h1 {
color: #333333; /* Dark gray text */
}
.button {
background-color: #4285F4; /* Google blue */
color: #FFFFFF; /* White text */
border: 1px solid #2965C1; /* Darker blue border */
}Converting Between HEX and Other Color Models
HEX colors can be converted to and from other color models like RGB, HSL, and CMYK. Our color conversion tools make these transformations simple: