HTML & CSS From Scratch, Volume 4: CSS Color Units and Color Properties!

Color in CSS

Color Units

  • Named colors: recognized color names that map to a specific RGB value
  • RGB(A): a representation of the color’s Red, Green, and Blue (RGB) components. Also, there is a more recent standard (but well-supported) that also includes an Alpha (RGBA) value at the end.
  • Hexadecimal: a shortcut for writing RGB values. Widely supported and used across the web, since its early days.
  • HSL: an alternate means for displaying color as Hue, Saturation, and Lightness. This is a more recent standard that was added with the CSS3 specification, but it is widely supported (IE9+).
  • HWB: a similar standard to HSL that represents colors as Hue, Whiteness and Blackness. A suggested standard for CSS4. Not yet supported.
  • CMYK: a standard based on printing processes that stands for Cyan, Magenta, Yellow, and Key Black — ink colors used for printing (think of the blue, red, and yellow primary colors you learned in elementary school, and substitute magenta for red). This is another suggested standard for CSS4. It is not yet supported, but once it is, it could be particularly useful for defining print styles. Ask any graphic designer who has designed branding across print and web, and s/he will tell you that converting RGB to CMYK is not always simple. If you print a file in RGB color, the output may be quite different from what you intended — often a bit more faded and less bold than it felt on the screen. As such, adding CMYK color model will be a welcome addition for visual designers hoping to create a professional, cohesive brand across all media.

RGB Color Values

body {
background-color: rgb(255, 0, 0);
}
body {
background-color: rgb(255, 180, 180);
}
body {
background-color: rgb(100, 0, 0);
}
body {
background-color: rgb(80, 20, 20);
}

Hexadecimal, a.k.a. “Hex codes” (an RGB shorthand)

  • 0 = 0
  • 10 = 16+0 = 16
  • 19 = 16+9 = 25
  • 1f = 16+15 = 31
  • 50 = 16*5+0 = 80
  • 7f = 16*7+15 = 127
  • 99 = 16*9+9 = 153
  • aa = 16*10+10 = 170
  • bb = 16*11+11 = 187
  • cc = 16*12+12 = 204
  • dd = 16*13+13 = 221
  • ee = 16*14+14 = 238
  • ff = 16*15+15 = 255

HSL Color

  • Hue: If you mapped out the range of perceptible colors along a line, where would each RGB color lie along that line? Now suppose you took that line and wrapped it around into a circle: then you could position red at one point, green at another and blue at yet another point, and then assign an angle any mix of red, green and blue. The HSL model does just that: it maps colors to a color wheel, and each hue has a particular angle associated with it. Red is at 0°, Green is at 120°, and Blue is at 240°. As you rotate a third of the way around circle, you move through all of the colors between red and green until you get pure green at 120°. Keep going, and you move through all of the colors between green and blue, until you hit pure blue at 240°. Keep going still, and you move through the colors between blue and red, until you get all of the way around the circle, to 360° — which is the same point as 0°.
  • Saturation: Hue just tells you the core color, but it doesn’t tell you how deep the color is. Saturation does that. If you completely desaturated colors on a webpage, it would be in grayscale. Saturation is represented in the HSL model as a percent from 0% (no color) to 100% (full color).
  • Lightness: How light or dark a color is. Remember above where we added some green and blue to make the red lighter? In the HSL model, we explicitly control lightness through the lightness variable, rather than by adjusting the component colors individually. Like saturation, lightness is represented as a percent value from 0% (black) to 100% (brightest color). Also, an aside: designers and design programs often call this “Brightness,” so you may also see this color model abbreviated as HSB. If you do, know that the only difference is in the naming; HSB and HSL are otherwise identical.
Fuchsia at full saturation and full brightness
The same hue as Fuchsia, above, at 50% saturation.
Fuchsia at full saturation and 50% brightness
At zero brightness, the hue and saturation are irrelevant. The color is black.
Any color maps to grayscale at zero saturation.
A color selector in the Chrome browser. The color model can be cycled via the up/down arrows on the right.

CMYK and HWB Color Models (and more)

Named Colors

Transparency in RGB, HSL, and Hex Color

body {
background-color: rgba(255, 0, 0, 0.5); /* red at 50% opacity */
}
p {
color: hsla(0, 100%, 0%, 0.87); /* This is red in the hue scale, but it's actually black, since it has 0% lightness: black at 87% opacity. */
}

