CSS - Colors

Color Names

In CSS, you can use predefined color names to specify colors. These names are easy to remember and provide a quick way to apply colors to your web elements. Some commonly used color names include:

• red: A bright red.
• blue: A classic blue.
• green: A natural green.
• yellow: A sunny yellow.
• purple: A royal purple.
• black: A solid black.
• white: A pure white.

Hexadecimal Colors

Hexadecimal color values are a popular way to represent colors in CSS. They consist of a hash symbol (#) followed by six characters, where each pair of characters represents the intensity of red, green, and blue (RGB) components.

The format of a hexadecimal color value is #RRGGBB, where:

• RR represents the red component (00 to FF).
• GG represents the green component (00 to FF).
• BB represents the blue component (00 to FF).

#FF0000 /* red */
#00FF00 /* green */
#0000FF /* blue */
#000000 /* black */
#FFFFFF /* white */

RGB Colors

The RGB color model is another way to specify colors in CSS. It uses a combination of red, green, and blue values.

The format of an RGB color value is:

rgb(red, green, blue)

where each component is an integer between 0 and 255.

rgb(255, 0, 0)   /* red */
rgb(0, 255, 0)   /* green */
rgb(0, 0 ,255)   /* blue */
rgb(0 , 0 , 0 )    /* black*/
rgb(255 ,255 ,255 )/* white*/

RGBA Colors

RGBA is an extension of the RGB model that includes an alpha channel for specifying opacity. The alpha value ranges from 0 (fully transparent) to 1 (fully opaque).

The format of an RGBA color value is:

rgba(red, green, blue, alpha)

where the first three components are integers between 0 and 255, and the alpha value ranges from 0 to 1.

 rgba(255, 0, 0, .5) /* red with 50% opacity */  
 rgba(0, 255, 0, .8) /* green with 80% opacity */  
 rgba(0, 0, 255, .3) /* blue with 30% opacity */

HSL Colors

The HSL model represents colors using hue, saturation, and lightness values. It provides a more intuitive way to describe colors compared to RGB.

The format of an HSL color value is:

hsl(hue, saturation, lightness)

where:

• hue is an angle between 0 and 360 degrees representing the color wheel.
• saturation is a percentage value between 0% and 100%, where 0% represents grayscale and 100% represents full color saturation.
• lightness is a percentage value between 0% and 100%, where 0% represents black, 50% represents the normal color, and 100% represents white.

hsl(0, 100%, 50%) /* red */
hsl(120, 100%, 50%) /* green */
hsl(240, 100%, 50%) /* blue */
hsl(0, 0%, 0%) /* black */
hsl(0, 0%, 100%) /* white */

HSLA Colors

HSLA is an extension of the HSL color model that includes an alpha channel for specifying opacity, similar to RGBA.

The format of an HSLA color value is:

hsla(hue, saturation, lightness, alpha)

where the first three components follow the same format as HSL, and the alpha value is a decimal between 0 and 1.

 hsla(0, 100%, 50%, .5) /* red with 50% opacity */   
 hsla(120, 100%, 50%, .8) /* green with 80% opacity */   
 hsla(240, 100%, 50%, .3) /* blue with 30% opacity */

Text Color

The color property in CSS sets the color of the text within an element. It accepts any valid color value, such as color names, hexadecimal colors, RGB, RGBA, HSL, or HSLA.

h1 {
  color: blue;
}

p {
  color: #FF0000;
}

span {
  color: rgb(0, 255, 0);
}

• The <h1> element will have blue text.
• The <p> element will have red text using a hexadecimal value.
• The <span> element will have green text using an RGB value.

Background Color

The background-color property sets the background color of an element. It accepts the same values as the color property.

div {
  background-color: yellow;
}

section {
  background-color: #00FF00;
}

article {
  background-color: rgba(255, 0, 0, 0.5);
}

• The <div> element will have a yellow background.
• The <section> element will have a green background using a hexadecimal value.
• The <article> element will have a red background with 50% opacity using an RGBA value.

Border Color

The border-color property sets the border's color of an element. It accepts the same values as the color and background-color properties.

.box {
  border: 2px solid;
  border-color: pink; 
} 

.container { 
  border: 1px dashed; 
  border-color: #0000FF; 
} 

.card { 
  border: 3px dotted;  
  border-color: hsl(240, 100%, 50%);
}

• The .box class has a solid pink border.
• The .container class has dashed blue border with hex values.
• The .card class has dotted blue borders with HSL values.

Opacity

The opacity controls transparency between zero and one, where zero means full transparency while one means full visibility.

img {
  opacity: 0.5;
} 

.overlay {
  opacity: 0.8;
} 

.faded-text {
  opacity: 0.3;
}

• img elements are semi-transparent at fifty percent.
• .overlay classes appear eighty percent visible.
• .faded-text classes look thirty percent faded.

Complementary Color Scheme

Complementary colors are opposite each other on the color wheel. They create high contrast and can make elements stand out. Examples include:

• Red and green
• Blue and orange
• Purple and yellow

Analogous Color Scheme

Analogous colors are next to each other on the color wheel. They create a balanced look. Examples include:

• Red, orange, and yellow
• Green, blue-green, and blue
• Purple, blue-purple, and blue

Triadic Color Scheme

Triadic colors are evenly spaced on the color wheel, forming a triangle. They offer a vibrant combination. Examples include:

• Red, yellow, and blue
• Green, orange, and purple
• Teal, magenta, and yellow-orange

When creating color combinations consider these tips:

• Use a color wheel to help you select matching colors.
• Choose a main color with others as accents for balance.
• Think about the mood you want to convey with your choices.
• Test your combinations on different devices for readability.

Use online tools to generate palettes or explore different schemes.

Remember that preferences vary based on personal taste or project context. Experiment with different schemes to create visually appealing designs.