https://github.com/mkaczmarski07/colorsense
Modern tool to create and test color palettes for websites.
https://github.com/mkaczmarski07/colorsense
angular chromajs color-blindness color-palette-generator typescript
Last synced: about 1 month ago
JSON representation
Modern tool to create and test color palettes for websites.
- Host: GitHub
- URL: https://github.com/mkaczmarski07/colorsense
- Owner: MKaczmarski07
- License: gpl-3.0
- Created: 2023-06-01T08:36:25.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2023-11-10T09:55:37.000Z (over 2 years ago)
- Last Synced: 2025-01-24T15:33:36.383Z (over 1 year ago)
- Topics: angular, chromajs, color-blindness, color-palette-generator, typescript
- Language: TypeScript
- Homepage:
- Size: 1.6 MB
- Stars: 1
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# About The Project
The following project is a subset of web design tools, allowing for creating color palettes adapted to websites and accessible to people with disabilities. The generated palettes can be tested against Web Content Accessibility Guidelines (WCAG), to ensure compability with the international design standards for the Internet.
## Application Features
🔷 Color palette generator ( currently with 4 variants - Complementary, Monochromatic, Light and Dark )
🔷 A grid of customizable UI elements
🔷 Simulating color blindness
🔷 Testing contrast of the selected palette according to WCAG guidelines
🔷 Editing any color in the color palette using a prepared set of shades or manually/br>
### Used Technologies
[](https://skillicons.dev)
### Additional Libraries
- [Chroma.js 🔗](https://gka.github.io/chroma.js/)
- [Ngx-colors 🔗](https://ngx-colors.web.app/overview)
- [color-blind library 🔗](https://github.com/skratchdot/color-blind)
## Live Demo
[colorsense.kaczmarski.dev](https://colorsense.kaczmarski.dev)
## User Interface
#### Displaying palette on real UI
#### Simulating color blindness
#### Checking contrast according to WCAG
## Installation Guide ⚙️
Here's a step-by-step guide to help you get started with the project.
### Prerequisites
Before you begin, make sure you have the following installed on your machine:
- Node.js (version 14.0 or later)
- npm package manager (version 6.0 or later)
### Installation
Let's start with installing all dependencies. Move to the app main workspace and run:
npm i
To create a localhost port you should type:
ng serve
Your application is ready at port 4200.
http://localhost:4200/
## License and Copyrights 📜
- The application is publicly available under the GNU General Public License.
- The project is educational and is not used for any commercial purposes.
- The main algorithm of Color Blindness Simulation used in color-blind library was originally made by Matthew Wickline & the Human-Computer Interaction Resource Network and is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.