In HTML, CSS, and modern web application development, colors are defined using hexadecimal color codes—a base-16 numbering system that tells web browsers and graphics engines exactly how much Red, Green, and Blue light to illuminate on screen.
Whether you are building web pages in vanilla CSS, configuring Tailwind CSS theme tokens, or styling component libraries like shadcn/ui, this cheat sheet provides an instant reference for standard hex codes, RGB conversions, shorthand syntax, and alpha transparency channels.
Curated HTML & CSS Hex Code Reference Tables
Click any hex code button to copy its value directly to your clipboard:
The Anatomy of Hex Color Codes
Understanding how web browsers interpret hexadecimal values allows you to write, tweak, and debug CSS colors without relying on guesswork:
1. Standard 6-Digit Hex (#RRGGBB)
A standard 6-digit hex code begins with a hash symbol (#) followed by three two-digit hexadecimal pairs representing Red, Green, and Blue channels:
/* Format: #RR GG BB */
#FF0000 /* Pure Red (R: 255, G: 0, B: 0) */
#00FF00 /* Pure Green (R: 0, G: 255, B: 0) */
#0000FF /* Pure Blue (R: 0, G: 0, B: 255) */
#FFFFFF /* Pure White (R: 255, G: 255, B: 255) */
#000000 /* Pure Black (R: 0, G: 0, B: 0) */
Because hexadecimal uses base-16 (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F), the lowest value is 00 (decimal 0, zero intensity) and the highest is FF (decimal 255, 100% full intensity).
2. 3-Digit Shorthand Hex (#RGB)
CSS allows a 3-digit shorthand when each pair of hex characters is identical:
#FFF expands automatically in the browser engine to #FFFFFF.#F00 expands to #FF0000.#09C expands to #0099CC.
Note: Shorthand hex offers 4,096 distinct colors (16 × 16 × 16), compared to the 16.7 million colors available in 6-digit hex (256 × 256 × 256).
3. 8-Digit Alpha Hex Codes (#RRGGBBAA)
All modern browsers (Chrome, Safari, Firefox, Edge) natively support 8-digit hex codes where the last two digits represent the alpha transparency channel (#RRGGBBAA):
/* 8-Digit Alpha Hex Examples */
#000000FF /* 100% Opaque Black (Alpha = FF / 255) */
#00000080 /* 50% Semi-Transparent Black (Alpha = 80 / 128) */
#00000040 /* 25% Subtle Shadow Black (Alpha = 40 / 64) */
#00000000 /* 0% Fully Transparent */
Performance Tip: While 8-digit hex codes are convenient in CSS, applying semi-transparent backgrounds to dozens of repeating cards in mobile feeds forces the browser's GPU to composite translucent layers on every scroll frame.
To maintain locked 60Hz and 120Hz frame rates, precompute solid opaque hex values using Pikka's RGBA to HEX Converter.
4. Converting Between Hex, RGB, and Modern OKLCH
Here is a quick JavaScript snippet for converting a 6-digit Hex code into an RGB object in modern web apps:
function hexToRgb(hex) {
// Remove leading # if present
hex = hex.replace(/^#/, '');
// Handle 3-digit shorthand
if (hex.length === 3) {
hex = hex.split('').map(c => c + c).join('');
}
const num = parseInt(hex, 16);
return {
r: (num >> 16) & 255,
g: (num >> 8) & 255,
b: num & 255
};
}
// Example: hexToRgb('#4169E1') -> { r: 65, g: 105, b: 225 }
Essential Web Developer Color Tools & Directories
Streamline your front-end styling with Pikka's high-precision developer tools:
Pick Any On-Screen Hex Code with Precision
Need to extract exact hex codes from an image, logo, or screenshot? Use Pikka's browser loupe or desktop app to sample colors instantly.
Open Image Color Picker
