Color codes in CSS are used to specify colors. Typically, color codes or color values are used to set a color for either the foreground of an element (eg, text, link color) or the element's background (background, block color). They can also be used to change button color, borders, marker, hover and other decorative effects.
You can set your color values in various formats. The following table lists all possible formats:
These formats are described in more detail below.
CSS Colors - Hex Codes
Hexadecimal color code is a six-digit color representation. The first two digits (RR) are the red value, the next two are the green value (GG) and the last two are the blue value (BB).
CSS Colors - Short Hex Codes
Short hexadecimal color code is a shorter form of six-character notation. In this format, each digit is repeated to produce the equivalent six-digit color value. For example: #0F0 becomes #00FF00.
The hexadecimal value can be taken from any graphics software such as Adobe Photoshop, Core Draw, etc.
Each hexadecimal color code in CSS will be preceded by a "#" hash sign. The following are examples of the use of hexadecimal notation.
CSS Colors - RGB Values
RGB value is a color code that is set using the rgb() property. This property takes three values: one each for red, green, and blue. The value can be an integer, from 0 to 255, or a percentage.
Note: Not all browsers support the rgb() color property, so it's not recommended to use it.
Below is an example showing multiple colors using RGB values.
Color code generator
You can create millions of color codes with our service.
Safe Browser Colors
Below is a table of 216 colors that are the most secure and computer independent. These colors in CSS range from 000000 to FFFFFF hex code. They are safe to use as they ensure that all computers will display color correctly when working with the 256 color palette.
Table of "safe" colors in CSS | |||||
#000000 | #000033 | #000066 | #000099 | #0000CC | #0000FF |
#003300 | #003333 | #003366 | #003399 | #0033CC | #0033FF |
#006600 | #006633 | #006666 | #006699 | #0066CC | #0066FF |
#009900 | #009933 | #009966 | #009999 | #0099CC | #0099FF |
#00CC00 | #00CC33 | #00CC66 | #00CC99 | #00CCCC | #00CCFF |
#00FF00 | #00FF33 | #00FF66 | #00FF99 | #00FFCC | #00FFFF |
#330000 | #330033 | #330066 | #330099 | #3300CC | #3300FF |
#333300 | #333333 | #333366 | #333399 | #3333CC | #3333FF |
#336600 | #336633 | #336666 | #336699 | #3366CC | #3366FF |
#339900 | #339933 | #339966 | #339999 | #3399CC | #3399FF |
#33CC00 | #33CC33 | #33CC66 | #33CC99 | #33CCCC | #33CCFF |
#33FF00 | #33FF33 | #33FF66 | #33FF99 | #33FFCC | #33FFFF |
#660000 | #660033 | #660066 | #660099 | #6600CC | #6600FF |
#663300 | #663333 | #663366 | #663399 | #6633CC | #6633FF |
#666600 | #666633 | #666666 | #666699 | #6666CC | #6666FF |
#669900 | #669933 | #669966 | #669999 | #6699CC | #6699FF |
#66CC00 | #66CC33 | #66CC66 | #66CC99 | #66CCCC | #66CCFF |
#66FF00 | #66FF33 | #66FF66 | #66FF99 | #66FFCC | #66FFFF |
#990000 | #990033 | #990066 | #990099 | #9900CC | #9900FF |
#993300 | #993333 | #993366 | #993399 | #9933CC | #9933FF |
#996600 | #996633 | #996666 | #996699 | #9966CC | #9966FF |
#999900 | #999933 | #999966 | #999999 | #9999CC | #9999FF |
#99CC00 | #99CC33 | #99CC66 | #99CC99 | #99CCCC | #99CCFF |
#99FF00 | #99FF33 | #99FF66 | #99FF99 | #99FFCC | #99FFFF |
#CC0000 | #CC0033 | #CC0066 | #CC0099 | #CC00CC | #CC00FF |
#CC3300 | #CC3333 | #CC3366 | #CC3399 | #CC33CC | #CC33FF |
#CC6600 | #CC6633 | #CC6666 | #CC6699 | #CC66CC | #CC66FF |
#CC9900 | #CC9933 | #CC9966 | #CC9999 | #CC99CC | #CC99FF |
#CCCC00 | #CCCC33 | #CCCC66 | #CCCC99 | #CCCCCC | #CCCCFF |
#CCFF00 | #CCFF33 | #CCFF66 | #CCFF99 | #CCFFCC | #CCFFFF |
#FF0000 | #FF0033 | #FF0066 | #FF0099 | #FF00CC | #FF00FF |
#FF3300 | #FF3333 | #FF3366 | #FF3399 | #FF33CC | #FF33FF |
#FF6600 | #FF6633 | #FF6666 | #FF6699 | #FF66CC | #FF66FF |
#FF9900 | #FF9933 | #FF9966 | #FF9999 | #FF99CC | #FF99FF |
#FFCC00 | #FFCC33 | #FFCC66 | #FFCC99 | #FFCCCC | #FFCCFF |
#FFFF00 | #FFFF33 | #FFFF66 | #FFFF99 | #FFFFCC | #FFFFFF |
Color in CSS can be set in different ways:
- by name,
- by hexadecimal value,
- in RGB and RGBA formats,
- in HSL and HSLA formats.
Set color by name
Browsers support specifying certain colors for elements by name. In this table, some keywords (English color names) used to set color properties, RGB code, Hex code (HEX) and HSL code.
Name | Color | RGB | HEX | HSL | Description |
---|---|---|---|---|---|
white | rgb(255, 255, 255) | #fffff or #fff | hsl(0, 0%, 100%) | White | |
silver | rgb(192, 192, 192) | #c0c0c0 | hsl(0, 0%, 75%) | Gray | |
gray | rgb(128, 128, 128) | #808080 | hsl(0, 0%, 50%) | Dark grey | |
black | rgb(0, 0, 0) | #000000 or #000 | hsl(0, 0%, 0%) | The black | |
maroon | rgb(128, 0, 0) | #800000 | hsl(0, 100%, 25%) | Dark red | |
red | rgb(255, 0, 0) | #ff0000 or #f00 | hsl(0, 100%, 50%) | Red | |
orange | rgb(255, 165, 0) | #ffa500 | hsl(38.8, 100%, 50%) | Orange | |
yellow | rgb(255, 255, 0) | #ffff00 or #ff0 | hsl(60, 100%, 50%) | Yellow | |
olive | rgb(128, 128, 0) | #808000 | hsl(60, 100%, 25%) | Olive | |
lime | rgb(0, 255, 0) | #00ff00 or #0f0 | hsl(120, 100%, 50%) | light green | |
green | rgb(0, 128, 0) | #008000 | hsl(120, 100%, 25%) | Green | |
aqua | rgb(0, 255, 255) | #00ffff or #0ff | hsl(180, 100%, 50%) | Blue | |
blue | rgb(0, 0, 255) | #0000ff or #00f | hsl(240, 100%, 50%) | Blue | |
navy | rgb(0,0,128) | #000080 | hsl(240, 100%, 25%) | Dark blue | |
teal | rgb(0, 128, 128) | #008080 | hsl(180, 100%, 25%) | blue green | |
fuchsia | rgb(255, 0, 255) | #ff00ff or #f0f | hsl(300, 100%, 50%) | Pink | |
purple | rgb(128, 0, 128) | #800080 | hsl(300, 100%, 25%) | Purple |
This is an example of the use of color names, the color names are taken from the extended table.
Here is how this code works:
Setting color with RGB
RGB is an additive color model. In English addition- addition. RGB is an abbreviation of English words: Red, Green, Blue - red, green, blue). From this it is clear that in the RGB model, colors are synthesized by adding three colors (red, green, blue) in various quantities.
By mixing red, green and blue colors, you can get several million shades. All possible combinations are stored in the memory of computers.
Get to the point.
To set properties in this format, the notation rgb(r, g, b) is used, where r, g, b are the three channels for each color (red, green, blue). Values for each channel are set in the range from 0 to 255.
Code example.
To make everything clear, I will give an example code:
This is how this example should work:
Fig.1. Colors in RGB.Explanations for example.
At the beginning of the page, we create the div.rgb class, it is needed so that the blocks created by the tag
Next, in the code set the background color of the block
Try editing this example to include your own values, like rgb(100, 100, 100) .
Setting color with RGBA
CSS3 introduced a new tool for working with color - the RGBA format. It can be called an evolution of the RGB model, but with the addition of one new channel - A or alpha channel. This channel sets the transparency of the color. Its values are set in the range from 0 to 1. A value equal to 0 corresponds to full transparency, 1 to full opacity (the color will be the same as it is set in the first three RGB channels), and intermediate values, like 0.4 or 0.6, to varying degrees of translucency.
Code example.
Here is how it will work:
This code is visually similar to the following, which uses the RGB model to set the color value:
Here is his result:
An alpha channel value equal to zero makes any color invisible - absolutely transparent, a value equal to one translates the color in the RGB code without changes. The rgba(255,0,0,1.0) property shows the color red rgb(255, 0, 0) .
By hexadecimal value (HEX code)
In everyday life, we use the decimal system of counting. Its origins are very simple - we have ten fingers on our hands, and it was convenient to count on fingers in life. If there are ten digits in the decimal system: from 0 to 9, and the number 10 is the next digit, then there are 16 digits in the hexadecimal number system, and the next digit will be the number 16.
To indicate color codes, ordinary decimal digits from 0 to 9 are used as hexadecimal digits and Latin letters from A to F are used to indicate numbers from 10 to 15, that is, (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). For clarity, let's summarize this in a table:
To write hexadecimal numbers greater than F (15 decimal), as in the decimal system, they also use the union of two digits, but already hexadecimal, which is obvious. So, to write the decimal number 255 in hexadecimal, the notation FF is used.
The hexadecimal system is more understandable to the computer, it processes the values given by the hexadecimal value faster.
To specify a color in hexadecimal system, precede the numeric value with a "#" sign, example: #FFC0CB . The #FFC0CB value itself consists of three hexadecimal digits FF , C0 and CB . The meaning of this entry is the same as setting the color in RGB format (rgb(r, g, b) ) - each hexadecimal digit in the HEX code indicates the color saturation in its RGB model channel.
This code will display the following elements:
And here is a picture with the result from the "Setting color with RGB" section on this page above.
Fig.1. Colors in RGB.We see that the colors are identical.
An abbreviated notation for the HEX color code is allowed: a 6-digit number can be written as a 3-digit number. This is only valid if two digits in the color value of the same channel are repeated.
That is, the following abbreviation is acceptable:
For example, the color #ff22aa can be written as #f2a , or the color #44aa22 can be written as #4a2 .
Setting color with HSL
CSS3 has a new format for specifying colors.
The HSL format is an abbreviation of the English words: Hue (hue), Saturate (saturation) and Lightness (lightness).
Hue in HSL is a color value on a special color wheel (Figure 2) and it is specified in degrees. If we draw analogies with the RGB model, then 0° corresponds to red, 120° corresponds to green, and 240° corresponds to blue.
The hue value will change from 0 to 359.
Figure 2. HSL color wheel.
The second value - saturation (Saturate) is set as a percentage. At 100% saturation, the color is as "juicy" as possible, as the saturation indicator moves towards 0%, the color becomes more and more dull and rolls into gray.
The third value - lightness (Lightness) is also set as a percentage. The higher the percentage, the brighter the color will be. The extreme values of 0% and 100% will indicate respectively black (lack of light) and white (exposed) colors, and it does not matter which color from the color wheel was selected in the first channel. The optimal value can be considered the value of color brightness equal to 50%.
Color setting with HSLA
The HSLA format is related to HSL, as is RGB to RGBA. In the HSLA format, as well as in RGBA, an alpha channel is added that is responsible for color transparency.
A color specified in HSL format is easier to read. We can say that it is intuitive. For example, the code hsl(120,60%,50%) can represent the final color if there is a picture of the HSL color wheel in memory. This cannot be said about the RGB and HEX formats, the color code specified in these formats becomes clear only after it is rendered on the monitor.
New formats in CSS3 (HSL, HSLA and RGBA) work in browsers since versions: IE 9.0, Opera 10.0 Firefox 3.0. How to make styles work on older browsers?
Someblock ( background-color: rgb(255,50,50); background-color: rgba(255,50,50,0.85) )
When using this code in older browsers, the background color for the .somebloсk class, although not using an alpha channel, will be displayed in RGB format.
Hexadecimal numbers are used to specify colors. The hexadecimal system, unlike the decimal system, is based, as its name implies, on the number 16. The numbers will be the following: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C , D, E, F. Numbers from 10 to 15 are replaced by Latin letters. Numbers greater than 15 in the hexadecimal system are formed by combining two numbers into one. For example, the number 255 in decimal corresponds to the number FF in hexadecimal. To avoid confusion in the definition of the number system, the hexadecimal number is preceded by the hash symbol #, for example #666999. Each of the three colors - red, green and blue - can take values from 00 to FF. Thus, the designation of the color is divided into three components #rrggbb, where the first two characters mark the red component of the color, the two middle ones mark green, and the last two mark blue. It is allowed to use the abbreviated form #rgb, where each character should be doubled. Thus, the entry #fe0 should be regarded as #ffee00.
by name
Internet Explorer | Chrome | Opera | safari | Firefox | Android | iOS |
4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Browsers support some colors by name. In table. 1 shows the names, hex code, values in RGB, HSL format and description.
Name | Color | The code | RGB | HSL | Description |
---|---|---|---|---|---|
white | #fffff or #fff | rgb(255,255,255) | hsl(0.0%,100%) | White | |
silver | #c0c0c0 | rgb(192,192,192) | hsl(0.0%,75%) | Gray | |
gray | #808080 | rgb(128,128,128) | hsl(0.0%,50%) | Dark grey | |
black | #000000 or #000 | rgb(0,0,0) | hsl(0,0%,0%) | The black | |
maroon | #800000 | rgb(128,0,0) | hsl(0,100%,25%) | Dark red | |
red | #ff0000 or #f00 | rgb(255,0,0) | hsl(0,100%,50%) | Red | |
orange | #ffa500 | rgb(255,165,0) | hsl(38.8,100%,50%) | Orange | |
yellow | #ffff00 or #ff0 | rgb(255,255,0) | hsl(60,100%,50%) | Yellow | |
olive | #808000 | rgb(128,128,0) | hsl(60,100%,25%) | Olive | |
lime | #00ff00 or #0f0 | rgb(0,255,0) | hsl(120,100%,50%) | light green | |
green | #008000 | rgb(0,128,0) | hsl(120,100%,25%) | Green | |
aqua | #00ffff or #0ff | rgb(0,255,255) | hsl(180,100%,50%) | Blue | |
blue | #0000ff or #00f | rgb(0,0,255) | hsl(240,100%,50%) | Blue | |
navy | #000080 | rgb(0,0,128) | hsl(240,100%,25%) | Dark blue | |
teal | #008080 | rgb(0,128,128) | hsl(180,100%,25%) | blue green | |
fuchsia | #ff00ff or #f0f | rgb(255,0,255) | hsl(300,100%,50%) | Pink | |
purple | #800080 | rgb(128,0,128) | hsl(300,100%,25%) | Purple |
With RGB
Internet Explorer | Chrome | Opera | safari | Firefox | Android | iOS |
5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
You can define a color using the red, green, and blue values in decimal terms. Each of the three color components takes a value from 0 to 255. It is also acceptable to set the color as a percentage, while 100% will correspond to the number 255. First, the rgb keyword is specified, and then the color components are specified in brackets, separated by commas, for example rgb(255 , 128, 128) or rgb(100%, 50%, 50%).
RGBA
Internet Explorer | Chrome | Opera | safari | Firefox | Android | iOS |
9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
The RGBA format is similar in syntax to RGB, but includes an alpha channel that sets the element's transparency. A value of 0 is fully transparent, 1 is opaque, and an intermediate value like 0.5 is translucent.
RGBA is added to CSS3, so validation of CSS code should be carried out according to this version. It should be noted that the CSS3 standard is still under development and some of its features may change. For example, an RGB color added to the background-color property passes validation, but one added to the background property does not. At the same time, browsers quite correctly understand the color for both properties.
HSL
Internet Explorer | Chrome | Opera | safari | Firefox | Android | iOS |
9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
The name of the HSL format is formed from a combination of the first letters Hue (hue), Saturate (saturation) and Lightness (lightness). Hue is the color value on the color wheel (Fig. 1) and is specified in degrees. 0° is red, 120° is green, and 240° is blue. Hue value can vary from 0 to 359.
Rice. 1. Color wheel
Saturation is the intensity of a color, measured as a percentage from 0% to 100%. A value of 0% indicates no color and a shade of gray, 100% is the maximum saturation value.
Lightness sets how bright the color is and is specified as a percentage from 0% to 100%. Small values make the color darker, while high values make it lighter, extreme values of 0% and 100% correspond to black and white.
HSLA
Internet Explorer | Chrome | Opera | safari | Firefox | Android | iOS |
9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
The HSLA format is similar in syntax to HSL, but includes an alpha channel that sets the element's transparency. A value of 0 is fully transparent, 1 is opaque, and an intermediate value like 0.5 is translucent.
Color values in RGBA, HSL, and HSLA formats are added to CSS3, so when using these formats, check the code for validity against the version.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
A warning
All methods of catching a lion listed on the site are theoretical and based on computational methods. The authors do not guarantee your safety when using them and disclaim any responsibility for the result. Remember, the lion is a predator and a dangerous animal!
The result of this example is shown in Fig. 2.
Rice. 2. Colors on the web page
HEX/HTML
A color in HEX format is nothing more than a hexadecimal representation of RGB.
Colors are represented as three groups of hexadecimal digits, where each group is responsible for its own color: #112233, where 11 is red, 22 is green, 33 is blue. All values must be between 00 and FF.
Many applications accept a shorthand notation for hexadecimal colors. If each of the three groups contains the same characters, for example #112233, then they can be written as #123.
- h1 ( color: #ff0000; ) /* red */
- h2 ( color: #00ff00; ) /* green */
- h3 ( color: #0000ff; ) /* blue */
- h4 ( color: #00f; ) /* same blue, shorthand */
RGB
The RGB (Red, Green, Blue) color space consists of all possible colors that can be obtained by mixing red, green, and blue. This model is popular in photography, television, and computer graphics.
RGB values are specified as an integer between 0 and 255. For example, rgb(0,0,255) is displayed as blue because the blue parameter is set to its highest value (255) and the rest are set to 0.
Some applications (particularly web browsers) support RGB percentages (from 0% to 100%).
- h1 ( color: rgb(255, 0, 0); ) /* red */
- h2 ( color: rgb(0, 255, 0); ) /* green */
- h3 ( color: rgb(0, 0, 255); ) /* blue */
- h4 ( color: rgb(0%, 0%, 100%); ) /* same blue, percentage notation */
RGB color values are supported in all major browsers.
RGBA
Recently, modern browsers have learned to work with the RGBA color model, an extension of RGB with support for an alpha channel that determines the opacity of an object.
The RGBA color value is specified as: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
- h1 ( color: rgb(0, 0, 255); ) /* blue in regular RGB */
- h2 ( color: rgba(0, 0, 255, 1); ) /* same blue in RGBA because opacity: 100% */
- h3 ( color: rgba(0, 0, 255, 0.5); ) /* opacity: 50% */
- h4 ( color: rgba(0, 0, 255, .155); ) /* opacity: 15.5% */
- h5 ( color: rgba(0, 0, 255, 0); ) /* completely transparent */
RGBA is supported in IE9+, Firefox 3+, Chrome, Safari, and Opera 10+.
HSL
The HSL color model is a representation of the RGB model in a cylindrical coordinate system. HSL represents colors in a way that is more intuitive and easy to understand than typical RGB. The model is often used in graphics applications, in color palettes, and for image analysis.
HSL stands for Hue (color / hue), Saturation (saturation), Lightness / Luminance (lightness / lightness / luminosity, not to be confused with brightness).
Hue sets the position of the color on the color wheel (from 0 to 360). Saturation is a saturation percentage value (from 0% to 100%). Lightness is a percentage of lightness (from 0% to 100%).
- h1 ( color: hsl(120, 100%, 50%); ) /* green */
- h2 ( color: hsl(120, 100%, 75%); ) /* light green */
- h3 ( color: hsl(120, 100%, 25%); ) /* dark green */
- h4 ( color: hsl(120, 60%, 70%); ) /* pastel green */
HSL is supported in IE9+, Firefox, Chrome, Safari, and Opera 10+.
HSLA
Similar to RGB/RGBA, HSL has an HSLA mode with support for an alpha channel to specify the opacity of an object.
The HSLA color value is specified as: hsla(hue, saturation, lightness, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
- h1 ( color: hsl(120, 100%, 50%); ) /* green in regular HSL */
- h2 ( color: hsla(120, 100%, 50%, 1); ) /* same green in HSLA because opacity: 100% */
- h3 ( color: hsla(120, 100%, 50%, 0.5); ) /* opacity: 50% */
- h4 ( color: hsla(120, 100%, 50%, .155); ) /* opacity: 15.5% */
- h5 ( color: hsla(120, 100%, 50%, 0); ) /* fully transparent */
CMYK
The CMYK color model is often associated with color printing, with printing. CMYK (unlike RGB) is a subtractive model, meaning that higher values are associated with darker colors.
Colors are determined by the ratio of cyan (Cyan), magenta (Magenta), yellow (Yellow), with the addition of black (Key / blackK).
Each of the numbers that defines a color in CMYK represents the percentage of ink of a given color that makes up the color combination, or rather, the size of the raster dot displayed on the phototypesetter on the film of this color (or directly on the printing plate in the case of CTP).
For example, to get the color "PANTONE 7526" you would mix 9 parts cyan, 83 parts magenta, 100 yellow, and 46 black. This can be denoted as follows: (9,83,100,46). Sometimes they use such designations: C9M83Y100K46, or (9%, 83%, 100%, 46%), or (0.09 / 0.83 / 1.0 / 0.46).
HSB/HSV
HSB (also known as HSV) is similar to HSL, but they are two different color models. They are both based on cylindrical geometry, but HSB/HSV is based on the "hexcone" model while HSL is based on the "bi-hexcone" model. Artists often prefer to use this model, it is generally accepted that the HSB / HSV device is closer to natural color perception. In particular, the HSB color model is used in Adobe Photoshop.
HSB / HSV stands for Hue (color / hue), Saturation (saturation), Brightness / Value (brightness / value).
Hue sets the position of the color on the color wheel (from 0 to 360). Saturation is a saturation percentage value (from 0% to 100%). Brightness is a percentage of brightness (from 0% to 100%).
XYZ
The XYZ color model (CIE 1931 XYZ) is a purely mathematical space. Unlike RGB, CMYK, and other models, in XYZ the primary components are "imaginary", meaning you can't map X, Y, and Z to any mix color set. XYZ is the master model for almost all other color models used in technical fields.
LAB
The LAB color model (CIELAB, "CIE 1976 L*a*b*") is calculated from the CIE XYZ space. The goal of Lab was to create a color space in which color change would be more linear in terms of human perception (compared to XYZ), that is, the same change in color coordinate values in different areas of the color space would produce the same feeling of color change.