https://github.com/scriptype/sorted-colors

A tool to sort the named CSS colors in a way that it shows related colors together
https://github.com/scriptype/sorted-colors

colorpicker colors css hsl pwa rgb tool

Last synced: 24 days ago
JSON representation

A tool to sort the named CSS colors in a way that it shows related colors together

• Host: GitHub
• URL: https://github.com/scriptype/sorted-colors
• Owner: scriptype
• License: mit
• Created: 2020-05-24T21:32:58.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2023-11-21T23:51:44.000Z (7 months ago)
• Last Synced: 2024-02-16T10:47:03.908Z (4 months ago)
• Topics: colorpicker, colors, css, hsl, pwa, rgb, tool
• Language: JavaScript
• Homepage: https://enes.in/sorted-colors/
• Size: 7.16 MB
• Stars: 575
• Watchers: 9
• Forks: 28
• Open Issues: 30
• Metadata Files:
  • Readme: README.markdown
  • Funding: .github/FUNDING.yml
  • License: license.txt

Lists

• awesome-stars - sorted-colors
• awesome-stars - sorted-colors
• awesome-stars - scriptype/sorted-colors - A tool to sort the named CSS colors in a way that it shows related colors together (JavaScript)
• awesome-stars - scriptype/sorted-colors - A tool to sort the named CSS colors in a way that it shows related colors together (JavaScript)
• awesome-stars - sorted-colors

README

        
![Sorted CSS Colors Animated Logo](640x480-CSS-colors.gif)

# Sorted CSS Colors

I wanted to create a tool to sort the named CSS colors in a way that it shows related colors together. So, next time I can't decide between a few CSS colors, I can just check them here side by side.

Here's how it looks:

![Screen Capture showing how to sort the named css colors](kapture.gif)

It's a Progressive Web App! It works both in mobile and desktop, even offline. If you liked the tool I suggest adding it to your home screen / downloading it as desktop app, so you can easily access it whenever you need. Also, please feel free to report any bugs or provide feedbacks by [creating issues](https://github.com/scriptype/sorted-colors/issues).

## Credits

- Logo by [Karicca](https://www.behance.net/karicca)

- Table of colors, which I used for parsing color data, is taken from [Eric Meyer's website](https://meyerweb.com/eric/css/colors/) and then modified a bit to serve the purpose better.

- Iconfinder:

  - [Back Icon](https://www.iconfinder.com/icons/326518/arrow_back_icon)

  - [Github Icon](https://www.iconfinder.com/icons/298822/github_mark_icon)

  - [Twitter Icon](https://www.iconfinder.com/icons/211920/social_twitter_icon)

## About the repository

This tool was originally developed using CodePen.io online editor and this repository is an export of it. Original URL: [https://codepen.io/pavlovsk/pen/zYvbGKe](https://codepen.io/pavlovsk/pen/zYvbGKe).