HTML color codes are values that tell a web browser what color to display for any element on a page. If you are new to web development, color codes are one of the first things you will encounter and one of the easiest to learn. Once you understand the pattern, you can read any color code and know roughly what color it produces.
HEX Codes: The Most Common Format
The format you will see most often is HEX — a pound sign followed by six characters like #FF6B35. The first two characters control red intensity, the middle two control green, the last two control blue. Characters range from 0-9 and A-F, where 00 means none of that color and FF means maximum. So #FF0000 is pure red, #00FF00 is pure green, and #0000FF is pure blue. Equal values across all three pairs produce gray — #808080 is medium gray.
You use these codes in CSS to style elements. The property color sets text color, background-color sets backgrounds, and border-color handles borders. A heading styled as h1 { color: #1F2937; } appears in dark charcoal gray. You can also use the style attribute inline, though separate CSS files are the preferred approach for maintainable code.
Named Colors
CSS supports 147 named colors like red, tomato, steelblue, and cornflowerblue. These are convenient when learning because you can write color: tomato; and immediately see an orange-red without memorizing hex values. However, named colors are fixed values that may not match your design — red is specifically #FF0000 which is rarely the exact red a designer intended.
Use named colors for quick prototyping and learning, then switch to HEX codes for production work. Named colors give you instant visual feedback while you learn the system, and HEX codes give you precise control when the details matter.
Getting Started Practically
You do not need to memorize color codes. Use a visual color picker tool to find colors you like, copy their HEX values, and paste them into your CSS. Start with three codes for any project: one for main text (try #1F2937), one for background (try #F9FAFB), and one for links or buttons (pick any color you like). Define them as CSS custom properties so you can change them later without editing every single rule:
:root { --text: #1F2937; --bg: #F9FAFB; --accent: #3B82F6; }
This three-variable system covers a surprising range of simple pages. As your projects grow more complex, add more variables for secondary colors, borders, and hover states. The important habit is defining colors in one place and referencing them everywhere — this single practice prevents the inconsistency problems that plague most beginner projects.