Previous Next

CSS

CSS Overview Selectors Declarations Rule Sets Comments Reset/Normalize Origin Importance Order Specificity Inheritance Cascade Layers Inline Styles Internal Styles External Styles @import Absolute Units Relative Units Dynamic Viewport Angle Units Time Units Frequency Units: Resolution Units Keywords Color Formats Color Functions & Spaces Background Color Background Image Background Repeat Background Position Background Size Background Attachment Background Shorthand Multiple Backgrounds Linear Gradients Radial Gradients Conic Gradients Font Family Font Size Font Weight Font Style Line Height Text Align Text Decoration Text Transform Letter Spacing Word Spacing Text Shadow Text Wrap Variable Fonts Content Box Padding Box Border Box Margin Box Box Sizing Property Margin Padding Border Outline Box Shadow Block Display Inline Display Inline Block Display Static Position Relative Position Absolute Position Fixed Position Sticky Position Top Element Position Right Element Position Bottom Element Position Left Element Position Z Index Flexbox Box Layout Display Flex Flex Direction Flex Wrap Justify Content Align Items Align Content Gap, Row Gap & Column Gap Flex Grow Flex Shrink Flex Basis Flex Shorthand Order Property Align Self Practical Applications CSS Grid Layout Grid Display Grid Template Columns Grid Template Rows Grid Template Areas Justify Items Grid Auto Columns Justify Self Nested Grids Responsive Web Design Min Width Max Width Orientation Logical Operators Pointer Hover Prefers Color Scheme Fluid Images Flexible Typography Viewport Width Advanced CSS Features Defining variables Using variables Scope & Inheritance of CSS Variables Property Value Fallback Practical Applications :Hover :Active :Focus :Focus Visible :Visited :Link :First Child :Last Child :Nth Child :Nth of Type :Empty :Checked :Disabled :Enabled :Valid :Invalid :Required :Has :Not :Is :Where ::Before Pseudo Element ::After Pseudo Element ::First Letter ::First Line ::Selection ::Marker CSS 2D Transformations CSS 3D Transformations Transform Origin Transform Style Backface Visibility Transition Property Transition Duration Transition Timing Function Transition Delay Transition Shorthand Ease Timing Function Linear Timing Function Ease In Timing Function Ease Out Timing Function Ease In Out Timing Function Cubic Bezier Function Animations (@keyframes) Defining @keyframes Animation Name CSS Animation Duration Animation Timing Function CSS Animation Delay CSS Animation Iteration Count Animations Direction CSS Animation Fill Mode CSS Animation Play State CSS Filter Blur CSS Filter Brightness CSS Filter Contrast() CSS Drop Shadow CSS Grayscale CSS Hue Rotate CSS Invert CSS Opacity CSS Saturate CSS Sepia Mix Blend Mode Background Blend Mode Object Fit & Object Position Scroll Snap Type Scroll Snap Align Scroll Padding Scroll Margin Scroll Triggered Animations JS Variables

Color Formats

Colors and Backgrounds

In CSS, you can specify colors and backgrounds for elements to create visually appealing and well-structured web pages. Understanding the different color formats is fundamental to web design, as it gives you precise control over the appearance of your site. Each format has its use cases, from simple, readable keywords to complex, transparent colors using RGBA or HSLA.

Color Formats: Keywords

Named colors, or keywords, are the most straightforward way to apply color in CSS. There are over 140 standard color names recognized by modern browsers, making them great for quick mockups and simple designs where exact shades are not critical.

Example 1: Color Keyword for Text

/* This CSS rule selects all paragraph elements */
p {
  /* Sets the text color of the paragraphs to 'darkblue' */
  color: darkblue;
}

Explanation

This code targets every <p> tag on the webpage. The color property is assigned the keyword darkblue, which changes the color of the text within those paragraphs.

Example 2: Background Color Keyword

/* This rule targets the element with the id 'header' */
#header {
  /* Sets the background color to 'lightgray' */
  background-color: lightgray;
  /* Adds some padding for better visual appearance */
  padding: 20px;
}

Explanation

The CSS selector #header targets a specific element with the ID "header". The background-color property is set to the keyword lightgray, filling the entire background of the header element with a light gray color.

Example 3: Border Color Keyword

/* This rule styles all div elements */
div {
  /* Sets a solid border that is 2 pixels wide */
  border: 2px solid;
  /* Defines the color of the border using the 'tomato' keyword */
  border-color: tomato;
}

Explanation

This style applies to all <div> elements. The border-color property specifically sets the color of the border, which has been previously defined with a style and width, to the vibrant keyword tomato.