Color (and Background) Properties

  • color: the color of text on the page. In the old days of HTML, this was simply named “color” because of the implication that text is always in the foreground. The initial value for a browser is black.
  • background-image: the url for an image to display in the background of a container. This can be used in conjunction with background-color, e.g. if your image has transparency. Format is background-image: url(relative-or-absolute-path-to-image-here);. The URL you specify can be on any domain. It doesn’t need to be hosted by your site (though it can be). The initial value is none.
  • background-position: Position can be determined using keywords or a distance measurement, with the x (horizontal) position followed by the y (vertical) position. If using distance, both relative or absolute units are allowed. Keywords are top, bottom, left, right, and center. This might be expressed as background-position: center; or background-position: left bottom; or background-position: 10px 20%;. Note that if I just use a single keyword center, the browser will assume center for both horizontal and vertical positioning. There’s one tricky (and kind of awesome) detail about percentages for position: they are calculated width/height of the container minus the width/height of the image, such that a position of 100% 100% places the image in the bottom right corner of the container.
  • background-size: size to use for the background image. See below for a bit more detail on this.
  • background-repeat: how a background image should (or shouldn’t) repeat in the container. The default value is repeat, which means it will repeat in both x and y directions (horizontally and vertically) if the image is smaller than the container. Alternative options are: no-repeat, repeat-x, and repeat-y. CSS3 added round and space as options, too, and they’re well supported (IE10 and up. Theoretically IE9, but it has issues). Both of these will avoid clipping the background if it doesn’t repeat a perfect number of times. round will adjust the image positioning to crop opposite edges evenly, while space will space out the repeated image to make it fit evenly.
  • background-attachment: whether or not the background scrolls with the content. The initial value is scroll. Also an option: fixed.
  • background-origin: what box-sizing model to use for resizing the background. Default is padding-box, but other options include content-box and border-box.
  • background-clip: Similar to background-origin, this defines what box-sizing model to use for clipping the background: where does it get cut off? Default is padding-box, but other options include content-box and border-box.
  • background-color: the background color of a container. The initial value is transparent.
  • background: a shorthand for all of the background properties, preferably in the order listed above—but browsers are forgiving and the spec has changed over time. For example, the spec used to call for the color and then the . See below for an example:

A quick examination of background-size

  • length: width and height dimensions in relative or absolute units. If only width or height is defined, the other will default to auto.
  • cover: Scale the image to cover the entirety of the element. This means your image may be cropped vertically or horizontally, depending on how its aspect ratio compares to the container’s.
  • contain: Similar to cover, but scales the image to always fit inside the element. This may result in some extra horizontal or vertical space around the image, depending on how its aspect ratio compares to the container’s.

Example of Background Properties & Shorthand:

background-image: url(http://newtownsquarevet.com/wp-content/uploads/2017/01/kitten-pounce.png);
background-position: -10px -10px;
background-size: 200px 150px;
background-repeat: repeat-y;
background-attachment: fixed;
background-origin: border-box
background-clip: border-box
background-color: #ff0080;
background: url(http://newtownsquarevet.com/wp-content/uploads/2017/01/kitten-pounce.png) -10px -10px / 200px 150px repeat-y fixed border-box border-box #ff0080;
background: url(http://newtownsquarevet.com/wp-content/uploads/2017/01/kitten-pounce.png)
-10px -10px / 200px 150px
repeat-y
fixed
border-box
border-box
#ff0080;

Backgrounds in action

An Aside on How HTML and CSS Have Developed

Multiple Backgrounds!

Homework

--

--

--

UX/UI Designer + Design Team Lead @Kensho. Defender of usability, clear communication, & semantic HTML. More Sondheim than Lloyd-Webber. www.kennethroraback.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Hands On Golang Error Handling

CS373 Spring 2022: Sage Sanford

Getting the job: How I got multiple offers for my first developer job (part 1)

UIPickerView and UISlider: iOS Development Basics

The very-very basics of web development: websites and a browser

Docker Image and Container

The Beginner’s Guide to OAuth Dancing

Scaling Containers in the Enterprise — Viewing Distributed Systems through the Guise of…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kenneth Roraback (he/him)

Kenneth Roraback (he/him)

UX/UI Designer + Design Team Lead @Kensho. Defender of usability, clear communication, & semantic HTML. More Sondheim than Lloyd-Webber. www.kennethroraback.com

More from Medium

Descendant Selectors in CSS

CSS, the silent beautifier.

Writing CSS More Efficiently; a Less CSS Tutorial

An image comparing the syntax of CSS with the Less CSS preprocessor.

Guide to convert and pre-process CSS to SCSS (SASS) code.