Color Picker
Lighter / Darker :
- 100 %#ffffff
- 95 %#e8fcf4
- 90 %#d2f9e9
- 85 %#bbf7dd
- 80 %#a4f4d2
- 75 %#8df1c7
- 70 %#77eebc
- 65 %#60ecb0
- 60 %#49e9a5
- 55 %#33e69a
- 50 %#1ce38f
- 45 %#19cc80
- 40 %#16b672
- 35 %#139f64
- 30 %#118856
- 25 %#0e7247
- 20 %#0b5b39
- 15 %#08442b
- 10 %#062d1d
- 5 %#03170e
- 0 %#000000
Pick a Color :
Hue
Hue | Hex | Rgb | hsl | |
---|---|---|---|---|
0 | #cc1919 | rgb(204,25,25) | hsl(0,78.17%,44.9%) | |
15 | #cc4619 | rgb(204,70,25) | hsl(15.08,78.17%,44.9%) | |
30 | #cc7219 | rgb(204,114,25) | hsl(29.83,78.17%,44.9%) | |
45 | #cc9f19 | rgb(204,159,25) | hsl(44.92,78.17%,44.9%) | |
60 | #cccc19 | rgb(204,204,25) | hsl(60,78.17%,44.9%) | |
75 | #9fcc19 | rgb(159,204,25) | hsl(75.08,78.17%,44.9%) | |
90 | #73cc19 | rgb(115,204,25) | hsl(89.83,78.17%,44.9%) | |
105 | #46cc19 | rgb(70,204,25) | hsl(104.92,78.17%,44.9%) | |
120 | #19cc19 | rgb(25,204,25) | hsl(120,78.17%,44.9%) | |
135 | #19cc46 | rgb(25,204,70) | hsl(135.08,78.17%,44.9%) | |
155 | #19cc81 | rgb(25,204,129) | hsl(154.86,78.17%,44.9%) | |
150 | #19cc73 | rgb(25,204,115) | hsl(150.17,78.17%,44.9%) | |
165 | #19cc9f | rgb(25,204,159) | hsl(164.92,78.17%,44.9%) | |
180 | #19cccc | rgb(25,204,204) | hsl(180,78.17%,44.9%) | |
195 | #199fcc | rgb(25,159,204) | hsl(195.08,78.17%,44.9%) | |
210 | #1972cc | rgb(25,114,204) | hsl(210.17,78.17%,44.9%) | |
225 | #1946cc | rgb(25,70,204) | hsl(224.92,78.17%,44.9%) | |
240 | #1919cc | rgb(25,25,204) | hsl(240,78.17%,44.9%) | |
255 | #4619cc | rgb(70,25,204) | hsl(255.08,78.17%,44.9%) | |
270 | #7219cc | rgb(114,25,204) | hsl(269.83,78.17%,44.9%) | |
285 | #9f19cc | rgb(159,25,204) | hsl(284.92,78.17%,44.9%) | |
300 | #cc19cc | rgb(204,25,204) | hsl(300,78.17%,44.9%) | |
315 | #cc199f | rgb(204,25,159) | hsl(315.08,78.17%,44.9%) | |
330 | #cc1973 | rgb(204,25,115) | hsl(329.83,78.17%,44.9%) | |
345 | #cc1946 | rgb(204,25,70) | hsl(344.92,78.17%,44.9%) | |
360 | #cc1919 | rgb(204,25,25) | hsl(0,78.17%,44.9%) |
Saturation
Saturation | Hex | Rgb | hsl | |
---|---|---|---|---|
100 | #00e584 | rgb(0,229,132) | hsl(154.59,100%,44.9%) | |
95 | #06df83 | rgb(6,223,131) | hsl(154.56,94.76%,44.9%) | |
90 | #0bda82 | rgb(11,218,130) | hsl(154.49,90.39%,44.9%) | |
85 | #11d481 | rgb(17,212,129) | hsl(154.46,85.15%,44.9%) | |
80 | #17ce80 | rgb(23,206,128) | hsl(154.43,79.91%,44.9%) | |
75 | #1dc87f | rgb(29,200,127) | hsl(154.39,74.67%,44.9%) | |
70 | #22c37f | rgb(34,195,127) | hsl(154.66,70.31%,44.9%) | |
65 | #28bd7e | rgb(40,189,126) | hsl(154.63,65.07%,44.9%) | |
60 | #2eb77d | rgb(46,183,125) | hsl(154.6,59.83%,44.9%) | |
55 | #34b17c | rgb(52,177,124) | hsl(154.56,54.59%,44.9%) | |
50 | #39ac7b | rgb(57,172,123) | hsl(154.43,50.22%,44.9%) | |
45 | #3fa67a | rgb(63,166,122) | hsl(154.37,44.98%,44.9%) | |
40 | #45a079 | rgb(69,160,121) | hsl(154.29,39.74%,44.9%) | |
35 | #4a9b79 | rgb(74,155,121) | hsl(154.81,35.37%,44.9%) | |
30 | #509578 | rgb(80,149,120) | hsl(154.78,30.13%,44.9%) | |
25 | #568f77 | rgb(86,143,119) | hsl(154.74,24.89%,44.9%) | |
20 | #5c8976 | rgb(92,137,118) | hsl(154.67,19.65%,44.9%) | |
15 | #618475 | rgb(97,132,117) | hsl(154.29,15.28%,44.9%) | |
10 | #677e74 | rgb(103,126,116) | hsl(153.91,10.04%,44.9%) | |
5 | #6d7873 | rgb(109,120,115) | hsl(152.73,4.8%,44.9%) | |
1 | #717473 | rgb(113,116,115) | hsl(160,1.31%,44.9%) | |
0 | #737373 | rgb(115,115,115) | hsl(0,0%,45.1%) |
RGB(Red, Green, Blue)
Red 25 | Green 204 | Blue 128 |
---|---|---|
RGB: HSL: |
Changing the exact shade or saturation of color evokes totally different feelings. There are millions of color shades that are possible to get. But, sometimes, it is really hard to get the exact color you want for your project. Choosing the right colors for a project is always a tough thing. So you definitely, need a color picker tool to grab the shade you want. If you are looking for a simple color picker tool, you are in the right place! Our website suggests one of the useful tools - Color Picker. But graphics professionals, software designers, programmers, photographers, or artists need to get the possibility to specify colors by a code number in different formats.
Color Picker tool helps web designers, photographers, and graphic designers to pick the right color and get the code of different color shades quickly!
A color picker (also color chooser or color tool) is a graphical user interface widget, usually found within graphics software or online, used to select colors and sometimes to create color schemes. (Wikipedia)
With this super easy and quick tool, the color-choosing process becomes much simpler. The tool helps to select your preferred color just by clicking your mouse. On the left side of the page, you see a big hexagon with many colorful little hexagons. When you click on any color, you will get the hexadecimal code of the color below the hexagon. You can also do vice versa by inputting the code in the Selected Color area and getting the specified color. On the right side of the page, you will get all the shades of the selected color with their codes. When you write a number in Detalization input, the tool will show you a specified number of dark and light shades. For example, if you input “5” the tool will show you 5 dark and 5 light shades.
Do you know that approximately seven million different colors can be seen by the human eye?
Light is made of seven wavelength groups. These are the rainbow colors: red, orange, yellow, green, blue, indigo, and violet. The reddish colors are the long wavelengths peaking near 564–580 nm (nanometer). The greenish colors are the medium-wavelength, peaking near 534–545 nm. The bluish color is the short-wavelength light near 420–440 nm.
Color or color is the characteristic of human visual perception described through color categories, with names such as red, orange, yellow, green, blue, or purple.
Colors are separated into three main groups: primary, secondary, and tertiary.
The three primary colors are red, blue, and yellow. These colors are the basic colors that makeup all the other colors on the color wheel. The primary colors for television screens and computer monitors are red, green, and blue. Printers use magenta, yellow, and cyan as their primary colors (they also use black).
The secondary colors are the mixtures of the primary colors. These are orange, green, and purple.
Tertiary colors are comprised of the middle colors like yellow-green and blue-green. They are created by mixing a primary color and a secondary color.
Colors also express emotions. Most colors can be taken in a positive or negative manner, depending on how combination with other colors.
Red, orange and yellow are considered to be warm, while violet and blue are cool.
Red color helps to stimulate energy and excitement. The negative connotations of red are rage, emergency, and anger, which stem from the passionate and aggressive qualities of red. It is thought to be a sign of anger, love, and power.
Orange is a combination of red and yellow. It symbolizes happiness, joy, and sunshine. Orange is not as aggressive as red but also symbolizes ignorance and deceit.
Bright yellow is a happy color symbolizing joy, intelligence, brightness, energy, optimism, and happiness. Dingy yellow brings about negative feelings: caution, criticism, laziness, and jealousy.
Green is said to be the most neutral color. It is symbolic of money, showing greed or jealousy.
Blue is a peaceful and calming color exuding stability and expertise. It is a common color used in corporate sites. Blue can also symbolize trust and dependability. Blue can give feelings of harmony, peace, and care. A cool shade can bring about the negative side of blue, symbolizing depression, coldness, and passiveness.
Purple is the color of royalty and sophistication, showing wealth and luxury. It also gives a sense of spirituality, encourages creativity, and promotes creativity and feminine qualities. while darker purple can conjure gloominess and sadness.
Warm colors make a room warm, making the room seem smaller, while cool colors make a room cooler making it look larger. Neutral colors do not create much emotion. Colors like gray and brown are neutral colors.
Black is the absence of color and is, therefore, not a color. White is the blending of all colors and is a color. It is often correlated with power, elegance, sophistication, and depth. It is said that wearing black on a job interview can show that the interviewee is a powerful individual, and the same goes for websites. Black can also be seen negatively because color is associated with death, mystery, and the unknown. It is the color of grief, mourning, and sorrow, so it must be used wisely.
Colors give websites meaning without using words. They create a lot of impacts, showing users what the company is about and what kind of products they are selling.
Pairing colors can help change the meaning of a site altogether. Pairing a soft blue with a bright orange, you can make your site more exciting and joyful. Soft blue colors give a more calming and peaceful tone to your site. Or fast-food giants like McDonald’s, KFC, Burger King, and many other restaurants wear red and yellow color themes. Researchers say that red and yellow are the most appetizing colors. On the other hand, the color blue is the least appetizing color.
There are plenty of terms to describe colors. Color relationships are fallen into two groups:
Complimentary colors are colors that complement each other well. These are colors like blue and orange, purple and yellow, and red and green.
Analogous colors usually match fairly well but provide little contrast when used together.
What is the HTML color code?
HTML color code is an identifier used to represent a color on the web. Common forms are a keyword name, a hexadecimal value, an RGB (red, green, blue) triplet, and an HSL (hue, saturation, lightness) triplet. Each form allows a choice of about 16 million shades.
For example, the color red can be an identifier using the following formats:
- blue (keyword name) - the name of the color. With this format, we can only specify 147 colors, represented by 17 basic colors, with 130 other shades; these colors are referred to as X11 colors.
- hex (#1c87c9) - is specified with #RRGGBB, where the RR (red), GG (green), and BB (blue).
- RGB (28, 135, 201) - 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%).
- HSL (203, 76%, 45%) - stands for hue, saturation, and lightness, representing a cylindrical-coordinate representation of colors. Hue is a degree on the color wheel (from 0 to 360) where 0 (or 360) is red, 120 is green, 240 is blue. Saturation is a percentage value where 0% means a shade of gray and 100% is the full color. Lightness is also a percentage where 0% is black, 100% is white.
Color Picker tool shows colors in hexadecimal (also hex) format.
What is hexadecimal color?
Hex is the most popular color code consisting of three-byte hexadecimal numbers (six digits) prefixed with a hash (#), each byte or pair of characters in the hex code representing the intensity of red, green, and blue in color respectively.
Hex color code holds the numerical values from 0 to 9 and alphabetical values from A to F.
Code byte values range from 00, which is the lowest intensity of a color, to FF, which is the highest intensity.
Understanding the basics of hex code is simple. For example, to get a white color means that we should mix each of the three primary colors at their full intensity #FFFFFF. To get a black color means that each of the three colors should be displayed at their lowest intensity #000000.