https://github.com/mkaczmarski07/colorsense

Modern tool to create and test color palettes for websites.
https://github.com/mkaczmarski07/colorsense

Last synced: 2 days 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 (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-07-20T11:24:47.000Z (over 1 year ago)
• Last Synced: 2023-07-20T11:58:19.857Z (over 1 year ago)
• Language: TypeScript
• Homepage:
• Size: 1.34 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Colorsense

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.

## Official Website 🌐

[colorsense.kaczmarski.dev](https://colorsense.kaczmarski.dev)

## Site Features

✨ 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


## Technology Stack

[Angular 🔗](https://angular.io)


[TypeScript 🔗](https://typescriptlang.org)


[TailwindCSS 🔗](https://tailwindcss.com)


[Sass 🔗](https://sass-lang.com)


[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)


## 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 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.