Hasty Treat - Neat Things in CSS Color - Current and Coming!
Oct 11, 2021
Dive into the vibrant world of CSS color! Discover the new color-contrast() function that promises to enhance accessibility by selecting the best contrasting colors. Learn about the accent color property and how it influences design customization. Explore the 'current color' feature, simplifying color management, and get insights into different color spaces like RGB and LAB. Plus, a sneak peek at the upcoming color-mix function sparks excitement for its potential, especially in web design challenges!
26:51
forum Ask episode
web_stories AI Snips
view_agenda Chapters
auto_awesome Transcript
info_circle Episode notes
volunteer_activism ADVICE
Use color-contrast()
Use color-contrast() to improve accessibility.
It selects the highest contrast color from a provided list.
insights INSIGHT
Neat CSS Color Features
CSS offers many color options, including new and upcoming features.
Some features replicate CSS preprocessor tools, and others explore new color spaces.
insights INSIGHT
Styling Form Inputs
The accent-color property styles form inputs, improving their often-criticized appearance.
Browser support is inconsistent, especially lacking in Safari and iOS.
Get the Snipd Podcast app to discover more snips from this episode
In this Hasty Treat, Scott and Wes talk about all things color in CSS, both current and coming soon!
Sentry - Sponsor
If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Sanity - Sponsor
Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Show Notes
04:39 - color-contrast()
Part of CSS5! Maybe.
The color-contrast() functional notation takes a color value and compares it to a list of other color values, selecting the one with the highest contrast from the list.
The color-mix() functional notation takes two color values and returns the result of mixing them in a given colorspace by a given amount.
Would be handy for programmatically generating colors - 10% more blue for a border? Sure!
14:18 - Space-separated functional color notations
rgba(255 255 255 0) instead of rgba(255,255,255,0.5)
15:28 - RGB and HSL with Alpha
rgb() and hsl() can take alpha and percent values - rgb(0 0 0 / 50%) or rgb(0 0 0 / 0.5)
18:22 - Hex + Alpha values
RRGGBBAA
How do you remember?!?!
Transparent
21:49 - lch(), lab(), hwb() notation
CIELAB color space aka Lab is a color space.
A color space is an organization of colors in coordination color profiling supported by various physical devices, it supports reproducible representations of color
Lab is intended as perceptually uniform
Perceptually uniform - a perceptual uniform color space ensures that the difference between two colors (as perceived by the human eye) is proportional to the Euclidian distance within the given color space.
Syntax - Tasty Web Development Treats