Colors are a way for you to make anything and everything spectacular. For the web, colors are defined through a good programming language called CSS. And for the past few months, I’ve been working on almanac references, articles, and a guide for color on CSS-Tricks. I shared useful knowledge on different aspects of color. I researched, tested, and spent a lot, and I mean a lot of time in the color rabbit hole that I can almost rap about named colors (I’m joking, please). At a certain point, for a single entry, I could use 2 days looking up different resources, articles, blogs, and research papers, comparing them to make sure the information I have is accurate.

Here’s a brief summary of everything color I’ve worked on:

• @color-profile: A color profile contains a description of colors in a color space. This is essentially what helps create the mapping between a PCS and

• light-dark(): The CSS function responsible for light and dark mode toggling in CSS.

• rgb(): The rgb() function uses the r, g, and b channels to manipulate the redness, greenness, and blueness of a color in the sRGB color space

• hsl(): The hsl() CSS function is responsible for accessing colors in sRGB using hue, saturation, and lightnesss

• lab(): The lab() CSS function accesses colors in the CIELAB color space. The way it works is that the bl manipulates the color’s lightness, value a sets the redness/greenness of the color and b value sets the blueness/yellowness of the color. This function takes its color from a newer color space with better access to colors you’ve never seen.

• lch(): The lch() CSS function accesses colors in the CIELAB color space, but uses its polar coordinates to depict its colors in hue and chroma.

• oklab(): The oklab() CSS function accesses colors in the Oklab color space which is “ok” version the CIELAB color space solving problems like perceptual uniformity.

• color-gamut: The color gamut is the entire range of colors that a device can represent on the screen. In CSS, this is a media at-rule feature and it works by allowing you to style elements according to the color-gamut value set that the device supports. I delve deeper into colour models and colour spaces here as well.

The highlight of this all was the CSS Color Functions guide that I worked on. It has all the color spaces CSS supports and its associated functions, and so much more. So if you’re looking to explore the world of color, my guide is a useful resource. (Can’t even believe I’m saying that haha).

I’ve worked and am still working on additional articles, so if you need a technical writer for a project, please reach out to me via email at sunkanmifafowora@gmail.com. I’m only one call...email away. :)

I love feedback!

When the guide came out, I won’t lie, I was a bit sad that it didn’t generate as much traction as I thought it would. It had 0 comments, and I have no way of knowing its reach, so I couldn’t accurately measure how many people viewed the guide (save codepen views for the demos I made). I was SO HAPPY to receive this comment from Kehvan Zydhek (shoutout to you!) I’m super glad you found it useful, and everyone else did. :)

Speciaaaaallll shout-out to Geoff Graham and Juan Rodríguez for their numerous edits and pointers. I worked more closely with Juan this time, and he was AWESOME. He helped me point out things I missed and provided useful pointers along the way. I really thank God I met these talented and fun individuals!

Also, all this explains why this blog hasn’t been updated as much, but I will do my best to share updates on things I learn as much as I can every month till this year ends. So we’re aiming for 1, 2, 3… 5 articles till this year ends on this blog of mine, and I hope you all join me on this. :)

Thank you all for reading to this point, and I hope to see you in the next article! Take care! 💛