![Color Picker]()
Online Color Picker (HTML Color Picker)
Online Color Picker (HTML Color Picker)Use the Color Palette tab to generate your own personalized color palette and use the hex codes directly in your web pages. Effortlessly create a palette for your website or graphic design with our online color picker utility.
Use the Color Scale tab to find shades of a particular color.
The Color Blender tab lets you blend two colors using various modes.
Your selections are saved for your next visit to the page.
Try our browser extensions: Chrome and Microsoft Edge They add the ability to pick colors from images, or other areas, of a web page using the eyedropper feature!
How to Use the Palette
Use the color palette by clicking and dragging each of the four markers around the palette.
- Your values are remembered so that when you return to the page so you don't lose them.
- Click the Copy to Clipboard button to copy the color codes to the clipboard.
- Click the Export to File button to copy the color codes to a text file.
- Click Reset to reset your selections to the default.
The following video gives some color theory basics to help you with your selections.
What is RGB?
The RGB (red, green, and blue) is an additive color model in which red, green and blue light are added together in various ways to reproduce a broad array of colors. The name of the model comes from the initials of the three additive primary colors, red, green and blue.
A color in the RGB color model is described by indicating how much of each of the red, green, and blue is included. The color is expressed as an RGB triplet (r,g,b), each component of which can vary from zero to a defined maximum value. If all the components are at zero the result is black; if all are at maximum, the result is the brightest representable white.
Colors are represented by numbers - typically a fractional value between 0 and 1, as a percentage 0% to 100%, or as integer numbers in the range 0 to 255, the range of a single 8-bit byte (the tool on this page uses the range 0 - 255).
An RGB color of rgb(255,255,255) is equivalent to #FFFFFF in Hexadecimal (Hex) notation. That is decimal number 255 converted to Hex is FF.
What is CMYK?
The CMYK color model (process color, four color) is a subtractive color model, used in color printing, and is also used to describe the printing process itself. CMYK refers to the four inks used in some color printing: cyan, magenta, yellow, and key (black). Although it varies by print house, press operator, press manufacturer, and press run, ink is typically applied in the order of the abbreviation.
What are HSL and HSV?
HSL and HSV are the two most common cylindrical-coordinate representations of points in an RGB color model. The two representations rearrange the geometry of RGB in an attempt to be more intuitive and perceptually relevant than the cartesian (cube) representation. Developed in the 1930s for color television applications, the HSL color space allowed color information to be added to existing black and white signals, meaning unlike previous color systems, monochrome receivers could receive color signals broadcast using HSL.
HSL and HSV are used today in all digital television encoding systems, color pickers, in image editing software, and less commonly in image analysis and computer vision.
HSL stands for hue, saturation, and luminance (or sometimes lightness), and is also often called HLS. HSV stands for hue, saturation, and value, and is also often called HSB (B for brightness).
Use the color scale to create a set of visually pleasing colors that are evenly spaced. If you are creating any type of chart or map that relies on colors to visually distinguish elements (or data values) in your chart or map you'll find this very hard to do manually and the results will likely be not ideal - often leaving the viewer to guess the intent of the color. This tool will produce a pleasing color scale from the start and end colors you select.
Number of Colors
Scale Color Mode
Median Color
How to Use the Color Scale
- Use the slider to select the number of colors you want in your scale.
- Click the first card in the scale and select a color. Use the slider to adjust brightness.
- Click the last card in the scale and select a color. The scale of colors is automatically created.
- Select a color mode. The final colors in your scale will depend on the color mode in which the channels are interpolated. You'll get different results depending on the mode selected. For example, HSL (Hue, Saturation, and Luminance), and HCL (Hue, Chroma, and Lightness) will tend to produce more saturated colors.
- Adding a Median color will let you create a divergent scale where the start and end colors diverge from the median color. Note: choose an odd number of colors in the scale to ensure the median color is visible.
- You can copy the results to the clipboard or export them to a text file.
This tool uses on the chromajs library to generate the color scales.
Use the color blender to blend two colors using RGB channel-wise blend functions.
Color Blender Mode
How to Use the Color Blender
- Click the first card select a color. Use the slider to adjust brightness.
- Click the last card and select a color.
- Select a blender mode (i.e., multiply, darken, lighten, screen, overlay, burn, and dodge). See below.
- You can copy the results to the clipboard or export them to a text file.
Blender Modes
Blending modes combine the tonal values of two layers or colors, and they allow numerous effects.
Multiply
Multiplies the tonal values of the two colors. This mode can be compared to two photographic slides placed on top of each other and projected together. The light, forced to pass through each of the slides, is weakend.
Screen
The opposite of the Multiply. The two colors are combined and lighten each other. Similar to when two photographic slides are projected with different projectors onto the same screen.
Darken
This mode combines the two colors taking the respective darker color into the result.
Lighten
This mode combines the two selected colors taking the respective lighter color into the result.
Overlay
This mode is a combination of the modes Multiply and Screen.
Dodge
In this mode the the right-hand color acts like a mask that protects the left-hand color from exposure. The brighter the right-hand color the more the left-hand color gets lightened. A right-hand color that is truly black does not affect the left-hand selected color at all.
Burn
The reverse of Dodge mode. The left-hand color is darkened by the right-hand color.