# CSS Colors

# **CSS Colors**

In CSS Colors are specified using👇
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668876917206/nBt_zmDyl.png align="left")

<iframe src="https://giphy.com/embed/3o7btMotAhVnUOz2Mg" width="480" height="480" frameBorder="0" class="giphy-embed" allowFullScreen ></iframe><p><a href="https://giphy.com/gifs/art-cute-rainbow-3o7btMotAhVnUOz2Mg">via GIPHY</a></p>

## 1. Predefined color names

👉 In CSS, a color can be specified by using a predefined color name.

👉 CSS/HTML support 140 standard color name .  some are👇
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668876942968/Xun9LszmE.png align="left")

Example👇
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668876993643/y3CVFag7d.png align="left")

An RGB color value represents RED, GREEN, and BLUE light sources. 

some of them are given below👇
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668877016818/y3HheOWUK.png align="left")

## 2. **CSS RGB Colors**

Example👇
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668877044101/qRULKbMMV.png align="left")

<iframe src="https://giphy.com/embed/dU5svIJyalPWWiuAEL" width="480" height="360" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/onmilwaukee-lgbtq-milwaukee-locamoji-dU5svIJyalPWWiuAEL">via GIPHY</a></p>

## 3. **CSS HEX Colors**

A hexadecimal color is specified with `**#RRGGBB**`, where the RR (red), GG (green), and BB (blue) hexadecimal integers identify the components of the color.

some of them are given below👇

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668877071149/SGwiMzFPq.png align="left")

Example👇
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668877095557/QdkQCkOQg.png align="left")

## 4. **CSS HSL Colors**

👉 HSL stands for hue, saturation, and lightness.

**HSL Value**

👉 In CSS, a color can be specified using hue, saturation, and lightness (HSL) in the form:

`hsl (*hue*, *saturation*, *lightness*)`

👉 Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.

👉 Saturation is a percentage value. 0% means a shade of gray, and 100% is the full color.

👉 Lightness is also a percentage. 0% is black, 50% is neither light or dark, 100% is white.

some of them are 👇
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668877121962/z6SihNFlU.png align="left")

Example👇
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668877164037/5hwgZ-xuL.png align="left")

## 5. **RGBA Color Value**

👉 RGBA color values are an extension of RGB color values with an alpha channel - **`which specifies the opacity for a color.`**

👉 An RGBA color value is specified with:

`rgba(*red,* *green*, *blue, alpha*)`

👉 An alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all)

Example👇
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668877193028/vO-CzhGsE.png align="left")

# 6. HSLA Value

👉 HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity for a color.

👉 An HSLA color value is specified with:

`**hsla(*hue,* *saturation*, *lightness, alpha*)**`

👉 An alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):

Example👇
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668877219124/9PRHIj0cA.png align="left")

<iframe src="https://giphy.com/embed/mDFsPZpiHs2pVcbVNT" width="480" height="480" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/SimyoNL-pride-prideamsterdam-simyo-mDFsPZpiHs2pVcbVNT">via GIPHY</a></p>

-----------------------------------------------------------------------------------------------
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666336375150/5HqI8zNVh.png align="left")> 
Download our HTML & CSS Visual Treat! ebook Here: 
[Click here](https://codemarch.gumroad.com/l/hxazr)