List of 🎨 web colors

Lists all 147 CSS named colors. Click on a color card to copy its HEX value. Supports name search, category filter, and hue/lightness sorting.

Usage and Application Examples

  • Quickly see a list of named colors available in CSS
  • Click on the color card to copy the HEX value and paste it into design tools or CSS
  • Select the best color by comparing similar colors using hue and lightness sorting
  • Category filter to display only desired tones such as red and blue

What is Web Colors?

Web Colors is a comprehensive reference tool displaying all 147 CSS named colors with their corresponding HEX and RGB values. Instead of memorizing color codes or searching documentation repeatedly, designers and developers can instantly view every color name recognized by browsers. The tool provides one-click copying of color codes in multiple formats, making it invaluable for web design workflows. Sorting options by name, hue, and lightness help users discover related colors and find the perfect shade for their projects.

How to Use

Visit the Web Colors tool to see a complete grid of all 147 CSS named colors, each with its name displayed. Click any color to reveal its HEX value (like #FF5733) and RGB values (like rgb(255, 87, 51)). Copy buttons next to each format let you quickly grab the code you need without typing. Use the sorting options—organize by name alphabetically, by hue to see color families, or by lightness to find light versus dark variants. Search functionality helps you quickly find specific colors when you remember the name but not the exact appearance.

Use Cases

Web Colors serves multiple professional contexts:
• Web designers select CSS-safe color names that work across all browsers
• Front-end developers reference it while writing stylesheets, finding colors faster than documentation
• Brand designers verify if standard CSS colors match brand requirements, or find closest alternatives
• Accessibility specialists check color contrast using lightness sorting to ensure readable combinations
• Educators teach students standard web color naming conventions and RGB/HEX relationships

Tips & Insights

CSS named colors are browser-safe and eliminate guesswork about color representation. RGB values reveal color intensity—higher numbers mean more intense channels. HEX values directly correlate to RGB, with two digits per channel in hexadecimal. Lightness sorting reveals that white-family colors offer subtle variations perfect for backgrounds, while hue sorting shows all reds together, simplifying color family selection. Using named colors improves code readability—teammates immediately understand "crimson" better than "DC143C."

Frequently Asked Questions

What is CSS named color?

CSS named colors are predefined color names that can be used in CSS. The 147 colors such as "red", "blue", "coral", etc. are defined by default and can be used for styling by specifying the color name as is instead of the HEX code.

How many colors are available in total?

There are a total of 147 named colors defined in CSS Level 4. They include basic red, blue, green, coral, salmon, lavender, and many others. All modern browsers can use the same colors.

How do I copy HEX values?

Clicking on each color card automatically copies the HEX value of that color to the clipboard. A toast notification is displayed when copying is complete.

What is hue sorting?

Hue Sort is a function that sorts colors by their hue (Hue) value in the HSL color space. Colors are sorted in the following order: red, orange, yellow, green, blue, and purple, so that similar colors can be seen together.

How are category filters categorized?

It is classified into eight categories: red, orange, yellow, green, blue, purple, white, and gray. Each color is automatically categorized based on hue, lightness, and saturation.

Should I use named colors or HEX codes?

Both produce the same result, but named colors are more code readable and intuitive. HEX codes, on the other hand, are easier to work with design tools and can represent colors that are not available in named colors. It is common practice to use both according to the policies of the project.

Can I convert between HEX, RGB, HSL, and other color formats?

Yes, the tool displays multiple color format options for each named color including HEX, RGB, and HSL values. You can copy any format with one click and use it in your CSS, design tools, or development environment.

What is the difference between RGB and HEX color formats?

RGB uses three decimal numbers (0-255) for red, green, and blue channels like `rgb(255, 0, 0)` for red, while HEX encodes the same data in hexadecimal like `#FF0000`. HEX is more compact and widely used in web development, while RGB is common in design software.

How do I use these named colors in my actual CSS code?

Simply use the color name directly in CSS properties, like `color: navy;` or `background-color: lightcoral;` instead of HEX or RGB values. Named colors are easier to read, remember, and maintain in code, making them ideal for simple color schemes.

Is there a search or filter feature to find specific colors?

Yes, most color tools include a search bar where you can type a color name or keyword to instantly filter the list. This is much faster than scrolling through all 147 colors, especially when looking for variants like "light blue" or "dark red."

Can I export a color palette for use in design tools or version control?

Many tools allow you to select multiple colors and export them as CSS, JSON, or image files. This makes it easy to share your chosen color scheme with teammates or import into design software like Figma or Adobe XD.

Are all 147 named CSS colors universally supported across browsers?

Yes, all official CSS named colors have been part of the CSS standard for decades and work identically across all modern browsers and devices with zero compatibility issues. They're considered more reliable than custom colors since they're standardized.