8. Color

The RGB model is a mixture of colors that predicts how they will be perceived by humans with respect to the colors and lights experienced in the real world. It is oriented toward digital screens with compatible technology (CRT, LCD, plasma, OLED, quantum dots, etc.). In printing, the CMYK model is used, which is not equivalent since each medium has its own particularities. Its initials come from the 3 primary colors that are mixed: Red, Green, and Blue. When mixed they produce the whole range of colors we need to work on the Web. We can use 255 frequencies per channel, or 24 bits, which is a total of 16,581,375 colors to use.

body {
    /* Hexadecimal
         Base-16 number system: 0 1 2 3 4 5 6 7 8 9 A B C D E F

         They are split into pairs of 2, ranging from 00 (minimum) to FF (maximum) with a # at the start.

         Red channel: 12 (has a little)
         Green channel: 78 (near the middle)
         Blue channel: AF (near its top)
         Alpha channel (transparency) (optional): It has none
    */
    color: #1278AF;

    /*
         Transparency channel (optional): 88 (Half transparency)
         00 -> No transparency
         FF -> Fully transparent
    */
    color: #1278AF88;


    /* If the digits of their pairs repeat, they can be shortened to just 1
          #AAFF11 -> #AF1
          #11449944 -> #1494
          #000000 -> #000 (black)
          #FFFFFF -> #FFF (white)
    */
    color: #1494;

    /* RGB
         They are split into 3 ranges from 0 to 255

         Red channel: 5 (has a little)
         Green channel: 128 (near the middle)
         Blue channel: 255 (at max)
    */
    color: rgb(5, 128, 255);

    /* RGBA
         They are split into 4 ranges from 0 to 255

         Red channel: 5 (has a little)
         Green channel: 128 (near the middle)
         Blue channel: 255 (at max)
         Alpha channel (transparency): 128 (near the middle)
    */
    color: rgba(5, 128, 255, 128);

    /* CSS Colors
         Color aliases

         black, silver, gray, white, red... up to 148 colors.
         You can see all of them at: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
    */
    color: rebeccapurple;


}

The most widespread is hexadecimal due to its simplicity of expression and because it includes the alpha channel, although technically speaking there is no difference from RGBA.

In conclusion: when in doubt, always use hexadecimal.

{: .advice } Colors are an approximation of how we want them to be shown in the physical world or on the vast majority of devices; not a certainty! Every screen, operating system, web browser, and printer has a different calibration. I invite you to compare the colors of any website on your laptop and your smartphone.

color

Applies a color to the text.

.texto {
    color: #123;
}

background-color

Applies a color to the background.

.caja {
    background-color: red;
    /* Short version */
    background: red;
}

Opacity

Applies transparency to all its content, from the text to the background.

.caja {
    /* Range between 0 and 1, where 0 applies maximum transparency and 1 applies minimum. */
    opacity: 0.5;
    /* Short version */
    opacity: .5;
}

blend-mode

It helps us define custom transparency to indicate how we want to blend the colors. If you have worked with image editing software, such as Photoshop, or with vectors, they will be familiar to you.

We have 2 styles available.

• mix-blend-mode: Declares how the element's color should blend with its parent.
• background-blend-mode: Specifies its blending with the background.

Both share the same values.

.caja {
    mix-blend-mode: normal;
    mix-blend-mode: multiply;
    mix-blend-mode: screen;
    mix-blend-mode: overlay;
    mix-blend-mode: darken;
    mix-blend-mode: lighten;
    mix-blend-mode: color-dodge;
    mix-blend-mode: color-burn;
    mix-blend-mode: hard-light;
    mix-blend-mode: soft-light;
    mix-blend-mode: difference;
    mix-blend-mode: exclusion;
    mix-blend-mode: hue;
    mix-blend-mode: saturation;
    mix-blend-mode: color;
    mix-blend-mode: luminosity;
}

If you want to know how they differ, you can find an extensive explanation of each one at MDN Web Docs.

Recently a new color was added to the CSS standard called rebeccapurple (#663399). The reason was a tribute to Eric Meyer and the sad loss of his daughter Rebecca, who died from a long battle with cancer just a few hours after turning 6. It was her favorite color. It wouldn't hurt to remember that behind technology there are people.

Eastman Kodak Company (popularly known as Kodak) is a multinational company founded in 1892 in the United States dedicated to the design, production, and marketing of photographic equipment. For more than a hundred years it has been a company well known for its cameras and photographic films, and it is currently reorienting its activity toward two main markets: digital photography and digital printing, although there are a few times when it focuses on analog photography nowadays. Since 2020 it also markets pharmaceutical products.