Rgba with hex css

CSS Colors

CSS supports 140+ color names, HEX values, RGB values, RGBA values, HSL values, HSLA values, and opacity.

RGBA Colors

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). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

The following example defines different RGBA colors:

Example

HSL Colors

HSL stands for Hue, Saturation and Lightness.

An HSL color value is specified with: hsl(hue, saturation, lightness).

1. Hue is a degree on the color wheel (from 0 to 360):
   • 0 (or 360) is red
   • 120 is green
   • 240 is blue
2. Saturation is a percentage value: 100% is the full color.
3. Lightness is also a percentage; 0% is dark (black) and 100% is white.

The following example defines different HSL colors:

Example

HSLA Colors

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), where the alpha parameter defines the opacity. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

The following example defines different HSLA colors:

Example

Opacity

The CSS opacity property sets the opacity for the whole element (both background color and text will be opaque/transparent).

The opacity property value must be a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Notice that the text above will also be transparent/opaque!

The following example shows different elements with opacity:

Источник

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:

Источник

How To Use CSS Hex Code Colors with Alpha Values

In CSS, there are several formats for colors that can be used. Common ones include hex (hexadecimal) codes, RGB (red, green, blue), RGBA (red, green, blue, alpha), and HSL (hue, saturation, lightness).

In this article, you will review hex color codes and explore using alpha values for transparency.

Prerequisites

If you would like to follow along with this article, you will need:

• Some familiarity with CSS is required. You may benefit from How To Build a Website With CSS tutorial series if you need a refresher.
• A modern web browser that supports #rrggbbaa hex color notation.

Using Color Keywords

First, CSS supports color keywords. Most browsers and devices can render these named colors into color values.

There are about 140 named colors in CSS (like red , blue , lavender , etc.).

For example, if you wanted your text to have red color, you could use the keyword red :

Different value formats, like hex codes, will allow you to customize beyond 140 colors.

Understanding Hexadecimal Values

You are probably most used to counting with decimal values (or base 10):

In others words, a single-digit only has 10 possible values ( 0 to 9 ), and after that, it must increase to two digits ( 10 ).

Hexadecimal values are base 16 instead of base 10:

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F 

It uses the letters A , B , C , D , E , and F to represent the additional values.

For example, these are all valid hexadecimal values:

Next, learn how to use hexadecimal values in CSS styles.

Using Hexadecimal Values in CSS

When styling an element with CSS, you will often be changing the color values for properties like font color , background-color , border-color , etc.

To create custom colors, you can use combinations of the hexadecimal numbers described above to create hex codes, which represent specific colors.

CSS hex codes must begin with a “number sign” (#) (also known as a pound sign or a hash symbol). Then, six digits of hexadecimal values. Each pair of two digits represents red, green, and blue. The pattern looks like #RRGGBB (where red is R , green is G , and blue is B ).

Colors are represented by a combination of red, green, and blue values. The lowest value ( 00 ) will be the darkest version of the color (closest to black), and the highest value ( FF ) will be the lightest version of the color (closest to white).

Setting all three pairs to the lowest value ( 00 ) will produce a solid black color:

Setting all three pairs to the highest value ( FF ) will produce a solid white color:

Let’s say you wanted the heading text color to be a bright red. To achieve this, you can set the red ( RR ) value to the highest possible value ( FF ). Since you do not want any green or blue, you can set the green ( GG ) and blue ( BB ) values each to the lowest possible value ( 00 ).

By changing the amount of red, blue, and green, you can produce a variety of colors. #DC143C has a large amount of red ( DC ) — this will produce a “Crimson” color. #EE82EE has large amounts of red ( EE ) and blue ( EE ) — this will produce a “Violet” color. #40E0D0 has large amounts of green ( E0 ) and blue ( D0 ) — this will produce a “Turquoise” color.

Note: CSS hex codes are not case-sensitive. This means the alphabetic characters can be upper or lowercase — #ff0000 is equivalent to #FF0000 . CSS also supports shorthand values. This means that #F00 is equivalent to #FF0000 .

The approach you adopt should adhere to the coding standards used by your project.

Next, learn how to use alpha values with CSS hex codes.

Adding an Alpha Value to CSS Hex Codes

Using an alpha value to update a color’s transparency will change the hex code format from #RRGGBB to #RRGGBBAA (where alpha is A ). The first six values (the red, green, and blue ones) remain the same.

The AA value in #RRGGBBAA can range from the lowest value possible ( 00 ) to the highest value possible ( FF ). Lowering the value will cause the visibility to become fainter and fainter until it becomes transparent. Raising the value will cause the visibility to become more and more opaque.

Let’s say you want a blue color that is fairly transparent.

First, start with the hex code for the blue color:

div  background-color: #0080FF; > 

Next, you can change the transparency by adding two more values to the hex code. In this example, the alpha value is set to 80 :

div  background-color: #0080FF80; > 

The alpha value in the hexadecimal format can be a little confusing because it’s hard to conceptualize what a base 16 value for transparency will actually look like. However, the benefit is if you’re already using hex codes in your codebase, now you can update them to change the transparency, too! No color format changes required.

Using Chrome DevTools Tip for Picking Colors

One quick tip for seeing your colors in different formats is with the Chrome DevTools.

Once your DevTools panel is open, look for the color your checking in the styles section. Once you find it, you can click the box to the left of the color to adjust the values directly. You can also hold SHIFT and click on the box to toggle through your various format options with the values correctly converted.

This example adjusts the alpha value and color value. Then toggles between hex code format, RGBA format, and HSLA format.

Conclusion

In this article, you reviewed hex color codes and explored using alpha values for transparency.

The browser support for #RRGGBBAA hex codes requires modern browsers. It is not available in older versions of Internet Explorer. Reference Can I Use #rrggbbaa hex color notation to see if this format is suited for the target audience of your project.

If you’d like to learn more about CSS, check out our CSS topic page for exercises and programming projects.

Want to deploy your application quickly? Try Cloudways, the #1 managed hosting provider for small-to-medium businesses, agencies, and developers — for free. DigitalOcean and Cloudways together will give you a reliable, scalable, and hassle-free managed hosting experience with anytime support that makes all your hosting worries a thing of the past. Start with $100 in free credits!

Источник