Hex Color Value Examples

Hex color codes are the most common way to specify colors in CSS and design tools, but understanding what the hex digits represent helps you reason about color relationships. Each pair of hex digits encodes the red, green, and blue channel from 0 (00) to 255 (FF). This collection shows common web colors with their hex, RGB, and HSL equivalents. The hex-to-RGB converter breaks down any hex color into its channel values and lets you convert between all three CSS color formats. The #RRGGBB format uses three two-character hex pairs. The first pair (RR) controls red intensity, the second (GG) controls green, and the third (BB) controls blue. Each pair can range from 00 (none of that color) to FF (maximum of that color). This gives 256 × 256 × 256 = 16.7 million possible colors. When all three channels are equal — like #808080 — you get a shade of gray. White (#FFFFFF) has all channels at maximum; black (#000000) has all channels at zero. Reading hex colors at a glance becomes intuitive once you internalize a few reference points. Pure red is #FF0000 — maximum red, zero green, zero blue. Pure green is #00FF00 and pure blue is #0000FF. Yellow combines red and green: #FFFF00. Cyan combines green and blue: #00FFFF. Magenta combines red and blue: #FF00FF. Custom colors like #FF6B35 (a warm orange) become readable: high red (FF), medium green (6B = 107), low blue (35 = 53). The 3-digit shorthand #RGB expands each digit by doubling it: #F00 equals #FF0000 (red), #0F0 equals #00FF00 (green), #09C equals #0099CC. Shorthand only works when both hex digits in each channel pair are the same, so #1A2B3C cannot be shortened but #AABBCC can become #ABC. RGB format rgb(255, 107, 53) makes channel arithmetic easier — you can add a fixed amount to lighten a specific channel without converting from hex. HSL format hsl(18, 100%, 60%) separates hue (the color identity, measured in degrees around the color wheel), saturation (color intensity), and lightness (brightness). HSL is more intuitive for generating color palettes: to create a set of tints, keep hue and saturation constant while varying lightness. To create analogous colors, keep saturation and lightness constant while shifting hue by ±30 degrees. CSS now supports other color formats including oklch() and color() for wider gamuts, but hex remains universal across design tools, CSS preprocessors, and legacy systems. When copying colors from Figma, Sketch, or Adobe XD, hex is the default export format. Tailwind CSS maps its utility classes to specific hex values, so understanding hex helps you match design tokens precisely. For accessibility, color contrast ratios are computed from luminance, which is derived from the RGB values after gamma correction. The WCAG AA standard requires a contrast ratio of at least 4.5:1 for normal text. Dark text on light backgrounds and vice versa achieve this by maximizing the luminance difference between foreground and background hex values.

#FFFFFF = rgb(255, 255, 255) = hsl(0, 0%, 100%)   /* White */
#000000 = rgb(0, 0, 0)       = hsl(0, 0%, 0%)     /* Black */
#FF0000 = rgb(255, 0, 0)     = hsl(0, 100%, 50%)  /* Red */
#00FF00 = rgb(0, 255, 0)     = hsl(120, 100%, 50%)/* Green */
#0000FF = rgb(0, 0, 255)     = hsl(240, 100%, 50%)/* Blue */
#FFFF00 = rgb(255, 255, 0)   = hsl(60, 100%, 50%) /* Yellow */
#FF6B35 = rgb(255, 107, 53)  = hsl(18, 100%, 60%) /* Orange */
#6B46C1 = rgb(107, 70, 193)  = hsl(263, 47%, 71%) /* Purple */