A presentation at CSSDay 2022 by Chris Leeley

HSL is an alternative representation of the RGB color model. It’s the most common way to specify color in design tools, but it has an inherent fault — Lightness and Saturation don’t reflect human perception. Compare blue and green — while both have a Lightness of 50, blue looks much darker.

The human eye contains rods which detects levels of light (dark versus bright) and three kinds of cones which distinguish among the different colors. If none of the cones are functioning (very rare), then a person has grayscale vision. If the cones are semi-functional (also rare), then the person sees colors, but they are muted.

As you type, the contrast ratio indicated will update. Hover over the circle to get more detailed information. When semi-transparent colors are involved as backgrounds, the contrast ratio will have an error margin, to account for the different colors they may be over.

I’ve been experimenting lately with a new way to apply color values in my CSS. Instead of setting explicit values for each color, I calculate the entire palette from a small set of base colors. It’s not an applicable solution for every project, but it might be an interesting alternative method to consider.

The easiest-to-use graphical effects are the shorthand filter functions. You apply them with the CSS filter property. The browser manipulates the appearance of the corresponding element before painting it to the page. Filter functions are supported prefix-free in Firefox since version 35 (stable release in January 2015). They have been supported with the -webkit- prefix in Safari, Chrome, and Blink-based Opera for a few years now.

The redesign of my website finally gave me an opportunity to experiment with SVG filters and color manipulation. The duotone look, which was made sort of trendy again earlier this year by Spotify's new brand identity, is based around manipulating the image's color range by modifying the individual color channels.

We’re going to create a background like this in pure CSS:

colourco.de is an online designer tool, which allows you to easily and intuitively combine colours.

Humans love color. In kindergarten, everyone wants to have the biggest box of crayons or the largest selection of colored pencils. The fascination doesn’t wane with time, either. Colors convey messages, evoke emotions, and add brilliance to everyday things.

Automatically switch to a darker or a lighter version of an element depending on the brightness of images behind it.

Working with color while designing is really about creating another dimension in your medium. Choosing a successful palette creates a foundation for adding meaning and hierarchy to your design. Although it may seem overwhelming at first, choosing a palette can be a very straightforward process

A Sass replacement for the standard CSS keyword color system. Provides more visually appealing hues for many CSS keywords; adds new colors with more relevant and easily remembered names. Inspired by Ingrid Sundberg’s color thesaurus and the work of Adam Morse.

21 октября в 14:38 Usability*, Интерфейсы

Take any new interface design or display technology, and chances are that someone somewhere has already compared it to Minority Report. The 2002 dystopian film, with its see-through screens and…