HTML Color Picker Last Updated : 03 Apr, 2024 Comments Improve Suggest changes Like Article 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 BasicsHEX 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 valuesColor NameHEX CodeRGB ValuesHSL ValuesRed#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 Colors1. Shades of HTML Red Color:Color NameHEX CodeRGB ValuesHSL ValuesDark 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 ValuesDark 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 ValuesDark 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 ValuesDark 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 ValuesDark 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 CodePink#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 CodeLightSalmon#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 CodeGold#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%) Comment More infoAdvertise with us Next Article Image Color Picker - Color Code from Image (HEXA & RGB) kartik Follow Improve Article Tags : Utilities HTML-Questions Similar Reads Online Image ConvertersOnline Image ConvertersThis user-friendly page provides a one-stop shop for all your image conversion needs. Convert your images between popular formats like JPG, PNG, GIF, WEBP, and more, all within seconds! Types of Image Converters:Image to WebP Converter: Convert images to the efficient WebP format, ideal for web opti 4 min read PNG to WebP ConverterPNG to WebP Converter is a tool used for converting PNG to the WebP format, optimizing file sizes without compromising image quality. Easily upload your PNG files and click the convert button. #content-iframe{width: 100%; height: 320px;} @media (max-width: 768px) {#content-iframe{max-width: 100%; mi 3 min read JPG to WebP ConverterOur JPG to WebP Converter easily converts JPG images to WebP format for smaller file sizes and faster loading times on websites. WebP offers smaller file sizes while maintaining similar image quality, making it ideal for optimizing images on your website. #content-iframe{width: 100%; height: 320px;} 3 min read WebP ConverterConvert your image(PNG/JPG/GIF) into WebP format with Online WebP Converter . WebP offers smaller file sizes without compromising quality, ideal for web optimization. #content-iframe{width: 100%; height: 320px;} @media (max-width: 768px) {#content-iframe{max-width: 100%; min-height: 720px; height: a 3 min read Online PDF ConvertersImage to PDF ConverterImage to PDF converter is a tool that transforms various image (jpg, png) formats into a PDF document, consolidating multiple images into a single file. #content-iframe{width: 100%; height: 550px;} @media (max-width: 768px) {#content-iframe{max-width: 100%; min-height: 720px; height: auto;}} @media 4 min read Text to PDF ConverterA Text to PDF Converter is a powerful tool that bridges the gap between plain text files and the widely used Portable Document Format (PDF).#content-iframe{width: 100%; height: 700px;} @media (max-width: 770px) {#content-iframe{max-width: 100%; height: 700px;}} @media (max-width: 576px) {#content-if 3 min read JPG to PDF ConverterJPG to PDF converter is a tool that transforms the JPG/JPEG Image file into a PDF document, consolidating multiple images into a single file. #content-iframe{width: 100%; height: 550px;} @media (max-width: 768px) {#content-iframe{max-width: 100%; min-height: 720px; height: auto;}} @media (max-width: 2 min read PNG to PDF ConverterOur Online PNG to PDF Converter is a user-friendly tool that transforms PNG images into professional-quality PDF files. Whether you need to merge multiple PNGs or arrange them in a specific order, this converter streamlines the process for efficient document management. #content-iframe{width: 100%; 3 min read Online Apps & GamesTyping TestTyping Test measures your typing speed and accuracy. It involves typing a given passage within a set time limit, helping you gauge your proficiency and improve your typing skills. Ideal for personal assessment and skill enhancement. .article--viewer .a-wrapper .content .text iframe { width:100%; min 7 min read 2048 GameThe 2048 game is a simple yet addictive single-player puzzle game that has taken the internet by storm. It's a great way to challenge yourself mentally and improve your strategic thinking.#content-iframe{width: 100%; height: 550px;} @media (max-width: 900px) {#content-iframe {max-width: 100%; height 4 min read Tic-Tac-Toe | Play this Free Online Game Now!Tic-Tac-Toe , also known as noughts and crosses or Xs and Os , is a simple game played on a three-by-three grid. But don’t let its simplicity fool you under the surface lies a fascinating blend of strategy, tactics, and psychology. #content-iframe{width: 90%; height: 630px; } @media (max-width: 900p 3 min read Wheel of Names | Free Random Name Picker#content-iframe{width: 100%; height: 950px; background: white;} @media (max-width: 920px) {#content-iframe{max-width: 100%; height: 1000px;}} @media (max-width: 576px) {#content-iframe{min-height: 900px;}}About Wheel of NamesWheel of Names is an exciting, interactive tool that brings fun and randomn 3 min read Flip a CoinHave you ever needed to make a quick decision but didn’t have a coin handy? Whether you're deciding who goes first or settling a fun argument, the Flip a Coin tool lets you easily and realistically let chance choose for you, all in your web browser. #content-iframe{width: 100%; height: 600px;} @medi 3 min read Online CalculatorsMortgage CalculatorOur Mortgage Calculator can help you estimate your monthly mortgage payment and get a better understanding of your homeownership costs.#content-iframe{width: 100%; height: 800px; background-color: white;} @media (max-width: 768px) {#content-iframe{max-width: 100%; min-height: 720px; height: auto;}} 4 min read Age CalculatorAre you curious about your exact age in years, months, and days? Look no further! Our Age Calculator provides a simple and efficient way to determine your age based on your birth date. #content-iframe{width: 100%; height: 560px;} @media (max-width: 768px) {#content-iframe{max-width: 100%; min-height 4 min read Temperature ConverterThe Temperature Converter tool is versatile and enables conversion between Celsius, Fahrenheit, and Kelvin scales. Whether you’re a scientist, a home cook, or a weather enthusiast, this tool simplifies temperature comparisons and calculations.#content-iframe{width: 100%; height: 320px; background:wh 4 min read Online Code FormattersHTML FormatterHTML Formatter or Beautifier tools help make your HTML code clean and easy to read. They fix the spacing, line up elements properly, and highlight parts of the code, so it's easier to understand and work with. This makes your coding faster, cleaner, and easier to maintain.#content-iframe{width: 100% 3 min read CSS FormatterCSS Formatter (or CSS Beautifier) is a tool that formats the CSS code and enhances the readability of the code. This tool has features to format and minify the CSS code. #content-iframe {width: 100%; height: 720px;} @media (max-width: 768px) {.article--viewer .a-wrapper .content .text #content-ifram 1 min read JavaScript FormatterThis free Online Javascript Formatter/Beautifier allows you to edit, view, analyze, beautify, and format JavaScript codes. It's a simple and easy way to format and beautify Javascript code for collaboration. #content-iframe {width: 100%; height: 720px;} @media (max-width: 768px) {.article--viewer .a 4 min read JSON Formatter and ValidatorA JSON Formatter and Validator is a tool used to format JSON data for better readability and to validate the structure of JSON to ensure it adheres to proper syntax and schema rules. .article--viewer .a-wrapper .content .text iframe { width:100%; min-height: 760px !important; height:auto;} @media sc 3 min read XML Formatter, Validator and MinifierThe XML Formatter, Validator, and Minifier is a powerful online tool designed to streamline your XML file handling. #content-iframe{width: 100%; height: 720px;} @media (max-width: 768px) {#content-iframe{max-width: 100%; min-height: 720px; height: auto;}} @media (max-width: 576px) {#content-iframe{m 3 min read Online PHP FormatterOur free online PHP Formatter tool helps you format your PHP code for better readability and maintainability. Consistent formatting makes code easier to understand, debug, and collaborate on. #content-iframe{width: 100%; height: 720px;} @media (max-width: 768px) {#content-iframe{max-width: 100%; min 3 min read Online Code ConvertersJSON to CSV ConverterJSON to CSV Converter is a tool that converts the JSON file data to a CSV file. #content-iframe{width: 100%; height: 720px;} @media (max-width: 768px) {#content-iframe {max-width: 100%; min-height: 720px; height: auto;}} @media (max-width: 576px) {#content-iframe{min-height: 720px;}}About JSON to CS 4 min read Online CSV to JSON ConverterThe CSV to JSON Converter is a powerful tool that enables data transformation between two popular formats: Comma-Separated Values (CSV) and JavaScript Object Notation (JSON). #content-iframe {width: 100%; height: 720px;} @media (max-width: 768px) {.article--viewer .a-wrapper .content .text #content- 3 min read Online Free CSV to XML ConverterConverting data from CSV (Comma-Separated Values) format to XML (Extensible Markup Language) is a common task in data processing and integration. Whether you’re dealing with large datasets, migrating data between systems, or preparing data for web services, understanding the process of converting CS 4 min read XML to JSON ConverterAre you dealing with XML data and need to convert it to JSON format? Look no further! Our XML to JSON Converter is your go-to tool for seamless data transformation. Whether you’re a developer, data analyst, or system integrator, this free online converter streamlines the process and ensures compatib 2 min read CSS to JS Object ConverterCSS to JS Converter is a tool for translating CSS code into JavaScript. It converts styling instructions to JS syntax, enabling dynamic manipulation and integration within web applications or frameworks.#content-iframe{width: 100%; height: 720px;} @media (max-width: 768px) {#content-iframe{max-width 2 min read SCSS to CSS ConverterOur Online and free SCSS to CSS Converter transforms your SCSS into CSS. It is an essential online tool for web developers and designers.#content-iframe{width: 100%; height: 720px;} @media (max-width: 768px) {#content-iframe{max-width: 100%; min-height: 720px; height: auto;}} @media (max-width: 576p 3 min read Online SASS to CSS ConverterSASS (Syntactically Awesome Style Sheets) is a powerful CSS preprocessor that extends the functionality of standard CSS with features like variables, mixins, and nesting. While SASS offers a more efficient and maintainable way to write styles, browsers only understand plain CSS.This SASS to CSS conv 3 min read LESS to CSS ConverterLESS to CSS Converter Transform your LESS code into standard CSS effortlessly. Our converter streamlines the process, converting LESS styles into compatible and functional CSS.#content-iframe{width: 100%; height: 720px;} @media (max-width: 768px) {#content-iframe{max-width: 100%; min-height: 720px; 2 min read JSON to XML ConverterJSON to XML Converter is a tool that converts the JSON file data to the XML file. #content-iframe {width: 100%; height: 720px;} @media (max-width: 768px) {.article--viewer .a-wrapper .content .text #content-iframe {max-width: 100%; min-height: 720px; height: auto;}} @media (max-width: 576px) {.artic 2 min read Online Color Code ConvertersColor WheelUnderstanding the color wheel is essential for anyone interested in design. Colors play a crucial role in creating visually appealing and effective designs. This article will explore various aspects of color theory, including the color wheel , color schemes , primary, secondary, and tertiary colors 11 min read HTML Color PickerWelcome 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 BasicsHEX Color Codes:HTML color cod 3 min read Image Color Picker - Color Code from Image (HEXA & RGB)The Online Image Color Picker is a useful tool for identifying and extracting colors from an image. Simply upload your image and click on the specific area you want to analyze. The corresponding color of that pixel will be displayed in both RGB and HEXA Color Code formats below. iframe {width: 100%; 3 min read RGB to HEX ConverterRGB to HEX Color Converter Transform RGB values to HEX color codes instantly for web design and development purposes. iframe {width: 100%; height: 680px;} @media (max-width: 768px) {.article--viewer .a-wrapper .content .text iframe {max-width: 100%; min-height: 720px; height: auto;}} @media (max-wid 4 min read Hex To RGB ConverterThis HEX to RGB Color Converter is a tool that helps you to Convert any Hex color code to its RGB value, aiding color representation in web development and design projects. iframe {width: 100%; height: 600px;} @media (max-width: 768px) {.article--viewer .a-wrapper .content .text iframe {max-width: 1 3 min read HSV to RGB ConverterHSV to RGB Converter is a tool that transforms Hue, Saturation, and Value(HSV) inputs into Red, Green, and Blue (RGB) values, displaying both RGB values and colors visually. #content-iframe {width: 100%; height: 600px;} @media (max-width: 768px) {.article--viewer .a-wrapper .content .text #content-i 2 min read RGB to HSV ConverterRGB to HSV Converter is a tool that transforms Red, Green, and Blue (RGB) inputs into values, Hue, Saturation, and Value(HSV) displaying both RGB values and colors visually. iframe {width: 100%; height: 600px;} @media (max-width: 768px) {.article--viewer .a-wrapper .content .text iframe {max-width: 2 min read CMYK to RGB ConverterThe CMYK to RGB Converter is a powerful tool that bridges the gap between two essential color models: CMYK (Cyan, Magenta, Yellow, and Key) and RGB (Red, Green, and Blue). Whether you’re a designer, developer, or simply curious about color representation, understanding this conversion process is cru 2 min read RGB to CMYK ConverterRGB to CMYK Color Converter Transform RGB values to CMYK color codes instantly for web design and development purposes. #content-iframe {width: 100%; height: 500px;} @media (max-width: 768px) {.article--viewer .a-wrapper .content .text #content-iframe {max-width: 100%; min-height: 500px; height: aut 2 min read HSL to RGB ConverterHSL to RGB Color Converter is a tool used to convert HSL (Hue, Saturation, Lightness) color values to RGB (Red, Green, Blue) format using a dynamic web interface. Adjust values or pick colors to instantly visualize conversions bidirectionally. iframe {width: 100%; height: 600px;} @media (max-width: 2 min read HSL to HEX ConverterHSL to HEX Converter is a tool that transforms Hue, Saturation, and Lightness(HSL) inputs into HEX color codes instantly for web design and development purposes. #content-iframe {width: 100%; height: 600px;} @media (max-width: 768px) {.article--viewer .a-wrapper .content .text #content-iframe {max-w 2 min read HSV to Hex ConverterHSV to HEX Color Converter is a powerful tool that bridges the gap between two essential color representations: Hue, Saturation, and Value (HSV) and HEX color codes. ​ #content-iframe {width: 100%; height: 600px;} @media (max-width: 768px) {.article--viewer .a-wrapper .content .text #content-iframe 3 min read Online RGB to HSL ConverterRGB to HSL Converter translates RGB (Red, Green, Blue) color values into HSV (Hue, Saturation, Lightness), offering a different color representation based on hue, saturation, and Lightness. iframe {width: 100%; height: 600px;} @media (max-width: 768px) {.article--viewer .a-wrapper .content .text ifr 3 min read Online Banking ToolsEMI CalculatorEffortlessly estimate your monthly loan payments (EMI) with our free calculator! Plan for your dream car, home, or any big purchase. Compare loan options and make informed financial decisions. iframe {width: 100%; height: 650px;} @media (max-width: 770px) {.article--viewer .a-wrapper .content .text 4 min read Search by IFSC CodeCheck which bank an IFSC code belongs to by inputting your IFSC code of the bank Use this Search by IFSC code feature and double-check the IFSC code before making a NEFT or RTGS transfer to a bank account. #iframe { width: 100%; height: 550px;background-color:white;} @media (max-width: 768px) {.arti 4 min read Other ToolsPrefix to Postfix Converter OnlinePrefix to Postfix Calculator is a free online tool to calculate the postfix of a prefix notation. In this converter user has to put the prefix notation in the input box and postfix notation will be displayed as a result. Prefix Expression: An expression is called the prefix expression if the operato 2 min read Online Postfix to Prefix ConverterOur Postfix to Prefix converter tool helps you convert an expression written in postfix notation (Reverse Polish Notation) to its equivalent prefix notation (Polish Notation). Convert your postfix expressions to prefix notation easily with this free online tool. How to Use Postfix to Prefix Converte 2 min read Modulo Calculator - Find Modulo of Two NumbersThe Modulo calculator is a free online tool to calculate the Modulo(Dividend % Divisor). This geeks for geeks online Modulo calculator makes the calculation faster and it displays the calculation in a fraction of a second. It is an easy-to-use general-purpose calculator that makes it a versatile too 2 min read XOR Calculator Online | Find XOR of two numbersOnline XOR Calculator is a free online tool to calculate XOR value of two integers. This geeksforgeeks online XOR Calculator makes the calculation faster and it displays the conversion in a fraction of seconds. XOR Operator:XOR is a bitwise operator, and it stands for "exclusive or." It performs log 2 min read Online Random Number GeneratorRandom Number Generator is a simple online tool used to generate random numbers between any two given numbers. Generate random positives with or without repeats within a custom range from 0 to 99999. This Random Number Generator is Easy to use and accurate, which can be used for a lot of fun activit 3 min read Like