color

by

Using color in CSS involves specifying the colors for various HTML elements such as text, backgrounds, borders, and more.

Color Names

  • Basic Colors: These are common color names recognized by most browsers, such as red, green, blue, yellow, orange, purple, pink, black, and white.
  • Named Colors: CSS also supports a wider range of named colors, including aliceblue, antiquewhite, aqua, aquamarine, azure, and many more.
p {
  color: blue;
}

Hex Codes

  • Structure: Hex codes consist of six characters representing the red, green, and blue components of a color. Each component is specified using two hexadecimal digits (0-F).
  • Example: #FF0000 represents red, #00FF00 represents green, and #0000FF represents blue.
  • Customization: You can create any color by combining different hex code values.

Examples

  • Red: #FF0000 (FF = red, 00 = green, 00 = blue)
  • Green: #00FF00 (00 = red, FF = green, 00 = blue)
  • Blue: #0000FF (00 = red, 00 = green, FF = blue)
  • White: #FFFFFF (FF = red, FF = green, FF = blue)
  • Black: #000000 (00 = red, 00 = green, 00 = blue)
#lightblue {
  color: #ADD8E6;
}

You can use a three-digit shorthand notation for hex colors.

This notation allows you to specify each RGB component with a single hexadecimal digit instead of two. The browser automatically duplicates each digit to create the full six-digit code.

For example:

  • #F00 is equivalent to #FF0000 (red)
  • #0F0 is equivalent to #00FF00 (green)
  • #00F is equivalent to #0000FF (blue)

This shorthand notation is a convenient way to write hex color codes, especially for simple colors that don’t require precise color control. However, it’s important to note that it may not support the full range of colors that can be represented with six-digit hex codes.

Transparency with hex colors

Using an alpha value to add transparency to a color changes the hexadecimal code format from #RRGGBB to #RRGGBBAA (where alpha is A). The first six values (red, green and blue) remain unchanged.

The AA value in #RRGGBBAA can vary from the lowest possible value (00) to the highest possible value (FF). By decreasing the value, the visibility becomes lower and lower until it becomes transparent. By increasing the value, visibility becomes increasingly opaque.

p {
  color: #0080FF80;
}

RGB Values

  • Structure: RGB values specify the red, green, and blue components of a color using numbers ranging from 0 to 255.
  • Example: rgb(255, 0, 0) represents red, rgb(0, 255, 0) represents green, and rgb(0, 0, 255) represents blue.
  • Customization: Similar to hex codes, you can create any color by combining different RGB values.

HSL Values

  • Structure: HSL values represent a color using hue (the dominant color), saturation (the intensity of the color), and lightness (the brightness of the color).
  • Example: hsl(0, 100%, 50%) represents red, hsl(120, 100%, 50%) represents green, and hsl(240, 100%, 50%) represents blue.
  • Customization: HSL values are often preferred for color manipulation and can be more intuitive for certain tasks.

RGBA Values

  • Structure: RGBA values are similar to RGB values but include an alpha channel, which controls the opacity of the color.
  • Example: rgba(255, 0, 0, 0.5) represents a semi-transparent red color.
  • Customization: RGBA values are useful for creating translucent or overlay effects.

Applying Color to Elements

  • Background Color: Use the background-color property to set the background color of an element.
  • Text Color: Use the color property to set the color of text within an element.
  • Border Color: Use the border-color property to set the color of an element’s border.
  • Other Properties: Color can also be applied to various other properties, such as outline-color, box-shadow, and text-shadow.

Color Manipulation

  • Lightening and Darkening: Use functions like lighten() and darken() to adjust the lightness of a color.
  • Saturation and Desaturation: Use functions like saturate() and desaturate() to adjust the saturation of a color.
  • Hue Rotation: Use the rotate() function to shift the hue of a color.
  • Color Mixing: Use functions like mix() to blend two colors together.