css-colour-palette

A tool that makes it easier to visualize colours and modify existing CSS files to customize your colour themes. This makes it easy to create spooky websites and applications for the Halloween season!

Comment

Inspiration

One of our team members started coding because she wanted to customize her Tumblr theme. Years later, customizing themes is still often her starting point when trying out a new technology. Changing a colour and then seeing what component it affects is an easy and rewarding way to dive into coding, but it can be challenging to visualize what colours you're working with. Manually checking hexadecimal codes to put together a colour palette takes a lot of time away from more challenging areas of writing code.

What it does

The user pastes a CSS file or code snippet into the text entry box, then clicks the button to generate a colour palette. They can click on any of the colours in the palette to modify them. Then they click the button to save the palette, and are presented with a text box with their modified code.

How we built it

We used ReactJS for the frontend and Firebase as a backend server. We planned to use Python to parse the text to find.

Challenges we ran into

We were all very new to these technologies and it took longer to code than we expected. In the end, we weren't able to get it working, but with the backend set up it's a good starting point.

Accomplishments that we're proud of

  • Helping each other out with screensharing and pair programming
  • Adapting to a smaller team than we planned for
  • Managing to create a full stack web application

What we learned

  • Working with GitHub
  • React and Firebase
  • That however long we expect something to take, we should quadruple it (at least!)

What's next for css-colour-palette

With the framework that we have in place, we've made great progress. The major tasks left for the project is to create a proper working CSS parser and add file upload integration with Firebase. We still believe that this would be a useful tool for designers, so after we have time to follow up with more research we could certainly make our tool functional.

Built With

Share this project:

Updates