Skip to main content
CSS-Tricks
  • Articles
  • Alamanac
  • Guides
  • Videos
  • Books
  • Newsletter
Search

Articles Tagged
color

36 Articles
{
,

}
Direct link to the article CSS Custom Properties and Theming
accessibility color custom properties themes

CSS Custom Properties and Theming

We posted not long ago about the difference between native CSS variables (custom properties) and preprocessor variables. There are a few esoteric things preprocessor variables can do that native variables cannot, but for the most part, native variables can do …

Avatar of Chris Coyier
Chris Coyier on May 1, 2017 (Updated on Apr 29, 2020)
Direct link to the article Some Math Links
color math

Some Math Links

I read a few stories about math lately. …

Avatar of Chris Coyier
Chris Coyier on Feb 3, 2017
Direct link to the article Color in UI Design
color

Color in UI Design

Erik D. Kennedy:

So if color theory doesn’t provide a solid basis for color in UI design, what does? Let me throw an opinion at ya’: color modifications. It’s the tweaking of color that counts, not the picking of

…
Avatar of Chris Coyier
Chris Coyier on Jan 19, 2017
Direct link to the article A Thing To Know about Gradients and “Transparent Black”
color gradients Sass

A Thing To Know about Gradients and “Transparent Black”

Say you have a gradient in CSS that goes from red to transparent. Easy, right? Like this:

.element {
  background: linear-gradient(
    to bottom,
    red, 
    transparent
  );
}

There is a pretty big gotcha here, though.…

Avatar of Chris Coyier
Chris Coyier on Jan 10, 2017
Direct link to the article ColorMe / CSS Color Level 4
color

ColorMe / CSS Color Level 4

Does this look weird?

.element {
  background: color(#eb8fa9 alpha(75%) blackness(20%));
}

That’s the “color function” from a draft spec from the CSS working group. I think it’s all about making colors a little easier and more intuitive to work with. …

Avatar of Chris Coyier
Chris Coyier on Jan 8, 2017
Direct link to the article High Contrast, A PostCSS Plugin Story*
accessibility color postcss

High Contrast, A PostCSS Plugin Story*

*Based on true events

It’s hard to imagine life without internet today. Many people’s lives are less or more tied with internet. Think about everything we rely on it for: communication, education, shopping, business control, home management, entertainment, etc. It’s …

Avatar of Eduard Pochtar
Eduard Pochtar on Nov 24, 2016 (Updated on Mar 20, 2017)
Direct link to the article Color Fonts
color color font font opentype-svg SVG

Color Fonts

Adobe explaining:

OpenType-SVG is a font format in which an OpenType font has all or just some of its glyphs represented as SVG (scalable vector graphics) artwork. This allows the display of multiple colors and gradients in a single

…
Avatar of Chris Coyier
Chris Coyier on Nov 19, 2016 (Updated on Nov 29, 2016)
Direct link to the article The Power of the rgba() Color Function in CSS
color design rgba

The Power of the rgba() Color Function in CSS

One of the things that I’m really interested in about CSS is the new color-mod function. It will give us the ability to do color manipulations right in the browser. For example, when hovering over a button, you can …

Avatar of Ahmad Shadeed
Ahmad Shadeed on Nov 10, 2016
Direct link to the article A Nerd’s Guide to Color on the Web
accessibility color generative color hex values hsl web colors

A Nerd’s Guide to Color on the Web

There are a lot of ways to work with color on the web. I think it’s helpful to understand the mechanics behind what you’re using, and color is no exception. Let’s delve into some of the technical details of color …

Avatar of Sarah Drasner
Sarah Drasner on Sep 12, 2016 (Updated on Sep 20, 2022)
Direct link to the article 8-Digit Hex Codes?
color hex

8-Digit Hex Codes?

Weird right? 4-digit hex codes too. They are a way put alpha transparency information into the hex format for colors. You might be seeing it more all the sudden if you use Chrome, because it dropped in 52, and …

Avatar of Chris Coyier
Chris Coyier on Sep 8, 2016 (Updated on Sep 13, 2016)
Direct link to the article Building Concentric Circles with Nice Color Palettes For Fun and Science
circle color SVG

Building Concentric Circles with Nice Color Palettes For Fun and Science

I was looking through my applications folder the other day, hoping to clean house a bit. I came across an app I used to love but haven’t used in forever: Simple Desktops. It’s an app for changing your wallpaper once …

Avatar of Chris Coyier
Chris Coyier on Feb 19, 2016 (Updated on Jan 2, 2020)
  • Newer
  • 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 hosting
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Write for us!
  • Advertise with us
  • Contact us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • X
Back to Top