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

<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…