Open In App

HTML Color Picker

Last Updated : 03 Apr, 2024
Comments
Improve
Suggest changes
1 Likes
Like
Report

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

  1. 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)
  2. 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.
  3. 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 NameHEX CodeRGB ValuesHSL Values
Red#FF0000rgb(255, 0, 0)hsl(0, 100%, 50%)
Green#00FF00rgb(0, 255, 0)hsl(120, 100%, 50%)
Blue#0000FFrgb(0, 0, 255)hsl(240, 100%, 50%)
Cyan#00FFFFrgb(0, 255, 255)hsl(180, 100%, 50%)
Magenta#FF00FFrgb(255, 0, 255)hsl(300, 100%, 50%)
Yellow#FFFF00rgb(255, 255, 0)hsl(60, 100%, 50%)

Shades of All HTML Colors

1. Shades of HTML Red Color:

Color NameHEX CodeRGB ValuesHSL Values
Dark Red#8B0000rgb(139, 0, 0)hsl(0, 100%, 27.3%)
Red#FF0000rgb(255, 0, 0)hsl(0, 100%, 50%)
Light Red#FFC0CBrgb(255, 192, 203)hsl(350, 100%, 88.2%)
Crimson#DC143Crgb(220, 20, 60)hsl(348.5, 83.3%, 47.1%)
Tomato#FF6347rgb(255, 99, 71)hsl(9.1, 100%, 64.7%)
Indian Red#CD5C5Crgb(205, 92, 92)hsl(0, 53.3%, 58.8%)

2. Shades of HTML Green Color:

Color NameHEX CodeRGB ValuesHSL Values
Dark Green#006400rgb(0, 100, 0)hsl(120, 100%, 20%)
Green#008000rgb(0, 128, 0)hsl(120, 100%, 25%)
Lime Green#32CD32rgb(50, 205, 50)hsl(120, 61.2%, 50%)
Sea Green#2E8B57rgb(46, 139, 87)hsl(146.5, 50.7%, 36.3%)
Olive#808000rgb(128, 128, 0)hsl(60, 100%, 25.1%)
Chartreuse#7FFF00rgb(127, 255, 0)hsl(90, 100%, 50%)

3. Shades of HTML Blue Color:

Color NameHEX CodeRGB ValuesHSL Values
Dark Blue#00008Brgb(0, 0, 139)hsl(240, 100%, 27.3%)
Blue#0000FFrgb(0, 0, 255)hsl(240, 100%, 50%)
Sky Blue#87CEEBrgb(135, 206, 235)hsl(197.8, 71.4%, 71.6%)
Dodger Blue#1E90FFrgb(30, 144, 255)hsl(210.2, 100%, 55.1%)
Royal Blue#4169E1rgb(65, 105, 225)hsl(225, 72.7%, 56.9%)
Navy Blue#000080rgb(0, 0, 128)hsl(240, 100%, 25.1%)

4. Shades of HTML Cyan Color:

Color NameHEX CodeRGB ValuesHSL Values
Dark Cyan#008B8Brgb(0, 139, 139)hsl(180, 100%, 27.3%)
Cyan#00FFFFrgb(0, 255, 255)hsl(180, 100%, 50%)
Aqua#00FFFFrgb(0, 255, 255)hsl(180, 100%, 50%)
Turquoise#40E0D0rgb(64, 224, 208)hsl(174.7, 72.7%, 55.1%)
Light Cyan#E0FFFFrgb(224, 255, 255)hsl(180, 100%, 93.9%)
Teal#008080rgb(0, 128, 128)hsl(180, 100%, 25.1%)

5. Shades of HTML Magenta Color:

Color NameHEX CodeRGB ValuesHSL Values
Dark Magenta#8B008Brgb(139, 0, 139)hsl(300, 100%, 27.3%)
Magenta#FF00FFrgb(255, 0, 255)hsl(300, 100%, 50%)
Fuchsia#FF00FFrgb(255, 0, 255)hsl(300, 100%, 50%)
Orchid#DA70D6rgb(218, 112, 214)hsl(302.2, 59.6%, 64.9%)
Hot Pink#FF69B4rgb(255, 105, 180)hsl(330.4, 100%, 70.6%)
Plum#DDA0DDrgb(221, 160, 221)hsl(300, 47.1%, 75.9%)

6. Shades of HTML Pink Color:

Color NameHEX CodeRGB CodeHSL Code
Pink#FFC0CBrgb(255, 192, 203)hsl(350, 100%, 88%)
LightPink#FFB6C1rgb(255, 182, 193)hsl(351, 100%, 86%)
HotPink#FF69B4rgb(255, 105, 180)hsl(330, 100%, 71%)
DeepPink#FF1493rgb(255, 20, 147)hsl(328, 100%, 54%)
MediumVioletRed#C71585rgb(199, 21, 133)hsl(322, 81%, 43%)
PaleVioletRed#DB7093rgb(219, 112, 147)hsl(340, 60%, 65%)

7. Shades of HTML Orange Color:

Color NameHEX CodeRGB CodeHSL Code
LightSalmon#FFA07Argb(255, 160, 122)hsl(17, 100%, 74%)
Coral#FF7F50rgb(255, 127, 80)hsl(16, 100%, 66%)
Tomato#FF6347rgb(255, 99, 71)hsl(9, 100%, 64%)
OrangeRed#FF4500rgb(255, 69, 0)hsl(16, 100%, 50%)
DarkOrange#FF8C00rgb(255, 140, 0)hsl(33, 100%, 50%)
Orange#FFA500rgb(255, 165, 0)hsl(39, 100%, 50%)

8. Shades of HTML Yellow Color:

Color NameHEX CodeRGB CodeHSL Code
Gold#FFD700rgb(255, 215, 0)hsl(51, 100%, 50%)
Yellow#FFFF00rgb(255, 255, 0)hsl(60, 100%, 50%)
LightYellow#FFFFE0rgb(255, 255, 224)hsl(60, 100%, 94%)
LemonChiffon#FFFACDrgb(255, 250, 205)hsl(54, 100%, 90%)

K

kartik
Improve
Article Tags :

Explore

Lightbox