Skip to main content

Color Picker and List

Introduction to Color Picker and List in HTML​

Web design revolves around a variety of different elements, one of which is color. In HTML, you can use either the color names, Hex color codes, or RGB values to specify the color of the text, background, etc. This tutorial will guide you through the color picker and list in HTML.

HTML Color Picker​

A color picker is a tool that allows users to select colors. This can be found in many graphic design programs and online tools. In HTML, the <input> element with type="color" is used to create the HTML color picker.

Here's a simple example of a color picker:

<form action="">
  <label for="favcolor">Select your favorite color:</label>
  <input type="color" id="favcolor" name="favcolor">
</form>

After running this code, you'll see a color picker. You can click on it to select a color.

HTML Color List​

HTML supports a total of 140 standard color names. You can use these color names directly in your HTML and CSS code.

Here's an example:

<body style="background-color:powderblue;">
  <h1 style="color:blue;">This is a heading</h1>
  <p style="color:red;">This is a paragraph.</p>
</body>

In this example, we used three color names: powderblue for the background color, blue for the heading, and red for the paragraph.

HTML Color Codes (Hex Codes)​

Besides using predefined color names, you can also use Hex color codes. Hex codes are a six-digit combination of numbers and letters defined by its mix of red, green and blue (RGB).

Here's an example:

<body style="background-color:#92a8d1;">
  <h1 style="color:#5b9aa0;">This is a heading</h1>
  <p style="color:#e06377;">This is a paragraph.</p>
</body>

In this example, we used Hex color codes for the background color, heading, and paragraph.

RGB Values in HTML​

RGB values in HTML are defined using rgb(red, green, blue) syntax. Each parameter (red, green, and blue) defines the intensity of the color with a value between 0 and 255.

Here's an example:

<body style="background-color:rgb(255, 99, 71);">
  <h1 style="color:rgb(75, 0, 130);">This is a heading</h1>
  <p style="color:rgb(0,0,255);">This is a paragraph.</p>
</body>

In this example, we have used RGB values for the background color, heading, and paragraph.

That's all for the color picker and list in HTML. Practice using different colors in your HTML code as it will help you create more appealing web pages. Happy coding!