Color Formats: Hexadecimal (#RRGGBB, #RGB, #RRGGBBAA)

Hexadecimal, or "hex," color values are one of the most common ways to define colors in web design. This format uses a combination of six (or three) numbers and letters to represent red, green, and blue values, offering a wide spectrum of colors. Modern CSS also supports 8-digit and 4-digit hex codes to include an alpha (transparency) channel.

Example 1: 6-Digit Hex Code

/* This rule styles the body of the webpage */
body {
  /* Sets a specific shade of teal for the background */
  /* #008080 breaks down into Red:00, Green:80, Blue:80 */
  background-color: #008080;
}

Explanation

This code sets the background-color of the <body> element. The hex value #008080 represents the amounts of red, green, and blue, respectively, where 00 is the lowest value and FF is the highest.

Example 2: 3-Digit Shorthand Hex Code

/* This rule targets all h2 headings */
h2 {
  /* Sets the text color to a shade of purple using shorthand */
  /* #A0F is shorthand for #AA00FF */
  color: #A0F;
}

Explanation

The 3-digit hex code #A0F is a shortcut for #AA00FF. Each digit is simply duplicated, making it a concise way to write colors where the red, green, and blue pairs have identical digits.

Example 3: 8-Digit Hex Code with Alpha Transparency

/* This rule styles a container element */
.container {
  /* The background color is a blue with 50% transparency */
  /* The '80' at the end represents the alpha channel */
  background-color: #0000FF80;
  color: white; /* Text color is set to white for readability */
}

Explanation

This example uses an 8-digit hex code where the first six digits (0000FF) define the blue color. The last two digits (80) represent the alpha channel, setting the background to be 50% transparent.

Color Formats: RGB/RGBA (rgb(), rgba())
The RGB color model defines colors by mixing Red, Green, and Blue values, each ranging from 0 to 255. The rgba() function extends this model by adding an alpha channel for controlling opacity, where 1 is fully opaque and 0 is fully transparent.

Example 1: Solid RGB Color

/* This rule styles a button element */
.button {
  /* Sets the background to a distinct shade of green */
  background-color: rgb(76, 175, 80);
  color: white;
}

Explanation

The background-color is set using the rgb() function. The values 76 for red, 175 for green, and 80 for blue combine to create a specific, solid shade of green.

Example 2: RGBA Background Color with Transparency

/* This rule styles a modal overlay */
.modal-overlay {
  /* Sets a black background that is 70% transparent */
  background-color: rgba(0, 0, 0, 0.7);
}

Explanation

This code uses rgba(0, 0, 0, 0.7) to create a semi-transparent black background. The first three values (0, 0, 0) define black, and the fourth value (0.7) sets the opacity to 70%, allowing content behind the overlay to be partially visible.

Example 3: RGBA Border Color

/* This rule styles an input field on focus */
input:focus {
  /* Creates a glowing effect with a semi-transparent blue border */
  border-color: rgba(50, 150, 250, 0.6);
  outline: none; /* Removes the default outline */
}

Explanation

Here, rgba() is used to set the border-color. This creates a translucent blue border around an input field when it is in the :focus state, providing visual feedback to the user.

Color Formats: HSL/HSLA (hsl(), hsla())

The HSL color model represents colors using Hue, Saturation, and Lightness, which can be more intuitive for designers. Hue is a degree on the color wheel (0-360), Saturation is a percentage (0%-100%), and Lightness is also a percentage (0%-100%). Like RGBA, hsla() adds an alpha channel for transparency.

Example 1: HSL Color

/* Styles a link's default state */
a {
  /* Hue 240 is blue, 100% saturation is vivid, 50% lightness is normal */
  color: hsl(240, 100%, 50%);
}

Explanation

The color of the <a> tag is set using HSL. hsl(240, 100%, 50%) defines a pure, fully saturated blue, as hue 240 corresponds to blue on the color wheel.

Example 2: HSLA for a Disabled State

/* Styles a disabled button */
button:disabled {
  /* Same hue as a normal button, but desaturated and lighter */
  background-color: hsla(240, 10%, 75%, 0.5);
  cursor: not-allowed;
}

Explanation

This example demonstrates how HSL is useful for creating color variations. By reducing saturation to 10%, increasing lightness to 75%, and adding 50% transparency with hsla(), we can easily create a muted, "disabled" look from a base color.

Example 3: HSLA for a Hover Effect

/* Styles a card element on hover */
.card:hover {
  /* Creates a subtle yellow overlay on hover */
  background-color: hsla(50, 100%, 50%, 0.1);
}

Explanation

The hsla() function is used to apply a very transparent overlay when a user hovers over a .card element. The low alpha value (0.1) ensures the effect is subtle, adding a slight yellow tint without obscuring the content underneath.