Friday, November 22, 2013

List of Color Keywords for Web Styling

Update Dec 21, 2015

The description is below this tool

color keywords
Click the search option first.

Find abnormally
Search normally
RESET BG COLOR

That is the list of keywords for defining web color. Useful for coloring any style-able HTML element with CSS. So, instead of typing rgb, or hex value, we can use these keywords below.

The tool above has two options for searching the CSS color keywords.

  1. Find abnormally
    1. For example,
      you type a, then every keyword containing the letter a will be shown.
    2. Another example,
      type the word green, then every color keyword that has the word fragment green in it will be returned.
  2. Search normally (from the beginning of the keyword)
    It's a common method in browser. It will check the character starting from the front of the keyword then return any matching keyword(s).

This will be regularly updated if there's new color keyword(s) - in CSS4 maybe.

Using the Search Function Above

  • Hit either option to enable search input.
    The dark colored option means the method is inactive.
    The light colored one is the chosen search method (active).
  • Type the query on the input.
  • You can see the color code in hex and rgb and see it on wider area by clicking either button on the right.
  • Reset by emptying the input or switching the search option or just clicking the current search option.

This user interface we created is better viewed on desktop. But it will also fit the mobile device screenthough a bit weird.

Application/Page Updates

Dec 21, 2015

  • Removed the auto-scroll on search option click and input.

Dec 20, 2015

  • Switched the description to the bottom of the tool.
  • Added hyperlinks to jump around.
  • Added related tools links on the bottom.

Oct 15, 2015

  • Lowered the opacity for other inactive color swatches.
  • Updated the "abnormal" search. Somebody forgot to update the HTML attributes. It's fixed now.

Sep 4, 2015

  • Added RESET BG COLOR feature to manually reset the background color test and the search box input text.

Aug 10, 2015

  • Added opacity changes.

June 14, 2015

  • Added "jump to top" behavior on search bar type/paste event.
  • Added random word for button[disabled].
  • Changed the limit position for scrollTop.

June 12, 2015

  • Added jump button to search bar.
  • It's using slightly different output layout.
  • The main "magic" is translated to plain JavaScript.
  • Added rebeccapurple keyword.

Related to Color and CSS

  • CSS Color Code Color Output Preview C4OP.
  • Image Circle Clipper CSS Editor.

More Reading

CSS Color Module Level 3 at W3C
| | |