CSS - Color References

Setting text color using RGB values

p {
  color: rgb(255, 0 ,0); /* Red */
}

You can mix different levels of red, green and blue to create different colors:

Examples of RGB color values in CSS

h1 {
    color: rgb(0 ,128 ,0); /* Green */
}

.highlight {
    background-color: rgb(255 ,255 ,0); /* Yellow */
}

a {
    color: rgb(128 ,0 ,128); /* Purple */
}

RGB allows you to create many colors by changing the level of each component. This offers more control than using predefined names.

CSS also supports RGBA (Red Green Blue Alpha) values which add an opacity component to the color. The opacity value ranges from zero (full transparency) to one (full opacity).

Using RGBA for transparency

div { 
    background-color: rgba(255 ,00 ,00 ,.5); /* Red with fifty percent opacity */ 
} 

Using RGBA allows you to create colors with transparency without affecting the entire element's opacity. This is useful for creating overlays and other effects where you need control over individual colors' transparency.

RGB and RGBA are widely supported in CSS and give you a broad range of options compared to names commonly used in web design.

Setting text color using HSL values

p {
    color: hsl(0, 100%, 50%); /* Red */
}

Examples of HSL color values in CSS

h1 {
    color: hsl(120, 100%, 50%); /* Green */
}

.highlight {
    background-color: hsl(60, 100%, 50%); /* Yellow */
}

a {
    color: hsl(300, 100%, 50%); /* Purple */
}

The HSL model allows you to create many colors by adjusting hue, saturation, and lightness. It provides an intuitive way compared to hexadecimal or RGB values.

Similar to RGBA, CSS also supports HSLA (Hue, Saturation, Lightness, Alpha) values which add opacity component. The opacity value ranges from zero (fully transparent) to one (fully opaque).

Using HSLA for transparency

div {
    background-color: hsla(0, 100%, 50%, 0.5); /* Red with fifty percent opacity */
}

Using HSLA allows you to control transparency of individual colors without affecting the entire element's opacity. This is useful for creating translucent overlays, gradients, and other visual effects.

HSL and HSLA provide a flexible way to specify colors. CSS offers an intuitive approach to selection that allows easy adjustments to create variations. HSL is a good choice when you want to create schemes based on a single hue or need to make subtle adjustments to a design.

Using Color Keywords in CSS

.overlay {
  background-color: transparent;
}

.button {
  color: blue;
  border: 2px solid currentColor;
}

.child-element {
  color: inherit;
}

.overlay has a transparent background, allowing content behind it to be visible. This is useful for creating overlays or semi-transparent elements.

.button uses currentColor. The text is blue and by using currentColor for border-color, both text and border will be blue. If you change the text color later, the border will update automatically.

.child-element uses inherit. It takes its parent's text color without needing explicit specification.

Color keywords provide a way to apply colors based on specific meanings or relationships between elements. They can be used with other notations like hexadecimal values, RGB, or HSL for flexible styling in your CSS.

Setting Text Color

The color property sets the text color of an element. It can be applied to any element that contains text, such as paragraphs, headings, links, or span elements.

p {
  color: blue;
}

h1 {
  color: #ff0000;
}

a {
  color: rgb(0, 128, 0);
}

In these examples, the color property sets the text color of paragraphs to blue, headings to red using a hexadecimal value, and links to green using an RGB value.

Setting Background Color

The background-color property sets the background color of an element. It can be applied to any element.

div {
  background-color: yellow;
}

.container {
  background-color: #f0f0f0;
}

button {
  background-color: hsla(240, 100%, 50%, 0.8);
}

In these examples, the background-color property sets the background color of a div element to yellow, a container class to light gray using a hexadecimal value, and a button to semi-transparent blue using an HSLA value.

Setting Border Color

The border-color property sets the border's color for an element. It can be applied if the element has a border.

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

input[type="text"] {
  border:1px solid; 
  border-color:#ccc; 
} 

button { 
  border: 3px solid; 
  border-color: rgb(0, 0, 0); 
} 

In these examples, the border-color property sets the border color for a box class to red, an input field to light gray using a hexadecimal value, and a button to black using an RGB value. These color properties accept various color notations such as color names, hexadecimal values, RGB, RGBA, HSL, and HSLA. You can use these notations according to the color you want to apply. By using these color properties, you can control the text color, background color, and border color of elements in your web pages, creating visually appealing and consistent designs.

Using RGBA for Color Transparency

To apply transparency to a color using RGBA, use the rgba() function:

.overlay {
  background-color: rgba(255, 0, 0, 0.5); /* Red with 50% opacity */
}

p {
  color: rgba(0, 0, 255, 0.8); /* Blue with 80% opacity */
}

• The .overlay element has a semi-transparent red background.
• The text in paragraphs is set to blue with an alpha value of .8.

Using HSLA for Color Transparency

Similar to RGBA:

.button {
  background-color: hsla(120%,100%,50%, .6); /* Green with .6 opacity */
}

a {
  color: hsla(240%,100%,50%, .9); /* Blue with .9 opacity */
}

• The .button element has a semi-transparent green background.
• Links have a blue color set at an alpha value of .9.

Using the Opacity Property

CSS also provides the opacity property:

img {
  opacity: .5; /* Makes image half opaque */
}

.container { 
  opacity: .8; /* Makes container mostly opaque */ 
}

• An image is made half opaque by setting its opacity.
• A container element is mostly opaque by setting its opacity.

Note that when using opacity, it affects both an element and its contents. If you want transparency only on specific parts or colors within an element without affecting child elements' opacities, use either RGBA or HSLA instead.

Linear Gradients

Linear gradients create a straight line transition from one color to another. To create a linear gradient, use the linear-gradient() function as the value for the background-image property.

.linear-gradient {
  background-image: linear-gradient(to right, red, blue);
}

.linear-gradient-multiple {
  background-image: linear-gradient(to bottom right, red, yellow, green);
}

Radial Gradients

Radial gradients create a circular or elliptical transition between colors. To create a radial gradient, use the radial-gradient() function as the value for the background-image property.

.radial-gradient {
  background-image: radial-gradient(circle, blue, green);
}

.radial-gradient-multiple {
  background-image: radial-gradient(circle at top left, red, yellow, green);
}

Examples of Creating Gradients in CSS

Here are some more examples:

.linear-gradient-transparent { 
  background-image: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5)); 
} 

.repeating-linear-gradient {   
  background-image: repeating-linear-gradient(45deg, red 10px, blue 20px);    
}  

.radial-gradient-custom {     
  background-image: radial-gradient(ellipse, yellow, green, blue);      
}    

Gradients are useful features in CSS that help you make appealing backgrounds for buttons, sections, full-page backgrounds, and more. With the flexibility offered by both types along with the ability to control properties such as color positions and transparency, many creative effects are possible within your web pages.

Monochromatic

A monochromatic color scheme uses different shades, tints, and tones of a single color. It creates a unified look and is easy on the eyes. To create this scheme, choose a base color and then use its lighter and darker variations.

Complementary

A complementary color scheme uses colors that are opposite each other on the color wheel. These colors create high contrast but should be used carefully to avoid visual tension. Examples include blue and orange, red and green, or purple and yellow.

Analogous

An analogous color scheme uses colors that are next to each other on the color wheel. These colors create a harmonious combination. To create this scheme, choose a primary color then use the colors directly to its left and right.

Triadic

A triadic color scheme uses three colors that are evenly spaced on the color wheel. This scheme creates a balanced look. To create this scheme, choose a primary color then draw an equilateral triangle on the wheel to find the other two colors.

When creating a palette for your website, tools can help generate schemes based on your preferences:

• Adobe Color: This tool allows you to make schemes based on different rules like monochromatic or complementary.
• Coolors: Coolors is fast and easy-to-use for generating random palettes or adjusting individual colors.
• Paletton: Paletton lets you make schemes based on models like monochromatic or triadic with fine-tuning options.

By using these tools and understanding different types of schemes, you can make appealing palettes for your web designs while considering branding message user experience when choosing your colors experimenting until finding perfect palette for site