Best Online HTML Color Picker

.

What is a HTML color Picker?

An HTML color picker(also called color chooser) is a tool that helps developers to choose any desired color from the color canvas. The color pickers may vary in their interface but the basic functionality of an HTML color picker always remains the same. Some HTML color pickers may use, buttons and some may use sliders to vary the color values.

How our HTML color Picker works?

In our HTML color picker, we have provided the flexibility to choose and adjust the color values from two color boxes, first a slider and second a color canvas.

The color slider lets you choose and adjust any color from the six colors(red, yellow, lime, aqua, blue, Fuchsia). once you have chosen a color value from the slider, the lighter and darker variation of this color starts appearing in the color canvas.

The color canvas contains a picker circle that can be dragged anywhere within the canvas and lets you choose different variations of the color chosen from the slider.

The selected color appears in the third box i.e. Selected Color Box, which also lets you preview how a white and black text will appear on this selected color.

The selected color values appear just below the Selected Color Box in all three color formats i.e. HEX, RGB, and HSL. You can use any of them by just clicking and copying the color value you want.

Color Theory

Have you ever wondered how artists and designers choose the perfect color combinations?

The answer is the color theory. Artists and designers use the color theory to find out what colors will
look good together. In color theory, colors are organized on a color circle called the color wheel.

The color wheel was invented by Sir Issac Newton in 1666. The color wheel maps the color spectrum onto a circle in an organized fashion.
You can choose any color on the color wheel and can easily find out the colors that will look good together with the chosen color.

Color Wheels

A color wheel is a visual representation of colors arranged around a circle in an organized fashion.
There are two types of colors wheels. The first one is the RYB or red, yellow, blue color wheel. This color wheel is typically used by artists.
The second is the RGB or red, green, blue color wheel. This color wheel is mostly used by web developers and designers for finding the perfect color combinations that are pleasing to the human eye. In our HTML color picker, we have used the RGB color wheel to find the perfect color combinations.

Color Harmonies

The color harmonies are basically a combination of two or more colors on the color wheel that look good together. The artists and designers use this concept to find the perfect color combinations.

There are different types of color combinations that can help you find the perfect color combinations that you were searching for. These color combinations are as follows:

1. Complementary Colors

The two colors that are directly opposite of each other on the color wheel are called complementary colors.
As the complementary colors have a high contrast difference, they can make the design really stand out.

2. Triadic Colors

Any three colors on the color wheel, that are equidistant from one another are called the triadic colors. When using the triadic color scheme, the colors should be very carefully balanced i.e. Let only one color dominate and use the others two for accent.

3. Tetradic Colors

In the tetradic or rectangle color scheme, any two sets of complementary colors that are 60 degrees apart on the color wheel are used.

When using this color scheme, it should be kept in mind that only one color out of the four should dominate. Let only one color dominate, one or two colors as an accent, and let the rest of the colors fill the page.

4. Analogous Colors

As the name suggests itself, the analogous color harmonies are formed by the colors that are adjacent to one another on the color wheel. Therefore, these colors always have some similarities. For example – yellow, yellow-green, and green.

The analogous color harmonies are frequently used in web designing as they can really stand out the look of the page. In this scheme, typically, the colors that are 30 degrees apart on the color wheel are used.

5. Neutral Colors

Neutral colors harmonies are almost similar to analogous color harmonies. The only difference is that the colors are more adjacent to each other on the color wheel. That is, they have more similarities in between.

In this scheme, typically, the colors that are 15 degrees (30 degrees in the neutral color scheme) apart on the color wheel are used.

Color Shades, Tints and Tones

Color shades, tints, and tones are used to get different variations of a given color, by adding some amount of black, white, or grey color in it. These color schemes are mainly used in web designing and typography.

1. Color Shades

The various shades of a color can be achieved by adding varying levels of black color to it. In web designing, the color shades can be used to create hover effects on various elements.
When using the color shades, be careful not to use too much amount of black as it can cause some non-pleasing results.

2. Color Tints

The color tints are made by adding varying levels of white to a color. This can help us creating various lighter versions of the color and produce endless variations of the color. Tints can also be used to create hover effects in web designing.
In JavaScript, it can be achieved by increasing the lightness parameter value of the HSL(hue, saturation, lightness) color format.

3. Color Tones

The color tones are made by adding varying amounts of grey to the color. It can help us achieving endless variations of the color depending on the amount of grey color used in it.

In web designing, it is common to use tones to create quotes as they are very pleasing to the eye.

Note:- In our HTML color picker, we have given you the flexibility to find all above discussed color harmonies, shades, tints, and tones. You can simply select the color harmony you want from the dropdown and it will generate all the perfect color combinations you were looking for.

Primary, Secondary and Tertiary Colors

As colors on the color wheel are arranged according to their chromatic order. Therefore, different combinations of colors on the color wheel can result in the color that we were looking for.

There are 12 main colors on the colors wheels. These colors can differ for different types of color wheels.
For the RGB color wheel these colors are red, orange, yellow, chartreuse green, green, spring green, cyan, azure, blue, violet, magenta and rose.

The 12 colors on the color wheel can be grouped into the below three parts:

• Primary Colors
• Secondary Colors
• Tertiary Colors

1. Primary Colors

