Skip to main content
CSS-Tricks
  • Articles
  • Notes
  • Links
  • Guides
  • Almanac
  • Shuffle
Search

Articles Tagged
color

36 Articles
{
,

}
Direct link to the article A Whistle-Stop Tour of 4 New CSS Color Features
color color() display-p3 hsl hwb lab lch rgba

A Whistle-Stop Tour of 4 New CSS Color Features

I was just writing in my “What’s new in since CSS3?” article about recent and possible future changes to CSS colors. It’s weirdly a lot. There are just as many or more new and upcoming ways to define colors than …

Avatar of Chris Coyier
Chris Coyier on Feb 10, 2022 (Updated on Feb 11, 2022)
Direct link to the article Using Different Color Spaces for Non-Boring Gradients
color easing gradients

Using Different Color Spaces for Non-Boring Gradients

A little gradient generator tool from Tom Quinonero. You’d think fading one color to another would be an obvious, simple, solved problem — it’s actually anything but!

Tom’s generator does two things that help make a gradient better:

  1. You
…
Avatar of Chris Coyier
Chris Coyier on Feb 7, 2022
Direct link to the article useRainbow()
color hsl

useRainbow()

I took a break from work and started some small, personal projects (toys). One of those small projects is potato.horse where I keep all of my doodles, visual short stories and jokes. Check it out!

However, this post is not …

Avatar of Rafał Pastuszak
Rafał Pastuszak on Jan 7, 2022
Direct link to the article Color Alpha Anywhere
alpha color hsl

Color Alpha Anywhere

In my “Different Degrees of Custom Property Usage” article, I noted a situation about colors and CSS custom properties where I went “too far” with breaking up HSL color values. Breaking every single color into its H, S, and L parts …

Avatar of Chris Coyier
Chris Coyier on Nov 15, 2021 (Updated on Nov 21, 2021)
Direct link to the article Wanna see a whiter white?
color

Wanna see a whiter white?

Heck of a CSS trick here from Dongsung Kim.

There are hidden HDR videos playing at the corners of this page. When a HDR-capable browser encounters one, it switches to HDR mode. For some reason, CSS backdrop-filter + brightness >100%

…
Avatar of Chris Coyier
Chris Coyier on Aug 11, 2021
Direct link to the article Mixing Colors in Pure CSS
color keyframes

Mixing Colors in Pure CSS

Red + Blue = Purple… right?

Is there some way to express that in CSS? Well, not easily. There is a proposal draft for a color-mix function and some degree of interest from Chrome, but it doesn’t seem right around …

Avatar of Carter Li
Carter Li on Nov 16, 2020 (Updated on Jun 22, 2021)
Direct link to the article Using JavaScript to Adjust Saturation and Brightness of RGB Colors
color hsl rgba

Using JavaScript to Adjust Saturation and Brightness of RGB Colors

Lately I’ve been taking a look into designing with color (or “colour” as we spell it where I’m from in New Zealand). Looking at Adam Wathan and Steve Schroger’s advice on the subject, we find that we’re going to …

Avatar of Hugh Haworth
Hugh Haworth on Oct 6, 2020 (Updated on Feb 11, 2021)
Direct link to the article The Expanding Gamut of Color on the Web
color color() color-gamut display-p3 lab lch web colors

The Expanding Gamut of Color on the Web

CSS was introduced to the web all the way back in 1996. At the time, most computer monitors were pretty terrible. The colors of CSS — whether defined with the RGB, HSL, or hexadecimal format — catered to the monitors …

Avatar of Ollie Williams
Ollie Williams on May 27, 2020 (Updated on Aug 23, 2022)
Direct link to the article No-Comma Color Functions in CSS
color

No-Comma Color Functions in CSS

There have been a couple of viral tweets about this lately, one from Adam Argyle and one from Mathias Bynes. This is a nice change that makes CSS a bit more clear. Before, every single color function actually needs …

Avatar of Chris Coyier
Chris Coyier on May 4, 2020
  • 1
  • 2
  • 3
  • ...
  • 4
  • Older

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Write for us!
  • Advertise with us
  • Contact us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • X
Back to Top