HTML, as everybody knows, is called HyperText Markup Language, which is used to display texts on your browser and with the help of its special aiding scripts like JavaScript and CSS, that content of your become beautiful to look at. Color coding is part of that beautifying your HTML web page.
Color code in HTML works as an identifier that identifies and represents that color on the web. The commonly used color coding is of HEX that represents ‘Hexadecimal’ code for that color. Similarly, there are other color codes like RGB, short for ‘Red, Green, Blue’. Another color code called HSL, short for ‘Hue, Saturation, Lightness’. The HSL is an added advantage when selecting the color of your choice.
Since generally, the use of hexadecimal codes are preferred, we have explained the hexadecimal codes to our best. The Hexadecimal color codes contain a symbol, a hash ( # ) and a set of six digits or numbers. They are in the hexadecimal number system, So an ‘FF’ is the highest number and represents ‘255’ from the hexadecimal number system.
These six digits contain three pairs representing the RB color code. Out of these six digits, the first pair of two digits represents the intensity of your ‘Red’ color. So an ‘FF’ for the place of our first pair will represent the red color with maximum intensity. ‘00’ is used for the least intensity and ‘FF’ for the highest. For getting a ‘Green’ color, the middle pair represents the intensity.
Similarly, for ‘Blue’, the last pair represents the intensity.
- So a hexadecimal number such as #FF0000 will result in??
- A hexadecimal number such as #00FF00 will result in? ??
- And a hexadecimal number such as #0000FF will result in??
- To get a yellow color, which is a combination of ‘Red’ and ‘Green’, a similar hexadecimal number is created, such as #FFFF00.
HTML Color Picker
A color picker, when created, allows a user to ‘pick’ a color of his own choice. The most standard color picker is used in Windows applications like in MS Word or Paint and others. You all are familiar with a color picker; you can jog your memory by looking at the picture below:
An input type as “color” is used for creating input fields that will contain a color. But some browsers like Internet Explorer 11 and older versions do not support this input type. Thus depending on the browser, a color picker pops up when you use the input type. Some browsers will simply turn this input field into a text box like below:
Thus when a supported browser is used, the same code will result in the following color picker palette.
And when that colored box is clicked, a color palette pops up. Here I am using Google Chrome version ‘ 78.0.3904.97‘, which supports the input type color attribute.
The code for creating such a color picker will be explaining in the next section.
Source Code for creating a color picker
Following is an explanation for creating the simplest color picker in HTML. See the code below:
Code
<body> <form action="HTMLColorPicker.html"> Select your favorite color: <input type="color" name="favcolor" id="color" > </form> </body>
The above HTML code contains a FORM element that uses an input type called ‘color’. This color input type creates and displays the simplest color picker, windows standard color picker. It allows the user to select a color of his choice.
The input type as color creates a text box or more of a button that has ‘Black’ as its default background color. When we click on it, it displays a choice for colors for the user.
Observe the working of this color picker given below:
Step 1: Clicking on the button with ‘Black’ as its default background color.
The above code simply creates a button as shown above.
Step 2: Click and Select your new color.
Step 3: We selected a bright Green color for demonstration. Click on the?‘OK button.
In the above screen-shots, you can easily see the selected color is shown in the last screen-shot.
The input type ‘color’ provides this simple functionality of a color picker in HTML5. After picking your color, it is your choice of what the selected color can be used for.
In the following example,?I incremented the above example and modified it with some inclusions.
The following example is a combination of HTML and Javascript. This example has a FORM element that uses the input type ‘color’ tag. This FORM, when submitted, our JAVASCRIPT is triggered.
Observe the source code for the FORM element below:
Code:
<body> <form action="HTMLColorPicker.html"> Select your favorite color: <input type="color" name="favcolor" id="color" > <input type="submit" onclick = "ReturnColor()" id="submit" /> </form> </body>
We added a new line to our previous program. A submit button. This submit button is when clicked; our Java script is triggered, which is given below:
function ReturnColor(c)
{
//saving the selected color value by ID
var c= document.getElementById("color").value;
var str= new String ("You chose:");
//The color is saved as its HEX color code.
document.write(str+c);
}
When the ‘Submit’ button is clicked, our function in javascript is triggered. The above function, ReturnColor (), returns the HEX code, that is, Hexadecimal code for the selected color by our color picker. When the code is executed, the following is our output.
The above output is in the HEX code. The 6 numbers represent the inclusion of Red, Green and Blue colors resulting in the selected color. This HEX code can also be converted easily into RGB code.
Similarly, we can save the above code and set it as a background color or a font color for the user. To do so, we added a few more lines of code into our already existing source code.
Following is the complete code, with the HTML body remaining the same:
<script>
function ReturnColor(c)
{
//saving the selected color value by ID
var c= document.getElementById("color").value;
var str= new String ("You chose:");
//The color is saved as its HEX color code
document.write(str+c);
document.write("<br/>");
//A HEX color code can be converted into RGB code
var R=c.slice(1,3);
var G=c.slice(3,5);
var B=c.slice(5);
//Displaying the corresponding RGB code
document.write("In RGB format, RGB("
+ parseInt(R,16) + ","
+ parseInt(G,16) + ","
+ parseInt(B,16) + ")");
document.write("<br/>");
//Setting our selected color as Font color
var color = c;
var str1 = "Your color will appear as this font color";
var str2 = str1.fontcolor(c);
document.write(str2);
//Setting our selected color as Background color
document.write("<div style='border: solid; height: 90px; width: 90px; background-color:"+color+"'/>");
}
</script>
This is our complete script. When the code is executed, and a color is selected, the following is the output that is displayed.
Conclusion
There are many ways and many combinations that can help you to create a color picker, that too smart one. For example, with the combination of HTML5 and CSS and JavaScript, you can use yet another element called ‘canvas’ that has its own libraries that helps create a lightweight, small and cross-browser color picker. But that’s for another time.
The above is the detailed content of HTML Color Picker. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1793
16
1736
56
1587
29
267
587
Integrating CSS and JavaScript effectively with HTML5 structure.
Jul 12, 2025 am 03:01 AM
HTML5, CSS and JavaScript should be efficiently combined with semantic tags, reasonable loading order and decoupling design. 1. Use HTML5 semantic tags, such as improving structural clarity and maintainability, which is conducive to SEO and barrier-free access; 2. CSS should be placed in, use external files and split by module to avoid inline styles and delayed loading problems; 3. JavaScript is recommended to be introduced in front, and use defer or async to load asynchronously to avoid blocking rendering; 4. Reduce strong dependence between the three, drive behavior through data-* attributes and class name control status, and improve collaboration efficiency through unified naming specifications. These methods can effectively optimize page performance and collaborate with teams.
Implementing Clickable Buttons Using the HTML button Element
Jul 07, 2025 am 02:31 AM
To use HTML button elements to achieve clickable buttons, you must first master its basic usage and common precautions. 1. Create buttons with tags and define behaviors through type attributes (such as button, submit, reset), which is submitted by default; 2. Add interactive functions through JavaScript, which can be written inline or bind event listeners through ID to improve maintenance; 3. Use CSS to customize styles, including background color, border, rounded corners and hover/active status effects to enhance user experience; 4. Pay attention to common problems: make sure that the disabled attribute is not enabled, JS events are correctly bound, layout occlusion, and use the help of developer tools to troubleshoot exceptions. Master this
Configuring Document Metadata Within the HTML head Element
Jul 09, 2025 am 02:30 AM
Metadata in HTMLhead is crucial for SEO, social sharing, and browser behavior. 1. Set the page title and description, use and keep it concise and unique; 2. Add OpenGraph and Twitter card information to optimize social sharing effects, pay attention to the image size and use debugging tools to test; 3. Define the character set and viewport settings to ensure multi-language support is adapted to the mobile terminal; 4. Optional tags such as author copyright, robots control and canonical prevent duplicate content should also be configured reasonably.
Explaining the HTML5 `` vs `` elements.
Jul 12, 2025 am 03:09 AM
It is a block-level element, suitable for layout; it is an inline element, suitable for wrapping text content. 1. Exclusively occupy a line, width, height and margins can be set, which are often used in structural layout; 2. No line breaks, the size is determined by the content, and is suitable for local text styles or dynamic operations; 3. When choosing, it should be judged based on whether the content needs independent space; 4. It cannot be nested and is not suitable for layout; 5. Priority is given to the use of semantic labels to improve structural clarity and accessibility.
Submitting Form Data Using New HTML5 Methods (FormData)
Jul 08, 2025 am 02:28 AM
It is more convenient to submit form data using HTML5's FormData API. 1. It can automatically collect form fields with name attribute or manually add data; 2. It supports submission in multipart/form-data format through fetch or XMLHttpRequest, which is suitable for file upload; 3. When processing files, you only need to append the file to FormData and send a request; 4. Note that the same name field will be overwritten, and JSON conversion and no nesting structure need to be handled.
Understanding HTML5 Media Source Extensions (MSE)
Jul 08, 2025 am 02:31 AM
MSE (MediaSourceExtensions) is part of the W3C standard, allowing JavaScript to dynamically build media streams, thus enabling advanced video playback capabilities. It manages media sources through MediaSource, stores data from SourceBuffer, and represents the buffering time range through TimeRanges, allowing the browser to dynamically load and decode video clips. The process of using MSE includes: ① Create a MediaSource instance; ② Bind it to an element; ③ Add SourceBuffer to receive data in a specific format; ④ Get segmented data through fetch() and append it to the buffer. Common precautions include: ① Format compatibility issues; ② Time stamp pair
Displaying progress bars with the HTML5 `` tag.
Jul 08, 2025 am 02:24 AM
HTML5 tags can directly implement web page progress bars. 1. The basic usage is to set the value and max attributes, such as displaying 30% progress; 2. If the progress is unknown, the value can be omitted and only set max, which means an uncertain state; 3. You can customize the style through CSS, and browser compatibility needs to be handled; 4. It is often used in scenarios such as uploading files, form progress, and game loading; 5. Pay attention to avoid using it when the task is completed too quickly, and consider the compatibility issues of the old version of IE.
What are the new input types available in HTML5 forms?
Jul 12, 2025 am 03:07 AM
HTML5introducednewinputtypesthatenhanceformfunctionalityanduserexperiencebyimprovingvalidation,UI,andmobilekeyboardlayouts.1.emailvalidatesemailaddressesandsupportsmultipleentries.2.urlchecksforvalidwebaddressesandtriggersURL-optimizedkeyboards.3.num