The primary colors in the RGB color wheel are the colors that when added together, results in a pure white color(#fff).

These primary colors on the RGB color wheel are red, green, and blue. These three colors are equidistance(120 degrees apart) on the color wheel.

2. Secondary Colors

The secondary colors in the RGB color wheel are the colors that result when two primary colors are mixed together.

In the RGB color wheel, these secondary colors are cyan, magenta, and yellow. The cyan color results when mixing the green and blue, magenta results when mixing the blue and red, and the yellow color results when mixing the red and green.

3. Tertiary Colors

The tertiary colors in the RGB color wheel result when one primary color is mixed with one secondary color.

There are six possible tertiary colors on the RGB color wheel. These tertiary colors are orange, chartreuse green, spring green, azure, violet, and rose.

HTML Color Codes

Color codes are the ways of representing a color in a color format that can be understood or interpreted by the digital devices, like computers and TVs.

The color codes play an important role in web designing as colors are the primary factor that can have a huge impact on user overall experience.
There are mainly three types of color codes that are used in web applications by most of the industries.

• HEX Color Codes
• RGB Color Codes
• HSL Color Codes

1. HEX Color Codes

The HEX color codes are the most popular format used by designers and developers. In the HEX color format, a color is represented by 6 hexadecimal numbers preceded by a hashtag(#).

The first two numbers represent the intensity of the red color, the next two represent the intensity of the green color and the last two numbers represent the intensity of the blue color.

The individual hex code ranges from 00 to FF. A value 00 represents the lowest or zero intensity and FF represents the highest possible intensity of the color. For example – #FF0000 is pure red, #00FF00 is pure green, and #0000FF is pure blue.

#FF0000

#00FF00

#0000FF

If all three primary colors i.e red, green, and blue mixed at their full intensity(FF) i.e. #FFFFFF, they result in pure white color.

#FFFFFF

Similarly, if we mix these three primary colors at their lowest intensity(00), they result in a pure black color(#000000).

#000000

2. RGB Color Codes

The RGB color codes are the second most popular color codes typically used by designers and developers. In this color format, the color value is represented by an inbuilt function rgb(red, green, blue) which takes three parameters.

These parameters range from 0 to 255. The first parameter represents the intensity of the red, the second represents the intensity of the green and the third parameter represents the intensity of the blue color.

A value of 0 indicates the lowest and 255 indicates the highest intensity of the individual color.
For example, rgb(255, 0, 0) represents red color, rgb(0, 255, 0) represents green color, and rgb(0, 0, 255) represents blue color.

rgb(255, 0, 0)

rgb(0, 255, 0)

rgb(0, 0, 255)

Similar to HEX codes, if we mix all three primary colors(red, green, blue) at their full intensity, they result in a pure white color i.e. rgb(255,255,255). Mixing these primary colors at their lowest level of intensity results in a pure black color i.e. rgb(0,0,0).

3. HSL Color Codes

The HSL color codes are less common in use. But they are very useful while creating color harmonies. In our color picker, we have used the HSL color codes to find all color harmonies of the selected color.

In the HSL color format, a color value is represented by an inbuilt function hsl(hue, saturation, lightness) which accepts three parameters.

• Hue – Ranges from 0 to 360 degree. The value 0 represents the red, 120 represents green and 240 represents blue color.
• Saturation – Ranges from 0% to 100%. It specifies the amount of the gray used in the color. 0% means fully gray, 50% means 50% gray and 100% means no gray at all.
• Lightness – Ranges from 0% to 100%. It specifies the intensity of the light used in a color. 0% means no light i.e. pure black color, 50% means neither lighter nor darker and 100% means full lightness i.e. pure white color.

For example – hsl(0, 100%, 50%) represents red, hsl(120, 100%, 50%) represents green and hsl(240, 100%, 50%) represents pure blue color.

hsl(0, 100%, 50%)

hsl(120, 100%, 50%)

hsl(240, 100%, 50%)

Note:- For a more detailed explanation of the HTML color codes, please refer to the CSS colors and formats tutorial.

Basic Colors with color name and color code

Frequently Asked Questions(FAQ)

How do you pick a color in HTML?

Ans:- You can use the HTML <input type="color" name="My color picker"> tag to pick a color in simple HTML. This is basically HTML’s inbuilt color picker. The default color value is rgb(0, 0, 0) ie. the black color(#000000).

Like the online color pickers, it gives you the flexibility to pick any color from its color canvas. But, unlike the online color pickers, it has very limited features.

How do I found out the RGB of a color?

Ans:- In our color picker you can simply type the name of the color like red, yellow, green and just click on the Get Color Code button, it will give you its equivalent value in all three color formats ie. HEX, RGB, HSL.

What is #fff color in HTML?

Ans:- The color code #fff represents the hexadecimal equivalent of the White color. In the hexadecimal format, #fff is the same as #ffffff. The RGB equivalent of the #fff is rgb(255, 255, 255). You can use any of them, they all will result in pure White color.

How to pick complementary colors with html color picker?

Ans:- The complementary colors are 180 degrees apart on the color wheel. To find the complementary color, first, find the HSL value of the given color. Once the HSL value of the color is found, add 180 in the first parameter(hue) of its HSL value and your task is done.

In our HTML Color Picker, we have already done this for you. All you have to do is simply select the COMPLEMENTARY from the dropdown and it will show the complementary of your chosen color. Similarly, you can find other color harmonies too.

References

1. Color Picker Wikipedia
2. Color Picker Tool Mozila