Tools to Learn CSS colors by Building a set of colored markers

Selecting the correct colors for your webpage can greatly improve the aesthetic appeal to your readers.

In this Blog, you'll build a set of colored markers. You'll learn different ways to set color values and how to pair colors with each other.

Basic HTML needs:

HTML elements:

HTML attributes:

CSS Properties:

CSS Basics:

1. Multiple Classes: It can be added to an element by listing them in the class attribute and separating them with a space.

   Example: <div class="marker one"></div>

2. additive RGB (red, green, blue)

3. subtractive CMYK (cyan, magenta, yellow, black)

4. tertiary colors, are created by combining a primary with a nearby secondary color.

5. CSS RGB Function (value): The CSS rgb function accepts values, or arguments, for red, green, and blue, and produces a color as:

rgb(red, green, blue);

example: red can be set as:

background-color: rgb(255, 0, 0);

1. Hex color: The values start with a # character and take six characters from 0-9 and A-F. The first pair of characters represent red, the second pair represent green, and the third pair represent blue. For example, #4B5320.

represented as: (#------) (take six characters from 0-9 and A-F)

1. HSL color model: hue, saturation, and lightness, is another way to represent colors.

Syntax: hsl(hue, sat%, lig%);

1. Gradient: A gradient is when one color transitions into another.
   \> Linear-gradient Function: lets you control the direction of the transition along a line, and which colors are used.

   Defaults:

   a. You won't see gradient yet because the linear-gradient function needs at least two color arguments to work.

   b. gradientDirection argument is provided to the linear-gradient function, it arranges colors from top to bottom, or along a 180 degree line, by default.

   c. Color stops, default, o% - first color argument,50% - second color argument, 100% - third color argument.

   Explanation, internal working: actually creates an image element, and is usually paired with the background property which can accept an image as a value.

Syntax: linear-gradient(gradientDirection, color1, color2, ...);

' gradientDirection is the direction of the line used for the transition.

' color1 and color2 are color arguments, which are the colors that will be used in the transition itself. These can be any type of color, including color keywords, hex, rgb, or hsl.

Example 1:

    .red {
      background: linear-gradient(90deg);
    }

Example 2:

    .red {
      background: linear-gradient(90deg, rgb(255,0,0));
    }

Example 3: Using Hexa colors

    .green {
      background: linear-gradient(180deg, #55680D, #71F53E,#116C31);
    }

Example 4: hsl Function

    .blue {
      background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%),hsl(240,56%,42%));
    }

1. Opacity: describes how opaque, or non-transparent, something is. For example, a solid wall is opaque, and no light can pass through. But a drinking glass is much more transparent, and you can see through the glass to the other side.

2. alpha channel: Similar to the opacity property, the alpha channel controls how transparent or opaque a color is. We can also use an alpha channel with hsl and hex colors.

3. rgba function: The rgba function works just like the rgb function, but takes one more number from 0 to 1.0 for the alpha channel.

   Syntax: rgba(redValue, greenValue, blueValue, alphaValue);

4. hsla function: The hsla function works just like the hsl function, but takes one more number from 0 to 1.0 for the alpha channel.

   Syntax: hsla(hueValue, saturationValue, lightnessValue, alphaValue);