DEV Community

Melanie Eureka Ngome
Melanie Eureka Ngome

Posted on

2 1

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

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (10)

Collapse
 
go4webdev profile image
Go4WebDev • Edited

And all 4 methods can be enhanced by using variables.

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

main {
   background-color: var(--background)
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
lanietodev profile image
Melanie Eureka Ngome

Absolutely!

Collapse
 
darkwiiplayer profile image
𒎏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.

Collapse
 
lanietodev profile image
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?

Collapse
 
sinanisler profile image
sinanisler • 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 😁

Collapse
 
lanietodev profile image
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!

Collapse
 
eshimischi profile image
eshimischi

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

Collapse
 
sinanisler profile image
sinanisler

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

Image description

Collapse
 
lanietodev profile image
Melanie Eureka Ngome

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

Collapse
 
xanwtf profile image
Xan

tailwind.config.js

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more