DEV Community

Cover image for Color scheme generator using javascript and apis
Mariam ait bella
Mariam ait bella

Posted on • Updated on

Color scheme generator using javascript and apis

Hello friends!

I am presenting to you my last project that I built using, I had lot of fun building it especially the design and the apis part and here is the final result.

Image description

This project is very helpful to get the color scheme for your own future projects and it is not the final version I'm looking forward to add other useful features to it and I hope you can tell me you opinions and ideas I can add to develop this amazing project 🙏!

Used technologies

  • HTML
  • CSS(Media queries classes...)
  • JS(Apis...)
  • Figma

My newfound knowledge
Apis applications, fetching data from them, turn it to Json and get data from it and also the ability to read apis documentation.

What are the challenges
Working with data that is fetched from the api and turning it show it to the user, this part is very important and needed more focus from me and effort and I learned many things at the end.

Source code
You can see the source code by clicking to this link of github repository
source code

Try out the project, review it, and share your thoughts in the comments area below. 🙏
Test the colorScheme

Top comments (6)

abhinav2127 profile image
Abhinav Jha

Hi Mariam,
After reviewing the repository, It is in initial stage and that's good.
I've an idea. Try having a color wheel as that will be easier for your to select color from them.
Try to figure out themes based on ideas. We have many color wheels but it will be a great addon to have some program share color theme from idea or photo.

Love to here from you, if you want to know more on the idea.

mariamaitbella profile image
Mariam ait bella

Thanks for reviewing my code and I will concider your ideas I would like to get more information caus this is intersting!

abhinav2127 profile image
Abhinav Jha

Hi Mariam,
I'm trying to explain what's in my mind. If you have any doubt you can ask!
We can select color scheme using 5-6 core mechanism based on color wheel strategy.
So, here is a case explaining the situation.
I want some suggestion of color scheme for my business website who have following details:

  • It's an e-commerce website setting beauty products for skincare and hair care.
  • My target customers are both women and men of age between 25-35 yrs.
  • I can attach my logo and some banners/product images.

The code will receive these information and based on images and logo you can decide perfect match for color scheme.

To make the decision you will need to explore opensource image library which will give you matching colors from the image. You can take those color and write a logic to select colors which provide contrast to existing colors.

Plotting contrast color on color wheel will help you to select color schemes based on existing strategies.

It's just something coming from mind! You can fully optimize it, or change it!
Hope this helps!

Thread Thread
mariamaitbella profile image
Mariam ait bella

I got the idea and it is so fine I really liked it and I wish I could add it I will be thinking about it and giving it some time and focus to apply it and add it to this project. Thank you so much for your time and support!

atulcodex profile image
🚩 Atul Prajapati 🇮🇳


mariamaitbella profile image
Mariam ait bella

Thanks you!