HOW TO USE HEX, COLOR CODES AND RGBA VALUES IN CSS
HEX IN CSS
The commonly used way or expressing colors using the hexadecimal or hex values. Hex values are just a different way to represent RGB values. Hex colors can be 0-9 and A-F. Instead of using three numbers between 0-255, you use six hexadecimal numbers. The Hex values are always prefixed with a # symbol. A hexadecimal color is specified with #RRGGBB, where the RR means red, GG means Green, BB means blue. hexadecimal integers specify the components of the color. For example, #ff0000 is displayed as red because red is usually set to the highest level (ff) and others are set to the lowest value (00).
COLOR IN CSS
Color is an CSS element SETTING COLOR IN CSS There are several ways to set colour in CSS, those ways are: a) Color keyboards b) RGB c) RGBA d) HSLA e) Hexadecimal
HOW TO ENTER THE COLOR CODE IN CSS
The color code can be entered in CSS by adding the appropriate CSS selector to define tye color property with tye desired value. Example: if you want to change the color for everything on a paragraph to a certain color, you add p (color: #000080;) to the head section of your file. The following are color pickers which provides color values in hexadecimal, color names and RGB. The color pickers can only be used within the CSS code. Some Basic CSS Colors are; Color Name Hex Code RGB Decimal Code RGB
Red FF0000 255,0,0 Orange FFA500 255,165,0 Yellow FFFF00 255,255,0 Olive 808000 128,128,0
LIST OF COLOR VALUES Here's a list of color values that can be used with CSS.
CSS Named Colors CSS transparent Keyword CSS currentcolor Keyword CSS 3-Digit Hex Codes CSS 4-Digit Hex Codes CSS 6-Digit Hex Codes CSS 8-Digit Hex Codes CSS rgb() Function CSS rgba() Function CSS hsl() Function CSS hsla() Function CSS hwb() Function CSS System Colors
LIST OF COLOR PROPERTIES
Here's a list of color-related properties you can use with CSS.
background-color background border border-bottom-color border-color border-left-color border-right-color border-top-color box-shadow caret-color color column-rule column-rule-color filter opacity outline-color outline text-decoration text-decoration-color text-shadow.
RGBA VALUES IN CSS
RGBA is a type of CSS color value that allows us to set a color and also its opacity/transparency. 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). RGBA is a four-channel format containing information for Red, Green, Blue, and an Alpha value. The CSS function rgb() has a wide browser support.
HOW TO GIVE RGB VALUES IN CSS
The rgb() function define colors using the Red-green-blue (RGB) model. An RGB color value is specified with: rgb(red, green, blue). Each parameter defines the intensity of that color and can be an integer between 0 and 255 or a percentage value (from 0% to 100%). RGBA is an extension of the RGB color model.
HOW THE RGB COLOR MODEL WORKS
The RGB color model is simply a way to describe a color using the amount of red, green, and blue the color has. It’s like mixing watercolor paints or oil paints to get the actual color we want. Example using how to produce a pure blue color. To do this, you wouldn’t want to mix red and green into the color. So we set red and green to 0%, and blue to 100%. rgb(0%, 0%, 100%). This gives a pure blue result.
HOW IS RGBA COLOR CALCULATED
To get the percentage equivalent, simply divide the integer by 255 and then multiply by 100%. Going off the previous example, if the RGBA color value is rgba(255, 242, 0, 0.5) then: Red: (255/255) x 100% = 100% Green: (242/255) x 100% = 94.9%