格 千格 KiloCell

CSS Color Name Full

Quick query 140 multiple CSS standard name colours and their codes

148 Colors

Explore world of CSS named colours

It hurts.

It's hard to remember the hex code! Is there a more semantic and readable way to describe colour?

The Charm of Naming Colours

CSS provides more than 140 standard name colours. Use Tomato Not #FF6347 This not only improves the readability of codes, but also makes team communication more visible.

What is the CSS Named Color?

CSS Named Colours (Named Colors) is a predefined set of keywords that correspond to a specific RGB value. This list is mostly inherited from... A list of the colours of the X11 window system, which was subsequently standardized by W3C. They include the basics. Red 、 Blue To poetic. AliceBlue 、 PapayaWhip And so on.

Why use name colours?

  • Prototype development phase : When the UI prototype is quickly built, the direct input of colour names is much faster than the search for the colour collector.
  • Code Readability : See? color: darkslateblue; You can immediately think of a dark purple blue, and... #483D8B The brain is needed for conversion.
  • Harmonization of standards : All modern browsers support these names in a completely consistent manner and there is no compatibility problem.

Technical Depth: Color Sorting and Contrast

This tool not only provides lists but also supports a variety of sorting algorithms:

  • Sort Colour (Hue) : Based on the HSL model, the colours are arranged in the order of the rainbow spectrum, which is easy for you to find a similar colour.
  • Lightness Sorting (Lightness) : Helps you quickly to find the dark/light colour that is best suited as background or for the future.
  • Smart Contrast : When you hover the mouse over the colour block, you automatically select black or white as the text colour for the hint, depending on the brightness of the color block, to ensure that it is visible.

On privacy and security

This tool is run entirely on static data, and all search and filtering operations are performed locally in your browser. Click on any color block to quickly move HEX code copy to clipboard to help you develop more efficiently.

Copyed to clipboard!