Colorsense is an application created to help designers and developers create color palettes adapted to websites. Thanks to the multitude of built-in functions, the color palettes created with this application will always be adequately contrasted and accessible to people with disabilities.
✨ Color palette generator ( currently with 4 variants - Complementary, Monochromatic, Light and Dark )
✨ A grid of UI elements that changes color depending on the selected palette
✨ Simulating color blindness
✨ Testing the contrast of the selected palette according to WCAG guidelines
✨ Editing any color in the palette using a prepared set of shades, manual selection or by entering a value
Angular 🔗
TypeScript 🔗
TailwindCSS 🔗
Sass 🔗
Chroma.js 🔗
Ngx-colors 🔗
color-blind library 🔗
Here's a step-by-step guide to help you get started with the project.
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)
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/
- The application is publicly available under the GNU GENERAL PUBLIC LICENSE.
- The project is educational and is not used for commercial purposes.
- The main algorithm of Color Blindness Simulation used in color-blind library was originally made by Matthew Wickline and the Human-Computer Interaction Resource Network and is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.