Color Picker | Try on AnyWebTools

Pick from ColorMap

Selected Color:

Black

Black Shadow

White

White Shadow

#cccccc

rgb(204, 204, 204)

hsl(0, 0%, 80%)

Lighter / Darker:

100%		#ffffff
95%		#f2f2f2
90%		#e6e6e6
85%		#d9d9d9
80%		#cccccc
75%		#bfbfbf
70%		#b3b3b3
65%		#a6a6a6
60%		#999999
55%		#8c8c8c
50%		#808080
45%		#737373
40%		#666666
35%		#595959
30%		#4d4d4d
25%		#404040
20%		#333333
15%		#262626
10%		#1a1a1a
5%		#0d0d0d
0%		#000000

How to Play?

The Online Color Picker is an easy-to-use tool that helps you select and modify colors effortlessly. Using a hexagonal colormap consisting of 127 color blocks, you can click on any block to view the selected color in three formats: Hex, RGB, and HSL. Additionally, you can adjust the lightness percentage to find lighter or darker shades of the selected color.

Pick a Color: Click on any block in the hexagonal colormap to select a color.
View Color Values: The selected color will be displayed in three formats:
- Hexadecimal (Hex) (e.g., #FF5733)
- RGB (Red, Green, Blue) (e.g., rgb(255, 87, 51))
- HSL (Hue, Saturation, Lightness) (e.g., hsl(10, 100%, 60%))
Adjust Lightness: Below the color map, there is a lightness scale ranging from 100% to 0% in 5% intervals. The current color’s percentage is highlighted.
Modify the Color: Click on any percentage value to adjust the lightness and get a lighter or darker shade of the selected color.

Understanding Color Formats

Hexadecimal (Hex) Colors

A hex color code represents colors in a 6-character format: #RRGGBB. Each component:

RR (Red), GG (Green), BB (Blue) are two-digit hexadecimal numbers (00 to FF) defining color intensity.
Example: #FF5733 represents a reddish-orange color.

RGB (Red, Green, Blue) Colors

An RGB color value defines colors using three intensity parameters:

rgb(red, green, blue), where each value ranges from 0 to 255.
Example: rgb(255, 87, 51) represents the same reddish-orange color.

HSL (Hue, Saturation, Lightness) Colors

An HSL color value consists of:

Hue (H): The type of color (0°–360° on the color wheel).
Saturation (S): The intensity of the color (0%–100%).
Lightness (L): The brightness level (0% = black, 100% = white).
Example: hsl(10, 100%, 60%) represents the same reddish-orange color.

Explore & Customize Colors

With the Online Color Picker, you can easily find and modify colors to match your design needs. Adjust the lightness, explore different shades, and use Hex, RGB, or HSL values as needed!

featured