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...#483D8BThe 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.