CSS Legal Color Values

Colors in CSS can be specified by the following methods:

• Hexadecimal colors
• Hexadecimal colors with transparency
• RGB colors
• RGBA colors
• HSL colors
• HSLA colors
• Predefined/Cross-browser color names
• With the currentcolor keyword

Hexadecimal Colors

A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF.

For example, the #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00.

Example

Define different HEX colors:

Hexadecimal Colors With Transparency

A hexadecimal color is specified with: #RRGGBB. To add transparency, add two additional digits between 00 and FF.

Example

Define different HEX colors with transparency:

RGB Colors

An RGB color value is specified with the rgb() function, which has the following syntax:

Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255 or a percentage value (from 0% to 100%).

For example, the rgb(0,0,255) value is rendered as blue, because the blue parameter is set to its highest value (255) and the others are set to 0.

Also, the following values define equal color: rgb(0,0,255) and rgb(0%,0%,100%).

Example

Define different RGB colors:

RGBA Colors

RGBA color values are an extension of RGB color values with an alpha channel — which specifies the opacity of the object.

An RGBA color is specified with the rgba() function, which has the following syntax:

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Example

Define different RGB colors with opacity:

HSL Colors

HSL stands for hue, saturation, and lightness — and represents a cylindrical-coordinate representation of colors.

An HSL color value is specified with the hsl() function, which has the following syntax:

hsl(hue, saturation, lightness)

Hue is a degree on the color wheel (from 0 to 360) — 0 (or 360) is red, 120 is green, 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, 100% is white.

Example

Define different HSL colors:

HSLA Colors

HSLA color values are an extension of HSL color values with an alpha channel — which specifies the opacity of the object.

An HSLA color value is specified with the hsla() function, which has the following syntax:

