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

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

Comments

[Go4WebDev]

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]

Absolutely!

[𒎏Wii 🏳️‍⚧️]

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]

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]

[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 😁

[Melanie Eureka Ngome]

I can see that you're using the name method in the correct context 😅 It's always great to see people using the right tools for the job!

[eshimischi]

Here is a new standard CSS4 evilmartians.com/chronicles/oklch-...

[sinanisler]

they are assuming every monitor is same. funny 😁😂😂😂😂
not even same brand monitor colors are not same....

[Melanie Eureka Ngome]

Ah yes! Although, browser support might be a setback, hopefully, we can expect an improvement.

[Xan]

tailwind.config.js