DEV Community

loading...
Cover image for Revamp your profile's color scheme!

Revamp your profile's color scheme!

reiallenramos profile image Rei Allen Ramos ・1 min read

Hey awesome devs! 👋 As a side-project, I created this app to seamlessly browse color palettes for your account! If that's not your thing, you can also enter a username and scrape their profile to identify which colors they use.

But why?

From a user point-of-view, I feel the color pickers in the profile settings aren't as intuitive as they can be (not all of us are gifted in color theory 😕). However if you have available hex values then good for you!

From a developer point-of-view, this is a part of my journey in learning Python. The frontend was fairly easily done with VueJS, but on the backend side I got to learn about web scraping with BeautifulSoup4. As a bonus, I also learned how to deploy images in Google Cloud Run 🌈!

Code available here.

Shoutout to Michael from yo@dev.to for responding and pointing me to the right direction when using the DEV logo! 👌

Discussion (13)

pic
Editor guide
Collapse
rpalo profile image
Ryan Palo

Aww yeah! This is a really neat thing, and a super clean interface :) Thanks for sharing!

My color scheme, light blue and black

Collapse
reiallenramos profile image
Rei Allen Ramos Author

Thank you! I used Skeleton CSS to create a basic responsive layout.

Collapse
pp profile image
Paweł Ludwiczak

This is so cool! I think it would be nice addition to DEV profile. We could even randomize colors for users when they join so they don't end up with generic colors! Probably one thing we could add is picking colors that pass contrast ratio because we use these colors for "Follow" button and others so it's important to keep colors accessible and readable. But I love the idea, it's great!

Collapse
reiallenramos profile image
Rei Allen Ramos Author

Ohhh the contrast ratio bit is very interesting! I never thought about how colors are being used to attract or divert attention. For me it was just about what looks good together. TIL!

Collapse
inozex profile image
Tiago Marques

Didn't work for me :/
Can't find my account..
Anyway, good initiative 🙂

Collapse
reiallenramos profile image
Rei Allen Ramos Author

Looks good from my end. Can you try again?

screenshot

Collapse
inozex profile image
Tiago Marques

It's working now 🙂
But there's a small issue, at least in Edge and Chrome for Android, the submit button doesn't get enabled if I type, only if I paste the text from the clipboard.
In Firefox Night preview for Android it works, but the button still has the disabled style.
(Ps: I'm using Android 7.1, if that might help)

Collapse
michaeltharrington profile image
Collapse
reiallenramos profile image
Rei Allen Ramos Author

It worked!! 😊 Thanks a lot!

Collapse
ben profile image
Collapse
reiallenramos profile image
Rei Allen Ramos Author

Thanks! It means a lot :D

Collapse
saurabhdaware profile image
Collapse
reiallenramos profile image
Rei Allen Ramos Author

Thanks man! 👌