HTML Color Codes

HTML Color Picker for RGB HEX HSL formats

Easily get HTML CSS color codes for your website using color picker, convert color format between HEX, RGB, HSL, HSV.

Pick a Color

Enter color value

Or use HTML5 picker

Selected Color

Red: 0
Green: 255
Blue: 255
HUE (Degree): 180
Brightness: 0.7
Alpha: 1
Hex: #00ffff
RGB: rgb(0, 255, 255)
HSL: hsl(180, 100%, 50%)
Color Group: Cyan
Share:
CSS3 color example

<style>
  div {
    color: #00ffff;
    color: rgb(0, 255, 255);
    color: hsl(180, 100%, 50%);
  }
</style>
Darkest and Ligthen styles

<style>
  .darken {
    color: rgb(0, 230, 230);
  }
  .lighten {
    color: rgb(25, 255, 255);
  }
</style>

Get Colors from an Image

get pixel color from pic

Pick Color and make Palette

select color and create palette

What is an HTML Color Code?

HTML color codes are a way to specify colors in web design. These codes are used in HTML and CSS to define the colors of elements such as text, backgrounds, borders, and more. Understanding HTML color codes is essential for creating visually appealing and consistent web pages.

For example, the color red can be identifier using the following formats:

Types of HTML Color Codes


Hexadecimal Color Codes:
  • The most common way to specify colors in HTML and CSS is using hexadecimal (hex) color codes. A hex color code is a six-digit combination of numbers and letters defined by its mix of red, green, and blue (RGB) components.
  • Format: #RRGGBB
  • Example: #FF5733 represents a shade of orange.
  • Each pair of digits corresponds to the intensity of red, green, and blue, respectively, on a scale from 00 (no intensity) to FF (full intensity).
RGB Color Codes:
  • RGB color codes define colors based on their red, green, and blue components.
  • Format: rgb(red, green, blue)
  • Example: rgb(255, 87, 51) is the RGB equivalent of #FF5733.
  • Each component (red, green, and blue) is specified as a number between 0 and 255
RGBA Color Codes:
  • Similar to RGB, but includes an alpha component for opacity.
  • Format: rgba(red, green, blue, alpha)
  • Example: rgba(255, 87, 51, 0.5) specifies the same color with 50% opacity.
HSL Color Codes:
  • HSL stands for Hue, Saturation, and Lightness.
  • Format: hsl(hue, saturation%, lightness%)
  • Example: hsl(9, 100%, 60%) is another way to represent the color #FF5733
  • Hue is a degree on the color wheel (from 0 to 360), saturation is a percentage (0% is grayscale, 100% is full color), and lightness is also a percentage (0% is black, 100% is white).
HSLA Color Codes:
  • Similar to HSL, but includes an alpha component for opacity.
  • Format: hsla(hue, saturation%, lightness%, alpha)
  • Example: hsla(9, 100%, 60%, 0.5) specifies the same color with 50% opacity.
Using HTML Color Codes:

HTML color codes can be used in various CSS properties to style web elements. For example:

<style>
    .text-color {
        color: #FF5733;
    }
    .background-color {
        background-color: rgb(255, 87, 51);
    }
    .border-color {
        border: 2px solid hsl(9, 100%, 60%);
    }
</style>
<p class="text-color">This text is orange.</p>
<div class="background-color">This background is orange.</div>
<div class="border-color">This border is orange.</div>

In this example, the text, background, and border are styled using different types of HTML color codes, all representing the same shade of orange.

HTML color codes are a fundamental aspect of web design, allowing developers to define and manipulate colors precisely. By understanding hex, RGB, RGBA, HSL, and HSLA color codes, you can create visually cohesive and appealing web pages that enhance the user experience.