JONCODED
CSS colors

CSS colors

working with font hues and other color attributes

jon's photo
jon
·

3 min read

Table of contents

Colors have at least four different notations in CSS but we normally use just one or two:

  • Names

  • Hexadecimal

  • RGB

  • HSL

Named colors

We could simply use English names of colors

.redFont {
    color: red;
}

However, we:

  • limit ourselves in terms of shades

  • can become prone to spelling mistakes

Hexadecimal colors

With hexadecimal (base-16) numbers, each "digit":

  • can be anything from 0 to 15, with A representing 10, B for 11, all the way up to F for 15

  • when combined with another "digit", a two-digit hex code pair can have up to 256 possible combinations

  • three pairs of hexadecimal digits can therefore represent 16,777,216 possible combinations of colors

.hexFont {
    color: #6496C8;
}

In the above, we look at each pair of digits after the # as such:

  • First pair (#64): amount of red [(16 x 6) + 4 = 100]

  • Second pair (#96): amount of green [(16 x 9) + 6 = 150]

  • Third pair (#C8): amount of blue [(16 x 12) + 8 = 200]

RGB colors

This follows the same principle as hexadecimal but using a different notation!

Each argument has a range from 0 (black) to 255 (white), creating around 16.7 million shades of color:

.rgbFont {
    color: rgb(100, 150, 200);
}

  • First number represents the amount of red

  • Second, the amount of green

  • Third, the amount of blue

However, instead of using a combination of digits and letters in each argument, we can use simpler integers from 0 to 255!

HSL colors

Unlike hexadecimal and RGB notation, this HSL (hue-saturation-luminolosity) notation has to do with two additional properties of color:

  • First number represents the degree value of the hue on the color wheel

    • 0/360 = red

    • 60 = yellow

    • 120 = green

    • 180 = cyan

    • 240 = blue

    • 300 = violet

  • Second number represents the saturation (ranging from 0% to 100%)

    • 0% = less color (grayer look)

    • 100% = richer color (more vivid look)

  • Third number represents the luminosity (ranging from 0% to 100%)

    • closer to 0% = increasingly darker to fully black

    • 50% = normal lighting

    • closer to 100% = increasingly brighter to fully white

Adding "alpha" or opacity

The alpha, or opacity (think "fade"), represents the fourth argument in each of RGB and HSL:

.RGBAClass {
    color: rgba(100, 150, 200, 0.2) 
    /* 20% opacity, looks very "faded" */
}

.HSLAclass {
    color: hsla(240, 50%, 50%, 1.0) 
    /* 100% opacity, looks "there" */
}

Recall that an opacity ranges from 0 to 1:

  • 0 means no visibility

  • 1 means full visibility

CSScolor