Online HTML Color Codes
Online Web Code Test |
Online Image Picker |
Online Color Picker
HTML Color Codes
HTML color codes and names.
HTML color picker
Red colors
Color | HTML / CSS Color Name |
Hex Code #RRGGBB |
Decimal Code (R,G,B) |
---|---|---|---|
lightsalmon | #FFA07A | rgb(255,160,122) | |
salmon | #FA8072 | rgb(250,128,114) | |
darksalmon | #E9967A | rgb(233,150,122) | |
lightcoral | #F08080 | rgb(240,128,128) | |
indianred | #CD5C5C | rgb(205,92,92) | |
crimson | #DC143C | rgb(220,20,60) | |
firebrick | #B22222 | rgb(178,34,34) | |
red | #FF0000 | rgb(255,0,0) | |
darkred | #8B0000 | rgb(139,0,0) |
Orange colors
Color | HTML / CSS Color Name |
Hex Code #RRGGBB |
Decimal Code (R,G,B) |
---|---|---|---|
coral | #FF7F50 | rgb(255,127,80) | |
tomato | #FF6347 | rgb(255,99,71) | |
orangered | #FF4500 | rgb(255,69,0) | |
gold | #FFD700 | rgb(255,215,0) | |
orange | #FFA500 | rgb(255,165,0) | |
darkorange | #FF8C00 | rgb(255,140,0) |
Yellow colors
Color | HTML / CSS Color Name |
Hex Code #RRGGBB |
Decimal Code (R,G,B) |
---|---|---|---|
lightyellow | #FFFFE0 | rgb(255,255,224) | |
lemonchiffon | #FFFACD | rgb(255,250,205) | |
lightgoldenrodyellow | #FAFAD2 | rgb(250,250,210) | |
papayawhip | #FFEFD5 | rgb(255,239,213) | |
moccasin | #FFE4B5 | rgb(255,228,181) | |
peachpuff | #FFDAB9 | rgb(255,218,185) | |
palegoldenrod | #EEE8AA | rgb(238,232,170) | |
khaki | #F0E68C | rgb(240,230,140) | |
darkkhaki | #BDB76B | rgb(189,183,107) | |
yellow | #FFFF00 | rgb(255,255,0) |
Green colors
Color | HTML / CSS Color Name |
Hex Code #RRGGBB |
Decimal Code (R,G,B) |
---|---|---|---|
lawngreen | #7CFC00 | rgb(124,252,0) | |
chartreuse | #7FFF00 | rgb(127,255,0) | |
limegreen | #32CD32 | rgb(50,205,50) | |
lime | #00FF00 | rgb(0.255.0) | |
forestgreen | #228B22 | rgb(34,139,34) | |
green | #008000 | rgb(0,128,0) | |
darkgreen | #006400 | rgb(0,100,0) | |
greenyellow | #ADFF2F | rgb(173,255,47) | |
yellowgreen | #9ACD32 | rgb(154,205,50) | |
springgreen | #00FF7F | rgb(0,255,127) | |
mediumspringgreen | #00FA9A | rgb(0,250,154) | |
lightgreen | #90EE90 | rgb(144,238,144) | |
palegreen | #98FB98 | rgb(152,251,152) | |
darkseagreen | #8FBC8F | rgb(143,188,143) | |
mediumseagreen | #3CB371 | rgb(60,179,113) | |
seagreen | #2E8B57 | rgb(46,139,87) | |
olive | #808000 | rgb(128,128,0) | |
darkolivegreen | #556B2F | rgb(85,107,47) | |
olivedrab | #6B8E23 | rgb(107,142,35) |
Cyan colors
Color | HTML / CSS Color Name |
Hex Code #RRGGBB |
Decimal Code (R,G,B) |
---|---|---|---|
lightcyan | #E0FFFF | rgb(224,255,255) | |
cyan | #00FFFF | rgb(0,255,255) | |
aqua | #00FFFF | rgb(0,255,255) | |
aquamarine | #7FFFD4 | rgb(127,255,212) | |
mediumaquamarine | #66CDAA | rgb(102,205,170) | |
paleturquoise | #AFEEEE | rgb(175,238,238) | |
turquoise | #40E0D0 | rgb(64,224,208) | |
mediumturquoise | #48D1CC | rgb(72,209,204) | |
darkturquoise | #00CED1 | rgb(0,206,209) | |
lightseagreen | #20B2AA | rgb(32,178,170) | |
cadetblue | #5F9EA0 | rgb(95,158,160) | |
darkcyan | #008B8B | rgb(0,139,139) | |
teal | #008080 | rgb(0,128,128) |
Blue colors
Color | HTML / CSS Color Name |
Hex Code #RRGGBB |
Decimal Code (R,G,B) |
---|---|---|---|
powderblue | #B0E0E6 | rgb(176,224,230) | |
lightblue | #ADD8E6 | rgb(173,216,230) | |
lightskyblue | #87CEFA | rgb(135,206,250) | |
skyblue | #87CEEB | rgb(135,206,235) | |
deepskyblue | #00BFFF | rgb(0,191,255) | |
lightsteelblue | #B0C4DE | rgb(176,196,222) | |
dodgerblue | #1E90FF | rgb(30,144,255) | |
cornflowerblue | #6495ED | rgb(100,149,237) | |
steelblue | #4682B4 | rgb(70,130,180) | |
royalblue | #4169E1 | rgb(65,105,225) | |
blue | #0000FF | rgb(0,0,255) | |
mediumblue | #0000CD | rgb(0,0,205) | |
darkblue | #00008B | rgb(0,0,139) | |
navy | #000080 | rgb(0,0,128) | |
midnightblue | #191970 | rgb(25,25,112) | |
mediumslateblue | #7B68EE | rgb(123,104,238) | |
slateblue | #6A5ACD | rgb(106,90,205) | |
darkslateblue | #483D8B | rgb(72,61,139) |
Purple colors
Color | HTML / CSS Color Name |
Hex Code #RRGGBB |
Decimal Code (R,G,B) |
---|---|---|---|
lavender | #E6E6FA | rgb(230,230,250) | |
thistle | #D8BFD8 | rgb(216,191,216) | |
plum | #DDA0DD | rgb(221,160,221) | |
violet | #EE82EE | rgb(238,130,238) | |
orchid | #DA70D6 | rgb(218,112,214) | |
fuchsia | #FF00FF | rgb(255,0,255) | |
magenta | #FF00FF | rgb(255,0,255) | |
mediumorchid | #BA55D3 | rgb(186,85,211) | |
mediumpurple | #9370DB | rgb(147,112,219) | |
blueviolet | #8A2BE2 | rgb(138,43,226) | |
darkviolet | #9400D3 | rgb(148,0,211) | |
darkorchid | #9932CC | rgb(153,50,204) | |
darkmagenta | #8B008B | rgb(139,0,139) | |
purple | #800080 | rgb(128,0,128) | |
indigo | #4B0082 | rgb(75,0,130) |
Pink colors
Color | HTML / CSS Color Name |
Hex Code #RRGGBB |
Decimal Code (R,G,B) |
---|---|---|---|
pink | #FFC0CB | rgb(255,192,203) | |
lightpink | #FFB6C1 | rgb(255,182,193) | |
hotpink | #FF69B4 | rgb(255,105,180) | |
deeppink | #FF1493 | rgb(255,20,147) | |
palevioletred | #DB7093 | rgb(219,112,147) | |
mediumvioletred | #C71585 | rgb(199,21,133) |
White colors
Color | HTML / CSS Color Name |
Hex Code #RRGGBB |
Decimal Code (R,G,B) |
---|---|---|---|
white | #FFFFFF | rgb(255,255,255) | |
snow | #FFFAFA | rgb(255,250,250) | |
honeydew | #F0FFF0 | rgb(240,255,240) | |
mintcream | #F5FFFA | rgb(245,255,250) | |
azure | #F0FFFF | rgb(240,255,255) | |
aliceblue | #F0F8FF | rgb(240,248,255) | |
ghostwhite | #F8F8FF | rgb(248,248,255) | |
whitesmoke | #F5F5F5 | rgb(245,245,245) | |
seashell | #FFF5EE | rgb(255,245,238) | |
beige | #F5F5DC | rgb(245,245,220) | |
oldlace | #FDF5E6 | rgb(253,245,230) | |
floralwhite | #FFFAF0 | rgb(255,250,240) | |
ivory | #FFFFF0 | rgb(255,255,240) | |
antiquewhite | #FAEBD7 | rgb(250,235,215) | |
linen | #FAF0E6 | rgb(250,240,230) | |
lavenderblush | #FFF0F5 | rgb(255,240,245) | |
mistyrose | #FFE4E1 | rgb(255,228,225) |
Gray colors
Color | HTML / CSS Color Name |
Hex Code #RRGGBB |
Decimal Code (R,G,B) |
---|---|---|---|
gainsboro | #DCDCDC | rgb(220,220,220) | |
lightgray | #D3D3D3 | rgb(211,211,211) | |
silver | #C0C0C0 | rgb(192,192,192) | |
darkgray | #A9A9A9 | rgb(169,169,169) | |
gray | #808080 | rgb(128,128,128) | |
dimgray | #696969 | rgb(105,105,105) | |
lightslategray | #778899 | rgb(119,136,153) | |
slategray | #708090 | rgb(112,128,144) | |
darkslategray | #2F4F4F | rgb(47,79,79) | |
black | #000000 | rgb(0,0,0) |
Brown colors
Color | HTML / CSS Color Name |
Hex Code #RRGGBB |
Decimal Code (R,G,B) |
---|---|---|---|
cornsilk | #FFF8DC | rgb(255,248,220) | |
blanchedalmond | #FFEBCD | rgb(255,235,205) | |
bisque | #FFE4C4 | rgb(255,228,196) | |
navajowhite | #FFDEAD | rgb(255,222,173) | |
wheat | #F5DEB3 | rgb(245,222,179) | |
burlywood | #DEB887 | rgb(222,184,135) | |
tan | #D2B48C | rgb(210,180,140) | |
rosybrown | #BC8F8F | rgb(188,143,143) | |
sandybrown | #F4A460 | rgb(244,164,96) | |
goldenrod | #DAA520 | rgb(218,165,32) | |
peru | #CD853F | rgb(205,133,63) | |
chocolate | #D2691E | rgb(210,105,30) | |
saddlebrown | #8B4513 | rgb(139,69,19) | |
sienna | #A0522D | rgb(160,82,45) | |
brown | #A52A2A | rgb(165,42,42) | |
maroon | #800000 | rgb(128,0,0) |
In HTML, you can specify color using its RGB value (using either hex or RGB notation), or by its color name.
The HTML color picker below makes it easy to choose colors for your website.
The HTML color picker is used to select colors of different shades which we usually can’t remember because they are very large in quantity. Also it is a fact that you cannot name every shade of color as a little bit of difference creates a different shade. Sometimes two or more colors are mixed together to form a new shade of color. So, for this huge variety of colors as we have said, particular names are not possible but every color has a Hex code associated with it. This HTML color picker gives the code of the shades of colors in terms of RGB colors. The browser can read this code and according to the code it will display the color in the website.
This HTML color picker can be used in many forms like if you have a client who need to see some color options for anything, like color scheme for a website or an android application, etc. then instead of overwhelming them with 16 million colors, you can show them selected colors only. A designer can use this tool in many ways like, creating a whole new color palette for a new brand. Choosing right colors according to the type of content present in the website is very important. This HTML color picker gives accurate color codes, same like the one people use in Photoshop or in MS Paint.
This free HTML color selector is the ultimate web design tool. You can easily generate cohesive, harmonious color schemes by using the complementary, triade, tetrade, and analogic options up top, or you can create your own color palette from scratch by using the RGB color picker functionality and saving your preferred colors to the palette on the right hand side of the tool. Lastly, you can type HEX color values directly into the tool, and you can manually adjust HSB and RGB values in order to fine-tune your color selection.
As a designer, you can use this tool however you see fit - from trying out a new brand color palette, to using it as an on-demand CSS color picker. Choosing the right colors for a project is always tough, and we want to make that process as simple as possible. There are plenty of options out there when it comes to online color picker tools, but we want to be the best.
Color Picker
Use the color picker by clicking and dragging your cursor inside the picker area to highlight a color on the right. Input Hex, RGB, HSL or CMYK values to search for a particular color in the fields below the color swatch; click the swatch to add it to your palette. After selecting a color, experiment with different harmonies by using the dropdown below the color picker.
Use the color picker by clicking and dragging your cursor inside the picker area to highlight a color on the right. Input Hex, RGB, HSL or CMYK values to search for a particular color in the fields below the color swatch; click the swatch to add it to your palette.
How do I find the hex code for a color?
Colors are identified in HTML and CSS by their hexadecimal codes. If you're creating a webpage or other HTML project and want to include an element that matches a particular color in an image, website, or program window on your computer screen, you'll need to find the color's hex code. There are a few ways to hunt that code down—without needing to dig into any source code.
This free HTML color selector is the ultimate web design tool. You can easily generate cohesive, harmonious color schemes by using the complementary, triade, tetrade, and analogic options up top, or you can create your own color palette from scratch by using the RGB color picker functionality and saving your preferred colors to the palette on the right hand side of the tool. Lastly, you can type HEX color values directly into the tool, and you can manually adjust HSB and RGB values in order to fine-tune your color selection.
As a designer, you can use this tool however you see fit - from trying out a new brand color palette, to using it as an on-demand CSS color picker. Choosing the right colors for a project is always tough, and we want to make that process as simple as possible. There are plenty of options out there when it comes to online color picker tools, but we want to be the best.
Color Harmonies
Color harmonies are particularly pleasing combinations of two or more colors derived from their relationship on a color wheel. Also known as color chords, color harmonies are useful when exploring a possible color palette, or can be used as a standalone color scheme.
Colors that are directly opposite one another on the color wheel are known as complementary colors. Complementary colors have a high contrast and can be very effective as accent colors when paired with a more neutral palette.
Triadic harmonies consist of three colors equidistant from one another on the color wheel. Like complementary colors, triadic schemes tend to be very bright with a high contrast and work best when one color dominates.
Tetradic color harmonies are formed by two sets of complementary colors 60 degrees apart on the color wheel. Tetradic schemes are an excellent starting point for creating color palettes; fine tune them using color shades, tints and tones.
How to Use a Color Picker to Perfectly Match Colors
A color picker is a feature of virtually all software or online image and text editing tools. It allows you to choose the colors of visual elements like text or shapes in a document or graphic.
Nowadays, the color pickers in most image and video editing software include a feature that will identify a color in an image based on its RGB or hexadecimal (HEX) values.When you are using a color picker, you can click a space that contains a color in question and the color picker will display it. After identifying the color, you can apply it to shapes, text, or other elements on the canvas.
This allows you to perfectly match brand guidelines or maintain a consistent theme.The color matching feature in most color pickers is indicated by an eyedropper icon. In the three steps that follow, I demonstrate how to use the color picker in Snagit to match an exact color found in an image.
HTML color codes are hexadecimal triplets representing the colors red, green, and blue (#RRGGBB). For example, in the color red, the color code is #FF0000, which is '255' red, '0' green, and '0' blue. These color codes can change the color of the background, text, and tables on a web page.
HTML Color Codes Theory
So you are wondering "Does this weird combination of letters and numbers have any meaning?" Well the answer is "Yes" and this is how it goes:)
HTML Codes format:
Each HTML code contains symbol "#" and 6 letters or numbers. These numbers are in hexadecimal numeral system. For example "FF" in hexadecimal represents number 255 in Decimal.
HTML Color Coding Methods
There are following three different methods to set colors in your web page
Color names − You can specify color 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 color.
Color decimal or percentage values − This value is specified using the rgb( ) property.
Meaning of symbols:
The first two symbols in HTML color code represents the intensity of red color. 00 is the least and FF is the most intense. The third and fourth represents intensity of green and fifth and sixth represents the intensity of blue. So with combining the intensity of red, green and blue we can mix almost any color that our heart desire;)
Examples:
#FF0000 - With this HTML code we tell browser to show maximum of red and no green and no blue. The result is of course pure red color.
#00FF00 - This HTML code shows just green and no red and blue.
#0000FF - This HTML code shows just blue and no red and green.
#FFFF00 - Combination of red and green color gives us yellow.
#CCEEFF - Take some red a bit more of green and maximum of blue to get color of sky etc.
Online Calculators
Online Web Code Test |
Online Image Picker |
Online Color Picker