What’s Your Go-To Method for Defining Colors in CSS?🤔

#css #webdev #colors

Selecting the right colors in CSS is fundamental to web design. Do you have a preferred method for defining colors in your projects? Whether you're a seasoned developer or just starting out, choosing colors can be a creative process. Some swear by hexadecimal values, others opt for RGB or HSL.

As for me, I’ve always used hex codes. Well, at some point, I’ve tried out RGB and RGBA values. I’d always thought the others were “complex.” Digging deeper, it all came down to personal preference, and most times, project requirements.
I delved into the four most popular methods of defining colors in CSS in this article:
4 Ways to Define Colors in CSS

Top comments (10)

Go4WebDev • Oct 30 '23 • Edited

And all 4 methods can be enhanced by using variables.

[data-theme='default'] {
    --background: hsl(255, 80%, 98%);
}

main {
   background-color: var(--background)
}

Melanie Eureka Ngome • Nov 3 '23

Absolutely!

𒎏Wii 🏳️‍⚧️ • Oct 30 '23

If I just quickly want to get a specific colour, I usually just reach for hex colours. They're easy to type and usually get me close enough to what I had in mind that a little bit of tinkering with the values can get me there.

But most of the time, I end up trying to parametrise my styles a lot and end up reaching for LCH with custom properties, although I might move away from that to some extent once relative colour syntax becomes viable.

Melanie Eureka Ngome • Nov 3 '23

LCH is undoubtedly one of the most promising alternatives available today, and it's a true game-changer. I firmly believe that it deserves much wider adoption and recognition.
Although I've never used it. Can you suggest any resources I could try?

sinanisler • Nov 2 '23 • Edited

[hashtag]000000

[hashtag]00000055 <--- transparency 😉

but mostly if I am just prototyping and I need a color I just write colors in css names like tomato, yellow, green, red, lightgreen, lightyellow....etc 😁