CSS Colors

• CSS – Introduction
• CSS – Basics
• CSS – Include CSS File to HTML
• CSS – ID and Class
• CSS – Cascading Order
• CSS – Selector
• CSS – Pseudo Classes
• CSS – Colors
• CSS – Gradients
• CSS – Units
• CSS – Background
• CSS – Border
• CSS – Margin and Padding
• CSS – Height and Width
• CSS – Outline
• CSS – Display and Visibility
• CSS – Position
• CSS – Overlapping Elements
• CSS – Overflow
• CSS – Float
• CSS – Clear and Clearfix
• CSS – Left and Right
• CSS – Transform
• CSS – Opacity / Transparency
• CSS – text-shadow
• CSS – box-shadow
• CSS – object-fit
• CSS – Counters
• CSS – Variables
• CSS – Fonts
• CSS – Text Formatting
• CSS – Graphics
• CSS – Links
• CSS – Lists
• CSS – Tables
• CSS – Horizontal & Vertical Align
• CSS – Image Sprite
• CSS – Transitions
• CSS – 2D Transforms
• CSS – 3D Transforms
• CSS – Animations
• CSS – Media Queries
• CSS – Flexbox

CSS Color Names

CSS colors are one of the most important aspects of web design. They are used to create a visually appealing website that is easy to navigate and use. Colors are used to create contrast, draw attention, and create an overall aesthetic. There are a variety of ways to use colors in CSS, and understanding the basics of color theory will help you create a successful website.

When choosing colors for your website, it is important to consider the context in which the colors will be used. Different colors can evoke different emotions and create different moods. For example, bright colors can be used to create a cheerful and energetic atmosphere, while darker colors can create a more serious and professional atmosphere. Additionally, colors can be used to create a sense of hierarchy or importance. For example, a bright color can be used to draw attention to an important section of the website, while a darker color can be used to create a sense of subtlety.

<p style="color: Red;">Test text...</p>

Test text…

• white
• black
• red
• orange
• yellow
• green
• cyan
• blue
• purple
• pink
• gray
• brown

Color Values

1. RGB Value

The CSS rgb() function, It allows you to specify an RGB color value by specifying the red, green, and blue channels directly.

<p style="color: rgb(148,0,211);">Test text...</p>

Test text…

2. RGBA Value

The CSS rgba() function, It allows you to specify an RGB color value, as well as an alpha value to determine the color’s transparency.

<p style="color: rgba(30 ,255,50, 0.5);">Test text...</p>

Test text…

3. HEX Value

Here is using hexadecimal notation instead of the color name.

<p style="color: #963c1e;">Test text...</p>

Test text…

4. HSL Value

The CSS hsl() function, It allows you to specify a color value by specifying the hue, saturation, and light components of the color.

The first value: as an angle in degrees.

The second value: It represents the amount of saturation in the color. (%)

The third value: It represents the amount of light in the color. (%)

<p style="color: hsl(240,100%,50%);">Test text...</p>

Test text…

5. HSLA Value

The CSS hsla() function can be used to add transparency to a color when using the HSL model.

<p style="color: hsla(30, 100%, 50%, 0.5);">Test text...</p>

Test text…