Web Color Chart & Picker — Copy HEX / RGB / HSL / CMYK Color Codes
A free web color chart with 216 swatches. Click any color to instantly copy its HEX, RGB, HSL, or CMYK code. You can also sort the chart by hue, filter by color family, convert any custom color, and save your favorites.
Color Code Converter
Copied!
💡 Basic Usage
- Copy: Click any color swatch and its code is copied to your clipboard.
- Switch format: Use the HEX / RGB / HSL / CMYK buttons at the top to change which format gets copied.
- Filter: Press “Red”, “Blue”, and so on to show only that color family. Press “All” to reset.
- Favorites: Hover over a swatch and press the star to save it. The “Fav” filter shows only your saved colors.
📚 Glossary
-
Hue — “the type of color”
Red, blue, yellow — the basic identity of a color, usually pictured as a color wheel. Press “Sort: Hue” to arrange the chart as a rainbow gradient, which makes it much easier to find the shade you want. -
HEX — “the web notation”
A format like #FF5733, written with # followed by six hex digits. It is the most common way to specify colors in HTML and CSS. -
RGB — “the three primary colors of light”
Colors are mixed from Red, Green, and Blue light — the same way your computer or phone screen works. Each value ranges from 0 to 255; higher means brighter. -
HSL — “the human-friendly format”
Specifies a color by Hue, Saturation, and Lightness. Adjustments like “make it more vivid” or “a little darker” map directly to the numbers, which makes HSL very intuitive to tweak. -
CMYK — “the ink format”
The mixing ratio of Cyan, Magenta, Yellow, and Key (black) inks, used for print work.
⚠️ Important note on CMYK conversion
Screen colors (RGB) can be more vivid than ink (CMYK) can reproduce, so the CMYK values shown here are mathematical approximations.
Printed colors often look duller (darker) than they do on screen, so treat these values as a starting point only.
📝 About the formula
This tool converts RGB (0–255) with the following steps:
1. Normalize each RGB channel to 0–1
2. Compute the black component as K = 1 – max(R, G, B)
3. Derive each ink from the remainder, e.g. C = (1-R-K)/(1-K)
4. Convert the results to percentages.
⚠️ Notes
-
Monitor differences
Colors can look slightly different depending on the display and its settings. A color you pick here may not look exactly the same on someone else’s screen. -
Accessibility
Light text colors or dark-on-dark combinations can be hard to read. When using colors in web design, pay attention to the contrast between text and background.