CSS Colors
Colors are an important part of web design because they make your website look nice, and easy to read, and can even affect how people feel when they visit your site. You can use colors for text, backgrounds, borders, shadows, and more in CSS.
Different Ways to Define Colors in CSS
1. Color Name
CSS has 147 built-in color names like red, blue, green, and tomato. These names are easy to remember and use.
Example:
Output:
In this example:
• The CSS inside the <style> tag sets the color of all <p> elements to tomato.
• The paragraph text now correctly describes the color as tomato.
2. Hexadecimal (Hex) Values
Hex values are a way to represent colors with a six-digit code that starts with a . The code is made up of numbers and letters that tell the computer how much red, green, and blue are in the color.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: #FF6347;
}
</style>
</head>
<body>
<p>This text is in tomato color.</p>
</body>
</html>
Output:
In this example:
• The CSS rule color: #FF6347; sets the color of all <p> elements to tomato.
• The text in the <p> element will be displayed in the tomato color, which is confirmed by the hex code #FF6347.
3. RGB and RGBA
RGB stands for Red, Green, and Blue. You use three numbers between 0 and 255 to tell the computer how much of each color to use. RGBA is like RGB but adds a fourth number to control transparency (opacity).
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p{
background-color: rgb(255, 99, 71);
}
div{
background-color: rgba(255, 99, 71, 0.5);
}
</style>
</head>
<body>
<p>This text is in tomato background-color.</p>
<div>This div has a 50% opaque tomato background-color.</div>
</body>
</html>
Output:
In this example:
1. <p> Element:
• Style Applied: background-color: rgb(255, 99, 71);
• Effect: The background color of the paragraph is set to tomato, which is a solid color.
2. <div> Element:
• Style Applied: background-color: rgba(255, 99, 71, 0.5);
• Effect: The background color of the div is set to tomato with 50% opacity. This means the color will be semi-transparent, allowing the background behind the div to be partially visible.
4. HSL and HSLA
HSL stands for Hue, Saturation, and Lightness. Hue is the type of color, Saturation is how intense the color is, and Lightness is how light or dark the color is. HSLA adds a fourth number to control transparency.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p{
background-color: hsl(9, 100%, 58%);
}
div{
background-color: hsla(9, 100%, 58%, 0.5);
}
</style>
</head>
<body>
<p>This text is in tomato background-color.</p>
<div>This div has a 50% opaque tomato background-color.</div>
</body>
</html>
Output:
In this example:
1. <p> Element: Style applied background-color: hsl(9, 100%, 58%);
• 9 is the hue (a value that gives the color), which corresponds to a shade of red/orange.
• 100% is the saturation, meaning the color is fully saturated (vivid).
• 58% is the lightness, which determines how light or dark the color is.
2. <div> Element: Style applied background-color: hsla(9, 100%, 58%, 0.5);
• The first three values (9, 100%, 58%) are the same as the HSL values used for the <p> element.
• 0.5 is the alpha value, which specifies the opacity (0 is fully transparent, and 1 is fully opaque). In this case, 0.5 means the background color is 50% opaque.
Common Properties That Use Color
1. Color Property
The color property changes the color of the text.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: red;
}
p {
color: blue;
}
</style>
</head>
<body>
<h1>This heading is red.</h1>
<p>This text is blue.</p>
</body>
</html>
Output:
In this example:
• h1 { color: red; } which sets the text color of all <h1> elements to red.
• p { color: blue; } which sets the text color of all <p> elements to blue.
2. Background-color Property
The background-color property changes the background color of an element.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: yellow;
}
p {
background-color: aqua;
}
</style>
</head>
<body>
<div>This div has a yellow background.</div>
<p>This paragraph has an aqua background.</p>
</body>
</html>
Output:
In this example:
• div { background-color: yellow; }: This rule sets the background color of all <div> elements to yellow.
• p { background-color: aqua; }: This rule sets the background color of all <p> elements to aqua.
3. Border-color Property
The border-color property changes the color of an element’s border.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
button {
border-color: green;
}
div {
border: 2px solid purple;
}
</style>
</head>
<body>
<button>Button with green border</button>
<div>Div with purple border</div>
</body>
</html>
Output:
In this example:
• button { border-color: green; }: This rule sets the border color of all <button> elements to green.
• div { border: 2px solid purple; }: This rule sets a 2-pixel solid purple border for all <div> elements.
4. Box-shadow and Text-shadow Property
These properties add shadows to elements and text, making them stand out more.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px 4px red;
}
div {
box-shadow: 4px 4px 8px blue;
}
</style>
</head>
<body>
<h1>Text with red shadow</h1>
<div>Div with blue box shadow</div>
</body>
</html>
Output:
In this example:
1. text-shadow: 2px 2px 4px red;
• 2px: The horizontal offset of the shadow.
• 2px: The vertical offset of the shadow.
• 4px: The blur radius of the shadow.
• red: The color of the shadow.
• This will add a red shadow to the text in the <h1> element, making it appear raised and with a red blur effect.
2. box-shadow: 4px 4px 8px blue;
• 4px: The horizontal offset of the shadow.
• 4px: The vertical offset of the shadow.
• 8px: The blur radius of the shadow.
• blue: The color of the shadow.
• This will add a blue shadow to the <div>, creating the appearance of depth with a blue shadow effect around the box.
Gradients
1. Linear Gradient
A linear gradient smoothly transitions from one color to another in a straight line.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-image: linear-gradient(to bottom, red, yellow);
}
</style>
</head>
<body>
<div>Div with linear gradient from red to yellow</div>
</body>
</html>
Output:
In this example:
background-image: linear-gradient(to bottom, red, yellow);
• linear-gradient: This function is used to create a linear gradient background.
• to bottom: This specifies the direction of the gradient. In this case, it starts from the top and goes to the bottom.
• red, yellow: These are the colors used in the gradient. The gradient will transition smoothly from red at the top to yellow at the bottom.
2. Radial Gradient
A radial gradient smoothly transitions from one color to another in a circular pattern.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-image: radial-gradient(circle, red, yellow);
}
</style>
</head>
<body>
<div>Div with radial gradient from red to yellow</div>
</body>
</html>
Output:
In this example:
background-image: radial-gradient(circle, red, yellow);
• radial-gradient: This is the function used to create a radial gradient background.
• circle: This specifies the shape of the gradient. In this case, it’s circular.
• red, yellow: These are the colors used in the gradient. The gradient will transition smoothly from red at the center to yellow at the edges.
Opacity
The opacity property controls how transparent an element is. A value of 0 is fully transparent, and 1 is fully opaque.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: pink; opacity: 0.5;
}
</style>
</head>
<body>
<div>This div has a pink background with 50% opacity.</div>
</body>
</html>
Output:
In this example:
background-color: pink;: Sets the background color of the <div> to pink.
opacity: 0.5;: Sets the opacity of the <div> to 50%. This means that the <div> and its content will be 50% transparent, allowing the background behind it to be partially visible.
Special Keywords
1. Inherit Keyword
The inherit keyword makes an element take the color from its parent element
Example:
<!DOCTYPE html>
<html>
<body>
<div style=”color: darkred”>
This is the parent element.
<div style=”color: inherit;”>This is the child element inheriting the color from the parent.</div>
</div>
</body>
</html>
Output:
In this example:
• Parent <div>: style=”color: darkred” Sets the text color of the parent <div> to dark red.
• Child <div>: style=”color: inherit;” The inherit value makes the child <div> take the color property from its parent element. In this case, it inherits the dark red color.
2. Transparent Keyword
The transparent keyword makes an element fully transparent.
Example:
<!DOCTYPE html>
<html>
<body>
<div style=”background-color: grey;”>
Parent Element
<div style=”background-color: transparent;”>Child Element</div>
</div>
</body>
</html>
Output:
In this example:
• Parent <div>: style=”background-color: grey;” Sets the background color of the parent <div> to grey.
• Child <div>: style=”background-color: transparent;” Sets the background color of the child <div> to transparent, meaning it does not have its own background color and will instead show the background color of the parent <div>.
3. CurrentColor Keyword
The currentColor keyword makes an element use the current text color for other properties like borders.
Example:
<!DOCTYPE html>
<html>
<body>
<div style=”color: darkred;”>
This is the parent element.
<div style=”border: 2px solid currentColor;”>This is the child element using currentColor for the border.</div>
</div>
</body>
</html>
Output:
In this example:
• Parent <div>: style=”color: darkred;” Sets the text color of the parent <div> to dark red.
• Child <div>: style=”border: 2px solid currentColor;” Sets the border of the child <div> to 2px solid, with the color being currentColor. The currentColor keyword refers to the color property of the element’s parent, which in this case is dark red.
Here’s a table of commonly used colors, including their names, hexadecimal (Hex) codes, RGB values, and HSL values:
| Color Name | Hex Code | RGB Value | HSL Value |
|---|---|---|---|
| White | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| Red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Green | #008000 | rgb(0, 128, 0) | hsl(120, 100%, 25%) |
| Blue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| Yellow | #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| Cyan | #00FFFF | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| Magenta | #FF00FF | rgb(255, 0, 255) | hsl(300, 100%, 50%) |
| Gray | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
| Light Gray | #D3D3D3 | rgb(211, 211, 211) | hsl(0, 0%, 83%) |
| Dark Gray | #A9A9A9 | rgb(169, 169, 169) | hsl(0, 0%, 66%) |
| Light Pink | #FFB6C1 | rgb(255, 182, 193) | hsl(350, 100%, 86%) |
| Light Blue | #ADD8E6 | rgb(173, 216, 230) | hsl(195, 53%, 79%) |
| Coral | #FF7F50 | rgb(255, 127, 80) | hsl(16, 100%, 66%) |
| Gold | #FFD700 | rgb(255, 215, 0) | hsl(51, 100%, 50%) |
| Salmon | #FA8072 | rgb(250, 128, 114) | hsl(6, 93%, 71%) |
| Dark Red | #8B0000 | rgb(139, 0, 0) | hsl(0, 100%, 27%) |
| Firebrick | #B22222 | rgb(178, 34, 34) | hsl(0, 68%, 42%) |
| Beige | #F5F5DC | rgb(245, 245, 220) | hsl(60, 56%, 91%) |
| Chocolate | #D2691E | rgb(210, 105, 30) | hsl(25, 75%, 47%) |
| Dark Cyan | #008B8B | rgb(0, 139, 139) | hsl(180, 100%, 27%) |
| Orange Red | #FF4500 | rgb(255, 69, 0) | hsl(16, 100%, 50%) |
| Pink | #FFC0CB | rgb(255, 192, 203) | hsl(350, 100%, 88%) |
| Violet | #EE82EE | rgb(238, 130, 238) | hsl(270, 76%, 72%) |
| Turquoise | #40E0D0 | rgb(64, 224, 208) | hsl(174, 72%, 56%) |
Course Video
YouTube Reference :
Practice Scenarios
Scenario 1: Basic Color Names
Objective: Use basic color names to style elements.
Expected Output: The heading should be blue, the paragraph should be green, and the button should be red.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Basic Color Names</title>
<style>
.heading {
color: blue;
}
.paragraph {
color: green;
}
.button {
color: red;
}
</style>
</head>
<body>
<h1 class=”heading”>This is a blue heading</h1>
<p class=”paragraph”>This is a green paragraph</p>
<button class=”button”>This is a red button</button>
</body>
</html>
Output:
Scenario 2: Hexadecimal Colors
Objective: Use hexadecimal color values to style elements.
Expected Output: The heading should be ff5733, the paragraph should be 33ff57, and the button should be 5733ff.
Output:
Scenario 3: RGB Colors
Objective: Use RGB color values to style elements.
Expected Output: The heading should be rgb(255, 0, 0), the paragraph should be rgb(0, 255, 0), and the button should be rgb(0, 0, 255).
Output:
Scenario 4: HSLA Colors
Objective: Use HSLA color values to style elements with transparency.
Expected Output: The heading should be hsla(0, 100%, 50%, 0.5), the paragraph should be hsla(120, 100%, 50%, 0.5), and the button should be hsla(240, 100%, 50%, 0.5).
Output:
Scenario 5: Background Colors
Objective: Use different color formats to set background colors for elements.
Expected Output: The heading should have a background color of yellow, the paragraph should have a background color of 00ff00, and the button should have a background color of rgb(0, 0, 255).
Output:
Scenario 6: Text and Background Colors
Objective: Use color combinations for text and background colors.
Expected Output: The heading should have white text on a black background, the paragraph should have black text on a light gray background, and the button should have yellow text on a blue background.
Output:
Scenario 7: Text Shadow with Large Blur Radius
Objective: Apply a text shadow with a large blur radius for a soft effect.
Expected Output: The heading text should have a large, soft shadow.
Output:
Scenario 8: Box Shadow with Inset
Objective: Apply an inset shadow to a box, making the shadow appear inside the element.
Expected Output: The box should have a shadow that appears inside, creating a sunken effect.
Output:
