HTML Color Picker
Last Updated :
03 Apr, 2024
Welcome to our user-friendly html color picker! Whether you’re a web designer, developer, or just someone who loves playing with colors, our tool is here to make your color selection easier.
Click on any color in the below Hexagon to get the HTML code.
HTML Color Basics
- HEX Color Codes:
- HTML color codes are represented in hexadecimal (HEX) format:
#RRGGBB
.
- Each of the two-digit values (
RR
, GG
, and BB
) ranges from 00
to FF
.
- For example:
- Red:
#FF0000
(255 red, 0 green, 0 blue)
- Green:
#00FF00
(0 red, 255 green, 0 blue)
- Blue:
#0000FF
(0 red, 0 green, 255 blue)
- RGB Values:
- RGB stands for red, green, and blue.
- Each color channel has a value from 0 to 255.
- Example:
rgb(143, 58, 132)
represents a shade of purple.
- HSL Values:
- HSL (hue, saturation, lightness) provides a more intuitive way to describe colors.
- Hue: The color itself (0 to 360 degrees).
- Saturation: Intensity (0% to 100%).
- Lightness: Brightness (0% to 100%).
HTML colors with HEX, RGB, HSL values
Color Name |
HEX Code |
RGB Values |
HSL Values |
Red |
#FF0000 |
rgb(255, 0, 0) |
hsl(0, 100%, 50%) |
Green |
#00FF00 |
rgb(0, 255, 0) |
hsl(120, 100%, 50%) |
Blue |
#0000FF |
rgb(0, 0, 255) |
hsl(240, 100%, 50%) |
Cyan |
#00FFFF |
rgb(0, 255, 255) |
hsl(180, 100%, 50%) |
Magenta |
#FF00FF |
rgb(255, 0, 255) |
hsl(300, 100%, 50%) |
Yellow |
#FFFF00 |
rgb(255, 255, 0) |
hsl(60, 100%, 50%) |
Shades of All HTML Colors
1. Shades of HTML Red Color:
Color Name |
HEX Code |
RGB Values |
HSL Values |
Dark Red |
#8B0000 |
rgb(139, 0, 0) |
hsl(0, 100%, 27.3%) |
Red |
#FF0000 |
rgb(255, 0, 0) |
hsl(0, 100%, 50%) |
Light Red |
#FFC0CB |
rgb(255, 192, 203) |
hsl(350, 100%, 88.2%) |
Crimson |
#DC143C |
rgb(220, 20, 60) |
hsl(348.5, 83.3%, 47.1%) |
Tomato |
#FF6347 |
rgb(255, 99, 71) |
hsl(9.1, 100%, 64.7%) |
Indian Red |
#CD5C5C |
rgb(205, 92, 92) |
hsl(0, 53.3%, 58.8%) |
2. Shades of HTML Green Color:
Color Name |
HEX Code |
RGB Values |
HSL Values |
Dark Green |
#006400 |
rgb(0, 100, 0) |
hsl(120, 100%, 20%) |
Green |
#008000 |
rgb(0, 128, 0) |
hsl(120, 100%, 25%) |
Lime Green |
#32CD32 |
rgb(50, 205, 50) |
hsl(120, 61.2%, 50%) |
Sea Green |
#2E8B57 |
rgb(46, 139, 87) |
hsl(146.5, 50.7%, 36.3%) |
Olive |
#808000 |
rgb(128, 128, 0) |
hsl(60, 100%, 25.1%) |
Chartreuse |
#7FFF00 |
rgb(127, 255, 0) |
hsl(90, 100%, 50%) |
3. Shades of HTML Blue Color:
Color Name |
HEX Code |
RGB Values |
HSL Values |
Dark Blue |
#00008B |
rgb(0, 0, 139) |
hsl(240, 100%, 27.3%) |
Blue |
#0000FF |
rgb(0, 0, 255) |
hsl(240, 100%, 50%) |
Sky Blue |
#87CEEB |
rgb(135, 206, 235) |
hsl(197.8, 71.4%, 71.6%) |
Dodger Blue |
#1E90FF |
rgb(30, 144, 255) |
hsl(210.2, 100%, 55.1%) |
Royal Blue |
#4169E1 |
rgb(65, 105, 225) |
hsl(225, 72.7%, 56.9%) |
Navy Blue |
#000080 |
rgb(0, 0, 128) |
hsl(240, 100%, 25.1%) |
4. Shades of HTML Cyan Color:
Color Name |
HEX Code |
RGB Values |
HSL Values |
Dark Cyan |
#008B8B |
rgb(0, 139, 139) |
hsl(180, 100%, 27.3%) |
Cyan |
#00FFFF |
rgb(0, 255, 255) |
hsl(180, 100%, 50%) |
Aqua |
#00FFFF |
rgb(0, 255, 255) |
hsl(180, 100%, 50%) |
Turquoise |
#40E0D0 |
rgb(64, 224, 208) |
hsl(174.7, 72.7%, 55.1%) |
Light Cyan |
#E0FFFF |
rgb(224, 255, 255) |
hsl(180, 100%, 93.9%) |
Teal |
#008080 |
rgb(0, 128, 128) |
hsl(180, 100%, 25.1%) |
5. Shades of HTML Magenta Color:
Color Name |
HEX Code |
RGB Values |
HSL Values |
Dark Magenta |
#8B008B |
rgb(139, 0, 139) |
hsl(300, 100%, 27.3%) |
Magenta |
#FF00FF |
rgb(255, 0, 255) |
hsl(300, 100%, 50%) |
Fuchsia |
#FF00FF |
rgb(255, 0, 255) |
hsl(300, 100%, 50%) |
Orchid |
#DA70D6 |
rgb(218, 112, 214) |
hsl(302.2, 59.6%, 64.9%) |
Hot Pink |
#FF69B4 |
rgb(255, 105, 180) |
hsl(330.4, 100%, 70.6%) |
Plum |
#DDA0DD |
rgb(221, 160, 221) |
hsl(300, 47.1%, 75.9%) |
6. Shades of HTML Pink Color:
Color Name |
HEX Code |
RGB Code |
HSL Code |
Pink |
#FFC0CB |
rgb(255, 192, 203) |
hsl(350, 100%, 88%) |
LightPink |
#FFB6C1 |
rgb(255, 182, 193) |
hsl(351, 100%, 86%) |
HotPink |
#FF69B4 |
rgb(255, 105, 180) |
hsl(330, 100%, 71%) |
DeepPink |
#FF1493 |
rgb(255, 20, 147) |
hsl(328, 100%, 54%) |
MediumVioletRed |
#C71585 |
rgb(199, 21, 133) |
hsl(322, 81%, 43%) |
PaleVioletRed |
#DB7093 |
rgb(219, 112, 147) |
hsl(340, 60%, 65%) |
7. Shades of HTML Orange Color:
Color Name |
HEX Code |
RGB Code |
HSL Code |
LightSalmon |
#FFA07A |
rgb(255, 160, 122) |
hsl(17, 100%, 74%) |
Coral |
#FF7F50 |
rgb(255, 127, 80) |
hsl(16, 100%, 66%) |
Tomato |
#FF6347 |
rgb(255, 99, 71) |
hsl(9, 100%, 64%) |
OrangeRed |
#FF4500 |
rgb(255, 69, 0) |
hsl(16, 100%, 50%) |
DarkOrange |
#FF8C00 |
rgb(255, 140, 0) |
hsl(33, 100%, 50%) |
Orange |
#FFA500 |
rgb(255, 165, 0) |
hsl(39, 100%, 50%) |
8. Shades of HTML Yellow Color:
Color Name |
HEX Code |
RGB Code |
HSL Code |
Gold |
#FFD700 |
rgb(255, 215, 0) |
hsl(51, 100%, 50%) |
Yellow |
#FFFF00 |
rgb(255, 255, 0) |
hsl(60, 100%, 50%) |
LightYellow |
#FFFFE0 |
rgb(255, 255, 224) |
hsl(60, 100%, 94%) |
LemonChiffon |
#FFFACD |
rgb(255, 250, 205) |
hsl(54, 100%, 90%) |
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...