Forum:
I'm trying to change the color of the Spacehey logo on my profile as well as the text "Search Users" and "Help/LogOut." However, I can't figure out what part of my code changes this?
« Web, HTML, Tech Forum
Spacehey logo color?
Report Topic
4 Replies
Reply by Utility
posted
updated
Changing the color of the logo can be a bit tricky considering that the logo is an image, not a text element. You can change the color of the image by adding a sepia filter along with a hue-rotate filter to give it some color. We will also add a saturate filter to make the color pop a bit more :)
.logo { filter: sepia(100%) hue-rotate(45deg) saturate(100);}
Make sure to play with the hue-rotate() filter to get the color you want :)You can also modify the saturate() filter to make the logo less/more saturated.
Hope this helps!
hue-rotate(0deg): standard white
hue-rotate(45deg): green
hue-rotate(95deg): cyan
hue-rotate(200deg): light pink
hue-rotate(250deg): darker pink
hue-rotate(300deg): orange
hue-rotate(350deg): yellow
Permalink
Reply by pilmo_6
posted
Reply by xofrnk
posted
updated
Anyone know how to make it dark red/maroon? I've been struggling for almost an hour now lol. Edit: okay, I got it. for inquiring minds who need to know, the code is
.logo {
filter: sepia(100%) hue-rotate(300deg) saturate(400) brightness(50%);
}
and you can play with the numbers until it's exactly what you want
Reply by layliibug
posted
for black:
.logo {
filter: sepia(100%) hue-rotate(500deg) saturate(500) brightness(0%);
}