Enter a Color
Visual Color Picker
Enter a 6-digit HEX code with or without the # prefix
Enter a Color to Convert
Type a HEX code, enter RGB or HSL values, use the color picker, or click 'Random Color' to get started. All formats update live.
How to Use the Color Codes Chart
Enter Your Color
Type a HEX code directly (e.g., #FF5733) into the HEX field, enter decimal RGB values (0–255 each), input HSL or CMYK values, or click the color swatch to open the visual color picker. You can also click 'Random Color' for instant inspiration. All input methods update the result live as you type.
View All Converted Formats
The results panel shows your color in HEX, RGB, HSL, HSV, CMYK, and integer format simultaneously. Each format has a copy button so you can grab exactly what you need. Use the 'Copy All' button to copy every format at once, or export to CSV for documentation.
Generate Shades, Tints, and Check Accessibility
Scroll down the results to see a strip of 9 shades (darker variants) and 9 tints (lighter variants) — click any swatch to load that variant into the converter. The WCAG contrast section shows contrast ratios against white and black, with AA/AAA pass indicators to verify your color meets accessibility standards.
Browse the Named Colors Reference
Switch to the 'Named Colors Chart' tab to explore all 140 CSS named colors organized by family (reds, greens, blues, purples, etc.). Each row shows the color swatch, CSS name, HEX code, and RGB values. Click 'Use Color' on any row to load it into the converter instantly.
Frequently Asked Questions
What is the difference between HEX and RGB color codes?
HEX and RGB describe exactly the same color using different notation systems. RGB separates red, green, and blue channels into three decimal integers from 0 to 255. For example, rgb(59, 130, 246) is a medium blue. HEX represents these same three values in hexadecimal (base-16): 59 becomes 3B, 130 becomes 82, and 246 becomes F6, giving #3B82F6. HEX is more compact and is the standard format for HTML and CSS. RGB is easier to read mathematically and is used in CSS as well as graphic design software. Both are equivalent — any color expressible in one format can be expressed in the other.
Why is HSL better for design adjustments than HEX or RGB?
HSL (Hue, Saturation, Lightness) separates the pure color identity (hue, 0–360 degrees) from how vivid it is (saturation) and how light or dark it is (lightness). This makes it far more intuitive for design work. For example, to make a color 20% lighter, you simply increase the L value by 20 — in HEX or RGB, the same operation would require calculating all three channels separately. HSL is also how humans naturally describe colors: 'a bright, medium-light blue' maps directly to high saturation and mid-range lightness at a blue hue. CSS natively supports hsl() notation, and design tools like Figma use HSL-like models internally. Many design systems define color tokens in HSL for this reason.
What is CMYK and when should I use it?
CMYK stands for Cyan, Magenta, Yellow, and Key (Black) — the four ink colors used in color printing. Unlike RGB, which adds light together (additive mixing), CMYK subtracts light by layering inks that absorb certain wavelengths (subtractive mixing). This is why a color that looks vivid on screen may appear duller when printed — the RGB gamut (range of displayable colors) is wider than what CMYK printing can reproduce. Use CMYK values when preparing files for professional printing, including business cards, brochures, posters, and packaging. Most professional print shops and design software (Adobe Illustrator, InDesign) work in CMYK for print projects. For web and screen design, stick to HEX or RGB.
What is WCAG contrast ratio and why does it matter?
WCAG (Web Content Accessibility Guidelines) contrast ratio measures how different a foreground and background color appear to someone with low vision or color blindness. It is calculated using relative luminance — a measure of perceived brightness. A ratio of 1:1 means no contrast (same color), while 21:1 is maximum contrast (black on white). WCAG AA standard requires 4.5:1 for normal text and 3:1 for large text. WCAG AAA requires 7:1. Meeting these standards ensures your website is readable for users with visual impairments and is often required for legal compliance with the ADA (Americans with Disabilities Act) and WCAG 2.1/2.2 standards. This tool automatically calculates contrast ratios against both white and black for any color you enter.
How are shades and tints generated?
A shade is created by mixing a color with black — mathematically, by multiplying each RGB channel by a factor less than 1. For example, a 50% shade of red (255, 0, 0) would be (128, 0, 0). A tint is created by mixing with white — blending the original channel value towards 255. A 50% tint of red would be (255, 128, 128). This tool generates 9 evenly spaced shades (from near-black to the original) and 9 evenly spaced tints (from the original to near-white), giving you 19 total variants. These strips are very useful for building design system palettes — for instance, Tailwind CSS uses a similar 10-shade scale from 50 (lightest) to 950 (darkest) for each of its 22 color families.
What are the 140 CSS named colors?
The 140 CSS named colors are a set of color keywords defined in the CSS Color specification (CSS Colors Level 4). They include classic web colors like 'red', 'blue', and 'green', as well as descriptive names like 'cornflowerblue', 'lavenderblush', and 'papayawhip'. Each name maps to a specific HEX/RGB value that is consistent across all browsers and operating systems. They originated from the X11 color system used in Unix environments and were later standardized for CSS. While convenient for common colors, named colors cover only a tiny fraction of the 16.7 million colors representable in 24-bit RGB. For precise design work, always use HEX or RGB values rather than relying on named colors, as the names can be misleading (for example, 'gray' and 'grey' are slightly different).