Hex Colors Cheat Sheet - ByteScout

Hex Colors Cheat Sheet

Looking to start working on your website? Maybe, you are looking to add a flair of colour to the bland black and white terminals.

Colours are of immense importance when we are talking about giving the perfect look and feel to your website. You can specify colours on page level using <body> tag or you can set colours for individual tags using bgcolor attribute. The <body> tag has the following attributes which can be used to set different colours −

  • bgcolor − sets a colour for the background of the page.
  • text − sets a colour for the body text.
  • alink − sets a colour for active links or selected links.
  • link − sets a colour for linked text.
  • vlink − sets a colour for visited links − that is, for the linked text that you have already clicked on.

There are following three different methods to set colours in your web page −

  • Names − You can specify colour names directly like green, blue or red.
  • Hex codes − A six-digit code representing the amount of red, green, and blue that makes up the colour.
  • Colour decimal or percentage values − This value is specified using the rgb( ) property.

Hex Colors Cheat Sheet

How to specify colours?

You can indicate directly the name of the shade that you want to set content or background tone. 16 fundamental named colours can be used in HTML. There are more than 200 distinctive shading names that most of the browsers support.

Colour-code is the way how the computer infers and renders a specific shade. Used heavily in sites and other programming applications, there is no shortage of method using which you specify the colours. The RGB, HSV, HSL, and CMYK are some of the most widely used standards.

Hex colour codes

A hexadecimal colour code is generally a 6 digit representation of the colour. The first two digits stands for the Red channel, the next two are for the Green channel, and the last two are for the Blue channel. Most of the graphical software like an image or video processing software makes heavy use of them. So you can easily find the actual RGB values of a specific shade.

The hex code generally starts with a hash/pound symbol (‘#’). The hash is followed by 6 values taking values between 0-9 and A-F. The hexadecimal value of a single channel can range from 00 (zero in decimal) to FF (255 in decimal).

The colour white, for example, is made by mixing each of the three primary colours at their full intensity, resulting in the Hex colour code of #FFFFFF. Black, on the other hand, signifies the absence of any colours. So it is expressed as #000000 in the hexadecimal colour code.

All the other colours are simply a combination of these three values. When only one of the channels have the highest possible intensity while the others are absolutely zero, we get the primary colours (red, green, and blue).

With modern browsers supporting the full spectrum of 24-bit colour, there are 16,777,216 different colour possibilities. Use our colour picker to explore all 16.7 million of them, or if that’s too many, check out our colour charts for a selection of palettes focused on flat design, Material design and web-safe colours.

Colour schemes

HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value) are alternative colour schemes of the RGB representation. These models were popularised back in 1970 by the researchers. The HSV colour space though was invented by Georges Valensi almost three decades earlier in 1938. This scheme of representing the colours models more closely how we, humans, actually see and perceive colours.

In these models, colours of each hue are arranged in a radial slice, around a central axis of neutral colours which ranges from black at the bottom to white at the top. The HSV scheme tries to emulate how we mix paints of various colours to come up with a new one. The saturation works like the tints of brightly coloured paints, while the values resemble the mixture of those paints with varying amounts of black or white paint

The HSL model attempts to resemble more perceptual colour models such as the Natural Color System, placing fully saturated colours around a circle at a lightness value of ​1⁄2, where a lightness value of 0 or 1 is fully black or white, respectively.

The CMYK (Cyan, Magenta, Yellow, and Key/Black) colour scheme is an example of what is technically known as a ‘subtractive colour scheme’. The CMYK model works by partially or entirely masking colours on a lighter, usually white, background.

By far the most popular RGB scheme is an ‘additive colour scheme‘. They try to emulate the target colour by ‘adding’ the primary coloured lights (Red, Green, and Blue). The CMYK scheme is widely used in print media like the newspaper. The CMYK model works by partially or entirely masking colours on a lighter, usually white, background. The ink reduces the light that would otherwise be reflected.

Looking for some great colour combinations? We have listed the top colours that you might need along with the hex colour codes.

HTML

In HTML (or CSS), colours can be specified in many different ways. Some of these methods are: by specifying the colour name, by specifying the RGB values, or by specifying the hexadecimal equivalent of the RGB value. You can also use the HSL equivalent of the colour, but it is less intuitive than the RGB or HEX value. In the following table, we list 32 of the most useful colours that you might need. We also include the HSV and CMYK equivalent of the colours which some other platforms use for representing the colour.

