https://github.com/edumigueis/collorizer
Color manipulating project in VueJS.
https://github.com/edumigueis/collorizer
color color-picker color-scheme color-theme design js palette-generation vue vue-color vuejs
Last synced: about 1 month ago
JSON representation
Color manipulating project in VueJS.
- Host: GitHub
- URL: https://github.com/edumigueis/collorizer
- Owner: edumigueis
- License: mit
- Created: 2020-07-14T02:10:39.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-09-22T18:14:47.000Z (over 3 years ago)
- Last Synced: 2025-02-01T21:34:29.502Z (3 months ago)
- Topics: color, color-picker, color-scheme, color-theme, design, js, palette-generation, vue, vue-color, vuejs
- Language: Vue
- Homepage:
- Size: 1.81 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Collorizer
[![MIT License][license-shield]][license-url] [![LinkedIn][linkedin-shield]][linkedin-url]
[![Product Name Screen Shot][product-screenshot-b]](https://github.com/edumigueis/Collorizer)
Collorizer
An awesome color manipulating project in VueJS. The project provides a palette maker, a color grid creator, an image color reader, a color conversor and a color lab.
Table of Contents
## About The Project
[![Product Name Screen Shot][product-screenshot]](https://github.com/edumigueis/Collorizer)
I've always wanned to explore color theory and different types of color representation. Having that in mind, I decided to create my own color manager.
Some of the features already implemented:
* Color palette generator that allows to pick colors and organize them to form a gourgeus palette.
* A tool that allows to get the main palette from an image, It provides a vibrant tones and their muted variants for a palette with color variety.
* A gradient maker that allows you to pick colors, rotate, change the pattern and direction of a color gradient. It also generates CSS code with te result. :smile:
* A color lab, a space where you can turn one color into an amazing palette. From a single tone, it will suggest multiple color based on color theory.
* A color conversor that supports: HEX, RGB, CMYK, HSL, HWB, ANSI16 and CSS keys.
Note: for the moment, these are the implemented features and more can be implemented. If you want, feel free to contribute. The data base integration in the "my-palettes" page as well as the blog and explore pages were discontinued but the routes were kept so that they could be added eventually.
### Built With
This application was built with:
* [Vue.js](https://vuejs.org/)
* [SCSS](https://sass-lang.com/)
## Getting Started
To get a local copy up and running follow these simple steps.
### Prerequisites
You will need Vue.js and npm.
* npm
```sh
npm install npm@latest -g
```
### Installation
1. Clone the repo
```sh
git clone https://github.com/edumigueis/Collorizer.git
```
3. Install NPM packages
```sh
npm install
```
4. Run the application in dev mode
```JS
npm run dev
```
## Contributing
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## License
Distributed under the MIT License. See `LICENSE` for more information.
## Contact
Eduardo Migueis- [edumigueis](https://www.linkedin.com/in/edumigueis/)
Project Link: [https://github.com/edumigueis/Collorizer](https://github.com/edumigueis/Collorizer)
## Acknowledgements
* [Vue Page Transitions](https://www.npmjs.com/package/vue-page-transition)
* [Img Shields](https://shields.io)
* [Choose an Open Source License](https://choosealicense.com)
* [Stylus Loader](https://www.npmjs.com/package/stylus-loader)
* [Vue Color](https://www.npmjs.com/package/vue-color)
* [Vue Router](https://router.vuejs.org/)
* [Node Vibrant](https://github.com/Vibrant-Colors/node-vibrant)
* [Unsplash](https://unsplash.com/)
* [Font Awesome](https://fontawesome.com)
## Meta
Developed and designed by Eduardo Migueis - [edumigueis](https://www.linkedin.com/in/edumigueis/)
Licensed under the MIT license. Images not included. Feel free to use the design as inspiration.
[license-shield]: https://img.shields.io/github/license/othneildrew/Best-README-Template.svg?style=for-the-badge
[license-url]: https://opensource.org/licenses/MIT
[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
[linkedin-url]: https://www.linkedin.com/in/edumigueis/
[product-screenshot]: collorizer/src/header2.png
[product-screenshot-b]: collorizer/src/header1.png