hipstina / colormind

🎨 MERN stack color contrast checker & library

Home Page:https://thawing-journey-31052.herokuapp.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Colormind

colormind banner

Project status: Launched March 5, 2021

By: Christina Padilla


Description

Colormind is a tool for choosing the best combination of colors that are already part of your brand's color palette. Simple enter in two colors to view their contrast score. If you like a combo, save it to the Colormind collection. You can also view a curated selection of accessible color palettes in the Colormind collection.

Technologies Used

  • React
  • CSS
  • MongoDB
  • Express/Node

Getting Started

To get started, clone this repo to your local machine.

$ git clone https://github.com/hipstina/colormind.git

Download the dependencies for the server

$ cd colormind
$ npm i 

Download the dependencies for client

$ cd client
$ npm i

Screenshots

entity diagram

component hierarchy

user workflow

Future Updates

Track the development of this project on Trello: https://trello.com/b/B06jilKW/p2

Credits

get-contrast - A small package for getting the contrast ratio and WCAG score of common color inputs

random-color - A tiny script for generating attractive colors

Wireframe built with whimsical.com

Diagrams built with Lucid

@ahonore42 & @anpato for help with React

This project was inspired by:

About

🎨 MERN stack color contrast checker & library

https://thawing-journey-31052.herokuapp.com/


Languages

Language:JavaScript 81.4%Language:CSS 14.0%Language:HTML 4.6%