CSS BASIC
CSS BOX MODEL
CSS3 FEATURES
CSS3 EXAMPLES
CSS3 REFERENCE

# CSS3 Color

CSS3 provides several new ways to define a color values.

## Defining Colors in CSS3

In the previous section you've learnt how to define colors using the color keywords and RGB notations. In addition to that CSS3 adds some new functional notations for setting color values for the elements which are `rgba()`, `hsl()` and `hsla()`.

In the following section we'll discuss about these color model one by one.

## RGBA Color Values

Colors can be defined in the RGBA model (red-green-blue-alpha) using the `rgba()` functional notation. RGBA color model are an extension of RGB color model with an alpha channel — which specifies the opacity of a color.

The alpha parameter accepts a value from `0.0` (fully transparent) to `1.0` (fully opaque).

#### Example

Try this code »
``````h1 {
color: rgba(0,0,255,0.5);
}
p {
background-color: rgba(0%,0%,100%,0.3);
}``````

## HSL Color Values

Colors also can be defined the HSL model (hue-saturation-lightness) using the `hsl()` functional notation. Hue is represented as an angle (from `0` to `360`) of the color wheel or circle (i.e. the rainbow represented in a circle). This angle is given as a unit less number because the angle is so typically measured in degrees that the unit is implicit in CSS.

Saturation and lightness are represented as percentages. `100%` saturation means full color, and `0%` is a shade of gray. Whereas, `100%` lightness is white, `0%` lightness is black, and `50%` lightness is normal. Check out the example below:

#### Example

Try this code »
``````h1 {
color: hsl(360,70%,60%);
}
p {
background-color: hsl(480,50%,80%);
}``````

Tip: By the definition `red=0=360`, and the other colors are spread around the circle, so `green=120`, `blue=240`, etc. As an angle, it implicitly wraps around such that `-120=240`, `480=120`, and so on.

## HSLA Color Values

Colors can be defined in the HSLA model (hue-saturation-lightness-alpha) using the `hsla()` functional notation. HSLA color model are an extension of HSL color model with an alpha channel — which specifies the opacity of a color.

The alpha parameter accepts a value from `0.0` (fully transparent) to `1.0` (fully opaque).

#### Example

Try this code »
``````h1 {
color: hsla(360,80%,50%,0.5);
}
p {
background-color: hsla(480,60%,30%,0.3);
}``````
{"ft_lang_label":"__label__en","ft_lang_prob":0.79704225,"math_prob":0.93027574,"size":2109,"snap":"2019-51-2020-05","text_gpt3_token_len":565,"char_repetition_ratio":0.12209026,"word_repetition_ratio":0.19186047,"special_character_ratio":0.28734,"punctuation_ratio":0.15765765,"nsfw_num_words":0,"has_unicode_error":false,"math_prob_llama3":0.9633194,"pos_list":[0],"im_url_duplicate_count":[null],"WARC_HEADER":"{\"WARC-Type\":\"response\",\"WARC-Date\":\"2019-12-11T01:21:57Z\",\"WARC-Record-ID\":\"<urn:uuid:b217a52e-4976-4690-bb27-d86a8131c568>\",\"Content-Length\":\"34944\",\"Content-Type\":\"application/http; msgtype=response\",\"WARC-Warcinfo-ID\":\"<urn:uuid:3075affa-6c2f-4f4e-8fb1-e609d005fb89>\",\"WARC-Concurrent-To\":\"<urn:uuid:eb62dbc4-8a25-44d4-9db5-a8487e79073b>\",\"WARC-IP-Address\":\"178.128.254.11\",\"WARC-Target-URI\":\"https://www.tutorialrepublic.com/css-tutorial/css3-color.php\",\"WARC-Payload-Digest\":\"sha1:LSYABYEUFNY7K4S4OVXXVTIQM43GTTZP\",\"WARC-Block-Digest\":\"sha1:SSMM55ZNHEWZDKQUWNFJ7CUUE5H4NIKU\",\"WARC-Identified-Payload-Type\":\"text/html\",\"warc_filename\":\"/cc_download/warc_2019/CC-MAIN-2019-51/CC-MAIN-2019-51_segments_1575540529516.84_warc_CC-MAIN-20191210233444-20191211021444-00476.warc.gz\"}"}