Name

HEX RGB (in range 0-255) HSL (in ° and %) HSV (in ° and %)

CMYK (in %)

Black #000000 (0, 0, 0) (0°, 0, 0) (0, 0, 0) (0, 0, 0, 100)
Silver #C0C0C0 (192, 192, 192) (0°, 0, 75.3) (0, 0, 75) (0, 0, 0, 25)
Maroon #800000 (128, 0, 0) (0°, 100, 25) (0, 100, 50) (0, 50, 50, 50)
Red #FF0000 (255, 0, 0) (0°, 100, 50) (0, 100, 100) (0, 100, 10, 0)
Green #008000 (0, 128, 0) (120°, 100, 25) (120, 100, 50) (50, 0, 50, 50)
Lime #00FF00 (0, 255, 0) (120°, 100, 50) (120,100,100) (100, 0, 100, 0)
Navy #000080 (0, 0, 128) (240°, 100, 25) (240, 100, 50) (100, 100, 0, 49)
Blue #0000FF (0, 0, 255) (240°, 100, 50) (240, 100, 100) (100, 100, 0, 0)
Gray #808080 (128, 128, 128) (0°, 0, 50) (0, 0, 50) (0, 0, 0, 50)
White #FFFFFF (255, 255, 255) (0°, 0, 100) (0, 0, 100) (0, 0, 0, 0)
Purple #800080 (128, 0, 128) (300°, 100, 25) (300, 100, 50) (0, 50, 0, 50)
Fuchsia #FF00FF (255, 0, 255) (300°, 100, 50) (300, 100, 100) (0, 10, 0, 0)
Olive #808000 (128, 128, 0) (60°, 100, 25) (60, 100, 50) (0, 0, 50, 50)
Yellow #FFFF00 (255, 255, 0) (60°, 100, 50) (60, 100, 100) (0, 0, 100, 0)
Teal #008080 (0, 128, 128) (180°, 100, 25) (180, 100, 50) (50, 0, 0, 50)
Aqua #00FFFF (0, 255, 255) (180°, 100, 50) (180, 100, 100) (100, 0, 0, 0)
Crimson #DC143C (220, 20, 60) (348, 83, 47) (348, 91, 86) (0, 91, 73, 14)
Hot Pink #FF69B4 (255, 105, 180) (330, 100, 71) (330, 59, 100) (0, 59, 29, 0)
Coral #FF7F50 (255, 127, 80) (16, 100, 66) (16, 69, 100) (0, 50, 69, 0)
Gold #FFD700 (255, 215, 0) (51, 100, 50) (51, 100, 100) (0, 16, 100, 0)
Lavender #E6E6FA (230, 230, 250) (240, 67, 94) (240, 8, 98) (8, 8, 0, 2)
Medium Spring Green #00FA9A (0, 250, 154) (157, 100, 49) (157, 100, 98) (100, 0, 38, 2)
Royal Blue #4169E1 (65, 105, 225) (225, 73, 57) (225, 71, 88) (71, 53, 0, 12)
Chocolate #D2691E (210, 105, 30) (25, 75, 47) (25, 86, 82) (0, 50, 86, 18)
Snow #FFFAFA (255, 250, 250) (0, 100, 99) (0, 2, 100) (0, 2, 2, 0)
Slate Gray #708090 (112, 128, 144) (210, 13, 50) (210, 22, 56) (22, 11, 0, 44)
Peru #CD853F (205, 133, 63) (30, 59, 53) (30, 69, 80) (0, 35, 69, 20)
Turquoise #40E0D0 (64, 224, 208) (174, 72, 56) (174, 71, 88) (71, 0, 7, 12)
Violet #EE82EE (238, 130, 238) (300, 76, 72) (300, 45, 93) (0, 45, 0, 7)
Khaki #F0E68C (240, 230, 140) (54, 77, 75) (54, 42, 94) (0, 4, 42, 6)
Sky Blue #87CEEB (135, 206, 235) (197, 71, 73) (197, 43, 92) (43, 12, 0, 8)
Misty Rose #FFE4E1 (255, 228, 225) (6, 100, 94) (6, 12, 100) (0, 11, 12, 0)

Xterm

Xterm is a popular terminal emulating software for the Unix-like operating systems. Xterm is highly configurable and boasts many fancy and unusual features which are not present in the other terminal emulators.

