The five best design links, every weekday

Category: Color Theory

All Categories

uxdesign.cc

How to create a color ramp used in design systems

A color ramp, also known as a color scale, is a visual representation of how colors transition from light to dark in a smooth and continuous manner.

medium.com

Accessible but never boring

Rebranding the Wise design system for everyone.

uxdesign.cc

Color for brand designers working with product teams

Why your brand colors aren’t working in digital spaces.

smashingmagazine.com

Falling For Oklch: A Love Story Of Color Spaces, Gamuts, And CSS

The CSS Color Module Level 4 specification defined a slew of new color features when it became a candidate recommendation in 2022.

oddcontrast.com

OddContrast

A contrast checking tool by OddBird.

web.dev

New CSS color spaces and functions in all major engines

Start using HD color to bring vibrancy to your designs.

youtube.com

Thinking on ways to solve color palettes

In today’s GUI Challenge, Adam Argyle builds a wide gamut color palette with okLCH.

contrast-triangle.com

The Contrast Triangle

A three-way color contrast checker for when you remove underlines from links.

observablehq.com

Perceptually uniform color models and their implications

This notebook was created as a learning exercise to teach myself about color theory.

gradient.style

CSS HD Gradients

Wide gamut Color 4 compliant CSS gradient builder.

smashingmagazine.com

Color Mechanics In UI Kits

In this article, Adel Khamatov shares a model of color mechanics that he came up with during research on developing UI kits.

colorcontrast.app

Color Contrast Checker

Check the contrast between colors using WCAG or APCA, get suggestions for better colors and test with color blindness simulations.

evilmartians.com

OK, OKLCH: a color picker made to help think perceptively

Making a tool and speeding up familiarity and adoption of OKLCH and perceptual color spaces.

developer.chrome.com

CSS color-mix()

Mix colors, in any of the supported color spaces, right from your CSS.

meodai.github.io

Poline: esoteric color palette generator

Poline draws lines between anchors over polar coordinates to generate pleasing color palettes.

oklch.com

OKLCH Color Picker & Converter

OKLCH is a new way to encode colors (like hex, RGBA, or HSL)

elastiq.notion.site

Color — My Journey Through the Spectrum

Thoughts and resources from years of work exploring color and building tools to work with color.

joshwcomeau.com

Color Formats in CSS

CSS gives us so many options when it comes to expressing color—we can use hex codes, rgb, hsl, and more. Which option should we choose?

evilmartians.com

OKLCH in CSS: why we moved from RGB and HSL

CSS Color Module 4 adds oklch() to define CSS colors human-readable, predictable contrast (better a11y), wide-gamut P3 colors.

randoma11y.com

Randoma11y

Get random, accessible color combinations