DEV Community

Cover image for Revamp your profile's color scheme!
Rei Allen Ramos
Rei Allen Ramos

Posted on

Revamp your profile's color scheme!

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! ๐Ÿ‘Œ

Top comments (13)

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 โ€ข โ€ข Edited

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 โ€ข

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
ย 
ben profile image
Ben Halpern โ€ข

Cool!

Collapse
ย 
reiallenramos profile image
Rei Allen Ramos โ€ข

Thanks! It means a lot :D

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 โ€ข โ€ข Edited

Looks good from my end. Can you try again?

screenshot

Collapse
ย 
inozex profile image
Tiago Marques โ€ข โ€ข Edited

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
Michael Tharrington โ€ข

So dang cool!

https://dev-to-uploads.s3.amazonaws.com/i/ac3mba9aee7o60ykymyi.png

Collapse
ย 
reiallenramos profile image
Rei Allen Ramos โ€ข

It worked!! ๐Ÿ˜Š Thanks a lot!

Collapse
ย 
saurabhdaware profile image
Saurabh Daware ๐ŸŒป โ€ข

Sooo coool!

Collapse
ย 
reiallenramos profile image
Rei Allen Ramos โ€ข

Thanks man! ๐Ÿ‘Œ