hsla(hue, saturation, lightness, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Example

Define different HSL colors with opacity:

Predefined/Cross-browser Color Names

140 color names are predefined in the HTML and CSS color specification.

For example: blue , red , coral , brown , etc:

Example

Define different color names:

A list of all predefined names can be found in our Color Names Reference.

The currentcolor Keyword

The currentcolor keyword refers to the value of the color property of an element.

Example

The border color of the following element will be blue, because the text color of the element is blue:

Источник

HTML Colors

HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values.

Color Names

In HTML, a color can be specified by using a color name:

Background Color

You can set the background color for HTML elements:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Example

Hello World

Lorem ipsum.

Text Color

You can set the color of text:

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Example

Hello World

Lorem ipsum.

Ut wisi enim.

Border Color

You can set the color of borders:

Hello World

Hello World

Hello World

Example

Hello World

Hello World

Hello World

Color Values

In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values.

The following three elements have their background color set with RGB, HEX, and HSL values:

The following two elements have their background color set with RGBA and HSLA values, which add an Alpha channel to the color (here we have 50% transparency):

Источник

RGB Color – HTML and CSS Guide

Dionysia Lemonaki

Choosing the right color for your web design project is a serious endeavour. A color scheme can often make or break a site’s overall appearance.

Different colors create a different feel for your designs. The right choice of colors can make your designs and creations look clean, aesthetically pleasing, and modern. But the wrong colors can make a project look garish, hard on the eyes, and can be difficult for users to interact with.

The color of the border ( border ), the background ( background-color ), or of the foreground ( color ) – the text and text decorations on the page – have a huge impact, so you should put in some effort to get them right.

CSS lets you use of a wide variety of different colors and color systems. They range from named colors, to hex colors, rgb() colors, hsl colors and more.

How to Use Colors in HTML

The easiest way to apply color to your HTML elements is to write your HTML in a .html file. Then in that file you just link your .css stylesheet with all the colors and styles you specify.

This makes your code easier to read and sepates concerns, which is considered a best practise.

We can have a file, about.html , with some HTML code like this:

Then in our style.css we can add the following:

These styles look something like this when we load them in the browser:

In this example, we used rgb color values to change the colors on the page.

This article primarily covers the rgb() color model. It makes some comparisons with named colors and hex colors , weighing the pros and cons of each, and discusses some differences and similarities between these different color systems.

What are Named Colors in CSS?

Named colors are English words, known as keyword colors. And they’re pretty straightforward to use.

In your CSS file, you declare the property you want to target and alter. You then use one of the set and specified color names.

The code above will make every h2 element in your HTML have a text color value of cyan .

There are approximately 140 named colors that modern browsers support. So your choices are relatively limited and there is not much variety available.

With named colors, we are not able to harness the true power of CSS. So let’s look at some other options.

Numerically Named Color Systems

In this case, colors are described with a number system. This allows you to make the most of the whole spectrum of colors available.

Most computer screens use a mix of red, green, and blue colors combined together.

Both hex colors and rgb() colors use a combination of red, green, and blue to create different hues. They work in the same way – the only differences are the numeric systems they use and their syntax.

So let’s look at each system in a bit more depth.

What are Hexadecimal Colors in CSS?

Computers count in the hexadecimal counting system compared to we humans who use the decimal counting system.

This system is comprised of alphanumeric values which include these characters : 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f .

A hex color starts with a # to denote that it is indeed a hex color and is then followed by 6 of the characters mentioned above.

These numbers and letters represent the amount of red, green, and blue in the color.

Converting the keyword color, cyan , from earlier to it’s equivalent hex color value would be:

The first pair ( 00 ) represents the amount of red. The next pair ( ff ) represents the amount of green. And the last one ( ff ) represents the amount of blue.

The minimum value hex colors can use is 00 which is fully off, and the maxiumum value is ff which is fully on.

The color white in hex is #FFFFFF or FFF for its shorthand notation and the color black is #000000 or #000 .

What is The RGB Color Model?

Generally, hex colors and rgb colors are identical – they just use a different numeric system and syntax (but the colors are exactly the same).

It really just comes down to personal preference which one you choose to use.

RGB is an acronym that stands for Red Green Blue .

Instead of using six hexadecimal characters like we did for the hex color values, with RGB each parameter pair defines the intensity and brightness of each color (red, green, and blue), with an integer number ranging from 0-255 or a percantage ranging from (0% — 100%).

It expresses colors in terms of the amount of red, green, and blue they are made up of and uses a human counting system in comparisson to hex colors that speak computer language.

The number is a code to represent how dark or bright the color is.

The minimum value of 0 represents that none of the color is being shown, so it is at its darkest. On the other hand, the maximum value of 255 represents that the full amount of color and the full intensity is on display.

RGB Color Syntax

The general look of an rgb declaration is rgb(red,green,blue);

RGB has the following syntax:

• the keyword rgb followed by a set of parentheses ()
• three numeric decimal values sepated by commas inside the parentheses (which represent the three colors),
• and finally it ends with a semicolon.

Make sure you don’t leave any spaces between anything.

Taking again the cyan example, the equivalent rgb code is:

The color red is not showing whereas green and blue are at their brightest and at their max.

• White is rgb(255,255,255)
• Black is rgb(0,0,0)
• Red is rgb(255,0,0)
• Green is rgb(0,255,0)
• Blue is rgb(0,0,255)

Lots of Options with RGB

With RGB, each value is mixed in with the rest and together they create a wide range of hues. You can even create new color combinations, making it the designer’s dream.

In the rgb color system, there are three values you can use, and each value can be one of 256 possible values.

That makes for 256 * 256 * 256 = 16,777,216 color options in total to choose from!

RGB Opacity

By default all rgb colors are fully opaque.

We have the ability to make colors more transparent by changing the opacity with the rgba() selector.

The rgb part stays the same, but the fourth value, a ,stands for alpha .

We can give a a number that is either 0 or 1 to describe how opaque we want our color to be. 0 is totally see-through and trasnparent and 1 is totally opaque.

We’ll use the cyan example again, but this time we’ll make it have half opacity.

In CSS there is also the opacity selector.

We’ll use the previous HTML and add the opacity selector to our section element with a class .intro in our CSS:

Notice that this makes the whole tag transparent, including the background, the heading, the heading’s backgorund – everything.

The power of rgba() is that it allows us to make just the background see-through, for example, or we can make just the heading transparent. It will not affect the whole tag and all the content inside it.

Now if we remove the line from above and we update the background-color selector to background-color: rgb(232, 206, 191,0.3); , we see that it doesn’t affect the heading:

Conclusion

I hope this has given you a good overview of the RGB color model, its syntax, and how it works. We also briefly compared it to other color models in CSS.

I hope you found this of value and thank you for reading.

Источник