Skip to main content
UI Coach Logo

Topic

Color

Color systems, contrast, semantic color, and palette decisions for interfaces.

Color in UI is a system, not a mood board. Semantic roles, contrast, and dark-mode behavior matter more than picking a fashionable accent.

UI Coach guides

Start here

GuideUI CoachColor

Color in Interface Design

How to use color as a system in product UI: semantic roles, restraint, and meaning that does not depend on hue alone.

Read the guide

From the community

Latest articles

Lea Verou · Mar 30, 2021

Dark mode in 5 minutes, with inverted lightness variables

By now, you probably know that you can use custom properties for individual color components, to avoid repeating the same color coordinates multiple times throughout your theme. You may even know that you can use the same variable for multiple components, e.g. HSL hue and lightness: :root { --primary-hs: 250 30%; } h1.

Read

Material Design · Feb 17, 2022

The Science of Color & Design

How Material used color science to make design easier and more expressive than ever before

Read

Lea Verou · Feb 8, 2014

Introducing Whathecolor: A color game for web developers!

I’ve been interested in digital color for a long time, and this year I decided to risk giving a technical talk about color some of the conferences I’m speaking at. “Why is that risky?” you might ask. Well, it might end up being really interesting, or it may end up alienating both designers because it’s too technical a.

Read

Manuel Matuzovic · Feb 2, 2023

Day 94: the accent-color property

The accent-color CSS property allows us to specify the accent color for user-interface controls generated by an element. Yeah, I know, yet another property that isn’t new at all, but Safari added support only recently (in 15.4) and I’ve never used it. Reason enough for me to include it in the series. We can use the pr.

Read

Lea Verou · Apr 4, 2020

LCH colors in CSS: what, why, and how?

I was always interested in color science. In 2014, I gave a talk about CSS Color 4 at various conferences around the world called “The Chroma Zone” . Even before that, in 2009, I wrote a color picker that used a hidden Java applet to support ICC color profiles to do CMYK properly, a first on the Web at the time (to my.

Read

Dovetail · May 11, 2021

Getting the brand back together

Come on down and see the refreshed Dovetail brand! You'll notice a fresh logo, color palette, typography, and illustration style.

Read

Lea Verou · Jul 27, 2014

An easy notation for grayscale colors

These days, there is a lengthy discussion in the CSS WG about how to name a function that produces shades of gray (from white to black) with varying degrees of transparency, and we need your feedback about which name is easier to use. The current proposals are: 1. gray(lightness [, alpha]) In this proposal gray(0%) is.

Read

Lea Verou · Mar 18, 2023

Contrast Ratio has a new home — and this is great news!

It has been over a decade when I launched contrast-ratio.com , an app to calculate the WCAG 2.1 contrast ratio between any two CSS colors. At the time, all similar tools suffered from several flaws when being used for CSS editing: - No support for semi-transparent colors (Since WCAG included no guidance for alpha tran.

Read

Lea Verou · May 17, 2024

On compliance vs readability: Generating text colors with CSS

Can we emulate the upcoming CSS contrast-color() function via CSS features that have already widely shipped? And if so, what are the tradeoffs involved and how to best balance them? Relative Colors Out of all the CSS features I have designed , Relative Colors aka Relative Color Syntax (RCS) is definitely among the one.

Read

Related roles

Current design jobs

161 active roles currently match UI designer in the UI Coach job catalog.