Data in the 2022 Web Almanac says that the 6 and 3-digit hex color formats (#XXXXXX and #XXX) combined account for 74% of all color declarations. That’s not surprising, or even really bad, but it’s a little unfortunate as these color formats are the most boring and least capable of all.
You know what else is unused? Color formats that have just as good of browser support as 6 and 3-digit hex.
8-digit hex is at 0% usage. It includes alpha as the last 2 digits. To me it’s slightly weird this even exists because it’s just RGB color space and rgba(30, 30, 30, 0.84) (or the more modernrgb(30 30 30 / 84%)) makes a lot more sense to me than #1e1e1ed6. I would suspect it gets some usage just based on the fact that Chrome DevTools spits it out when you open the color picker on a hex code and adjust the opacity slider.
Which brings up the elephant in the room of color formats: tools.
The hsl() and hsla() functions also have 0% usage in the data, and they have just as good of support as the hex codes. Why? HSL can do anything HEX can do, except it’s far more readable and easier to adjust. It’s just better, really.
Part of the why is definitely tools. Look at Photoshop’s color picker.
Technically you’ve got RGB and LAB numbers in there you could pluck out and use in CSS, but the only one that is easy to copy-and-paste in HEX. Everybody likes easy. I bet that input alone is a worth a bunch of percents of hex usage on the web.
Figma is a little better in that I can specifically activate colors in HSL:
But all those numbers are individual inputs so it’s still hard to copy and paste the color. And look in the sidebar, even though the color is set in HSL, it uses HEX to show there, making HEX feel like the first-class citizen. LCH and LAB are totally absent.
I get why these super new formats like LAB and LCH are at 0% on the Web Almanac data, as there just hasn’t been time for them to build, but will they ever build if tooling doesn’t start supporting them?
I use a color picker called Sip that I like, where the whole purpose is picking colors to use in digital products, and the new formats are conspicuously missing from there too.
Miriam gets into all this in When Our Tools Hold Us Back:
But why are we still using the oldest and least legible color formats, when better formats are well-supported? HSL is more human-readable than HEX, and the rgb() function now supports alpha transparency without switching to rgba().
Plus actual research into the landscape:
- Adobe XD supports HEX, RGB, and HSB. Illustrator adds CMYK and a grayscale option, while Photoshop also supports extended gamuts such as Display P3, and perceptually-uniform LAB.
- Figma (now also owned by Adobe) provides HEX, RGB, ‘CSS’ (which is
rgba()), HSL, and HSB. - Sketch shows HSB, HEX, and RGB(a).
I don’t know of any popular design tools that provide LCH, or the newer okLAB/okLCH variants, let alone relative colors defined as a function of mixing or adjusting other underlying colors.
Perhaps it’s best to think of this as an opportunity: someone (please) make a kick-ass color app that supports all the newest color formats, relative colors, color mixing, and all that, and have the app help out with their usage in CSS (copy and paste with quality fallbacks, etc). But also, Adobe, you help too.
Related
ncG1vNJzZmibmKe2tK%2FOsqCeql6jsrV7kWlpbGdgZ3xxfY6hnLFlk6S5sL7SZpirnZ6peqi%2BxJqrZpmkYq6vxdOhoKefXZrFpLHPrWSbnZmjtG68zqmspZmiZA%3D%3D