It supports colour texts – one of its many handy features. In the following table, we list some of the most used colour names and their corresponding HEX, RGB, and HSL codes. The first 16 of these colours are system colours.

Name

System/Additional HEX RGB (in range 0-255)

HSL (in ° and %)

Black System #000000 (0, 0, 0) (0, 0, 0)
Navy System #000080 (0, 0, 128) (240, 100, 25)
Maroon System #800000 (128, 0, 0) (0, 100, 25)
Green System #008000 (0, 128, 0) (120, 100, 25)
Olive System #808000 (128, 128, 0) (60, 100, 25)
Purple System #800080 (128, 0, 128) (300, 100, 25)
Teal System #008080 (0, 128, 128) (180, 100, 25)
Silver System #C0C0C0 (192, 192, 192) (0, 0, 75)
Grey System #808080 (128, 128, 128) (0, 0, 50)
Red System #FF0000 (255, 0, 0) (0, 100, 50)
Lime System #00FF00 (0, 255, 0) (120, 100, 50)
Yellow System #FFFF00 (255, 255, 0) (60, 100, 50)
Blue System #0000FF (0, 0, 255) (240, 100, 50)
Fuchsia System #FF00FF (255, 0, 255) (300, 100, 50)
Aqua System #00FFFF (0, 255, 255) (180, 100, 50)
White System #FFFFFF (255, 255, 255) (0, 0, 100)
Grey3 Additional #080808 (8, 8, 8) (0, 0, 3)
Navy Blue Additional #00005F (0, 0, 95) (240, 100, 18)
Dark Green Additional #005F00 (0, 95, 0) (120, 100, 18)
Deep Sky Blue4 Additional #005FAF (0, 95, 175) (07, 100, 34)
Dark Cyan Additional #00AF87 (0, 175, 135) (66, 100, 34)
Light Sea Green Additional #00AFAF (0, 175, 175) (180, 100, 34)
Dark Red Additional #5F0000 (95, 0, 0) (0, 100, 18)
Purple4 Additional #5F0087 (95, 0, 135) (82, 100, 26)
Orange4 Additional #5F5F00 (95, 95, 0) (60, 100, 18)
Royal Blue1 Additional #5F5FFF (95, 95, 255) (240, 100, 68)
Cornflower Blue Additional #5F87FF (95, 135, 255) (225, 100, 68)
Cadet Blue Additional #5FAFAF (95, 175, 175) (180, 33, 52)
Chartreuse3 Additional #5FD700 (95, 215, 0) (3, 100, 42)
Dark Magenta Additional #8700AF (135, 0, 175) (86, 100, 34)
Dark Violet Additional #8700D7 (135, 0, 215) (77, 100, 42)
Orange4 Additional #875F00 (135, 95, 0) (2, 100, 26)
Plum4 Additional #875F87 (135, 95, 135) (300, 17, 45)
Slate Blue1 Additional #875FFF (135, 95, 255) (255, 100, 68)
Yellow4 Additional #878700 (135, 135, 0) (60, 100, 26)
Indian Red Additional #AF5F5F (175, 95, 95) (0, 33, 52)
Medium Orchid Additional #AF5FD7 (175, 95, 215) (280, 60, 60)
Rosy Brown Additional #AF8787 (175, 135, 135) (0, 20, 60)
Gold3 Additional #AFAF00 (175, 175, 0) (60, 100, 34)
Tan Additional #D7AF87 (215, 175, 135) (30, 50, 68)
Thistle3 Additional #D7AFD7 (215, 175, 215) (300, 33, 76)
Light Golden rod2 Additional #D7D787 (215, 215, 135) (60, 50, 68)
Deep Pink2 Additional #FF005F (255, 0, 95) (37, 100, 50)
Light Coral Additional #FF8787 (255, 135, 135) (0, 100, 76)
Orchid2 Additional #FF87D7 (255, 135, 215) (320, 100, 76)
Light Salmon1 Additional #FFAF87 (255, 175, 135) (20, 100, 76)
Navajo White1 Additional #FFD7AF (255, 215, 175) (30, 100, 84)
Cornsilk1 Additional #FFFFD7 (255, 255, 215) (60, 100, 92)

 

   

About the Author

ByteScout Team ByteScout Team of Writers ByteScout has a team of professional writers proficient in different technical topics. We select the best writers to cover interesting and trending topics for our readers. We love developers and we hope our articles help you learn about programming and programmers.  
prev
next