Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: about 1 month 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 (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-11-21T23:51:44.000Z (10 months ago)
- Last Synced: 2024-05-28T14:24:35.078Z (3 months ago)
- Topics: colorpicker, colors, css, hsl, pwa, rgb, tool
- Language: JavaScript
- Homepage: https://enes.in/sorted-colors/
- Size: 7.16 MB
- Stars: 580
- Watchers: 9
- Forks: 29
- Open Issues: 30
-
Metadata Files:
- Readme: README.markdown
- Funding: .github/FUNDING.yml
- License: license.txt
Awesome Lists containing this project
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).