-
CSS Syntax
-
CSS Selectors
-
CSS How To
-
CSS Comments
-
CSS Colors
-
CSS Backgrounds
-
CSS Borders
-
CSS Margins
-
CSS Padding
-
CSS Dimension
-
CSS Box Model
-
CSS Outline
-
CSS Text
-
CSS Fonts
-
CSS Links
-
CSS Lists
-
CSS Tables
-
CSS Display
-
CSS Position
-
CSS Overflow
-
CSS Float
-
CSS Align
-
CSS Combinators
-
CSS Pseudo-class
-
CSS Opacity
-
CSS Attr Selectors
-
CSS Forms
-
CSS Transitions
-
CSS Transforms
-
CSS Animations
-
CSS !important
-
CSS Flex
-
CSS GRID
-
CSS Media Queries
CSS Colors
Colors play a significant role in web design, influencing aesthetics, readability, user experience, and even emotions. In CSS, colors can be applied to various properties, not just text. Backgrounds, borders, gradients, shadows – all can be colored using CSS.
Ways to Define Colors:
Color Names:
CSS supports 147 predefined color names
| CSS Example | HTML Example |
|---|---|
| css background-color: tomato; | html <div style=”background-color: tomato;”> This div has a tomato background color. |
| css color: gold; | html <p style=”color: gold;”>This text is in gold color. |
Description: Color names are human-friendly ways to define colors. They are easy to remember but may not cover the entire spectrum of colors available through other methods.
Hexadecimal (Hex) Values:
Represent colors based on their red, green, and blue components.
Description: Hex values are widely used because of their precision. They are a base-16 representation of RGB values.
| CSS Example | HTML Example |
|---|---|
| css background-color: #FF6347; | html <div style=”background-color: #FF6347;”>This div has a tomato background color |
| css color: #FFD700; | html <p style=”color: #FFD700;”>This text is in gold color. |
RGB and RGBA:
Define colors based on their red, green, and blue components. RGBA includes an alpha channel for transparency.
Description: RGB stands for Red, Green, and Blue. RGBA adds an “Alpha” channel, which represents opacity.
| CSS Example | HTML Example |
|---|---|
| css color: rgb(255,99,71); | html <p style=”color: rgb(255,99,71);”>This text is in tomato color. |
| css border-color: rgba(255,99,71,0.5); | html <div style=”border: 2px solid rgba(255,99,71,0.5);”> This div has a 50% opaque tomato border. . |
HSL and HSLA:
Use hue, saturation, and lightness to define colors. HSLA includes an alpha channel for transparency.
Description: HSL stands for Hue, Saturation, and Lightness. HSLA adds an “Alpha” channel, which represents opacity.
| CSS Example | HTML Example |
|---|---|
| css color: hsl(9, 100%, 58%); | html <p style=”color: hsl(9, 100%, 58%);”>This text is in tomato color. |
| css background-color: hsla(9, 100%, 58%, 0.5); | html <div style=”background-color: hsla(9, 100%, 58%, 0.5);”>This div has a 50% opaque tomato background. |
Common Properties That Use Color:
color:
Sets the color of the text.
Description: The color property is used to define the color of text inside an element
| CSS Example | HTML Example |
|---|---|
| css p { color: blue; } | html <p style=”color: blue;”>This text is blue. |
| css h1 { color: red; } | html <h1 style=”color: red;”>This heading is red. |
background-color:
Sets the background color of an element.
Description: The background color property sets the background color of an element.
| CSS Example | HTML Example |
|---|---|
| css div { background-color: yellow; } | html <div style=”background-color: yellow;”>This div has a yellow background. |
| css p { background-color: aqua; } | html <p style=”background-color: aqua;”>This paragraph has an aqua background. |
border-color:
Sets the color of an element’s border.
Description: The border-color property sets the color of the border around an element.
| CSS Example | HTML Example |
|---|---|
| css button { border-color: green; } | html < button style=”border-color: green;”>Button with green border |
| css div { border-color: purple; } | html <p div style=”border: 2px solid purple;”>Div with purple border |
box-shadow and text-shadow:
Apply shadows to elements and text, respectively.
Description: These properties add shadows to text and elements, respectively. They help elevate elements or text, making them stand out.
| CSS Example | HTML Example |
|---|---|
| css h1 { text-shadow: 2px 2px 4px red; } | html <h1 style=”text-shadow: 2px 2px 4px red;”>Text with red shadow |
| css div { box-shadow: 4px 4px 8px blue; } | html < div style=”box-shadow: 4px 4px 8px blue;”>Div with blue box shadow |
Gradients:
Linear Gradient:
A smooth transition between multiple colors in a straight line.
Description: Linear gradients transition between colors along a straight line.
| CSS Example | HTML Example |
|---|---|
| css background-image: linear-gradient(to bottom, red, yellow); | html <div style=”background-image: linear-gradient(to bottom, red, yellow);”>Div with linear gradient from red to yellow |
Radial Gradient:
A smooth transition between multiple colors radiating from a center.
Description: Radial gradients transition between colors in a circular or elliptical manner.
| CSS Example | HTML Example |
|---|---|
| css background-image: radial-gradient(circle, red, yellow); | html <div style=”background-image: radial-gradient(circle, red, yellow);”>Div with radial gradient from red to yellow |
Opacity:
The opacity property can be used to control the transparency of an element.
Description: The opacity property ranges from 0 (completely transparent) to 1 (fully opaque). It affects the entire element, including its content and borders.
| CSS Example | HTML Example |
|---|---|
| css div { background-color: pink; opacity: 0.5; } | html <div style=”background-color: pink; opacity: 0.5;”>This div has a pink background with 50% opacity. |
Color Tools:
There are numerous online tools available that can assist designers in choosing and pairing colors effectively:
– Color Pickers: Help in selecting colors and obtaining their respective codes.
– Palette Generators: Provide color schemes based on a chosen color.
– Contrast Checkers: Ensure readability by checking the contrast between text and background colors.
