Colors in CSS Reference

Colors play a crucial role in defining the visual appeal of web pages. The CSS language provides various ways to specify colors, ranging from basic named colors to advanced color functions. This guide will take you through the basic to advance of color usage in CSS.

Basic Color Properties

Named Colors

CSS provides a set of predefined color names.

				
					body {
  color: red;
  background-color: lightblue;
}

Hexadecimal Colors

Use a 6-digit hexadecimal code to represent colors.

				
					h1 {
  color: #00ff00; /* Green */
}

RGB Colors

Specify colors using the Red, Green, and Blue components.

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

RGBA Colors

Extend RGB with an additional Alpha channel for transparency.

				
					div {
  background-color: rgba(0, 0, 255, 0.5); /* Semi-transparent blue */
}

Advanced Color Properties

HSL Colors

Represent colors using Hue, Saturation, and Lightness.

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

HSLA Colors

Similar to HSL, with an added Alpha channel for transparency.

				
					a {
  color: hsla(0, 100%, 50%, 0.7); /* Semi-transparent red */
}

Color Variables

Define and use variables to maintain consistent color schemes.

				
					:root {
  --main-color: #3498db;
}

button {
  background-color: var(--main-color);
}

Color Functions

Darken() and Lighten()

Adjust the darkness or lightness of a color.

				
					h2 {
  color: darken(#ffcc00, 20%); /* Darken yellow by 20% */
}

Saturate() and Desaturate()

Increase or decrease the saturation of a color.

				
					p {
  color: saturate(#993366, 30%); /* Increase saturation by 30% */
}

Mix()

Blend two colors together.

				
					div {
  background-color: mix(#ff0000, #0000ff, 50%); /* Mix red and blue equally */
}

Color Contrast

Contrast Ratio

Ensure sufficient contrast for accessibility.

				
					body {
  color: #333;
  background-color: #f8f8f8;
}

Accessible Text Colors

Choose text colors based on background for readability.

				
					article {
  color: #fff;
  background-color: #333;
}

CSS Gradients

Linear Gradients

Create smooth transitions between two or more colors.

				
					header {
  background: linear-gradient(to right, #ffcc00, #ff6699);
}

Radial Gradients

Define gradients radiating from a central point.

				
					button {
  background: radial-gradient(circle, #ff3300, #990000);
}

Understanding the diverse ways to use colors in CSS is essential for creating visually appealing and accessible web designs. From basic named colors to advanced color functions and gradients, the options are vast. By combining different color properties and functions, you can achieve a great color scheme that enhances the overall user experience. Happy coding! ❤️