RGB Color Converter

RGB vs Hex vs HSL

There are multiple ways to define colors for HTML elements, including:

• by color names,
• as RGB values,
• as hexadecimal values,
• as HSL values.

Color names

CSS defines 147 named colors, including 16 basic colors, such as "white", "black", "red", "green", etc., and 141 extended colors, for example: "whitesmoke", "darkblue", "papayawhip", "mediumseagreen", and others. Note, some colors have two different names assigned, for instance: "aqua" and "cyan", "darkgray" and "darkgrey".

Predefined color names can be directly used in CSS rules:

<div style="background-color: blue;">
  <p style="color: white;">White text in blue box.</p>
</div>

RGB values

RGB color notations:
rgb(red, green, blue)
or
rgba(red, green, blue, alpha)

This notation is used to specify a color by indicating the intensity of its red, green, and blue components. Each color component is represented by a number from 0 to 255, where 255 defines the maximum color intensity.

RGBA value includes an additional parameter defining opacity (alpha channel). The alpha channel value ranges from 0 (fully transparent) to 1 (fully opaque).

For example:

<div style="background-color: rgba(0, 0, 255, 0.5);">
  <p style="color: rgba(255, 255, 255);">White text in blue semi-transparent box.</p>
</div>

To convert a RGB color (e.g., rgb(255, 128, 64)) to hexadecimal, the value of each color component is converted to its hexadecimal representation. In this case, 255 becomes FF, 128 becomes 80, and 64 becomes 40. Therefore, the equivalent hex color is #FF8040.

Hexadecimal values

Hexadecimal notations:
#RRGGBB
or
#RGB

Hexadecimal color value starts with a hash mark (#), following by six hexadecimal characters (0-9 and A-F). Each pair of characters (RR, GG, BB) represents a color component - red, green, and blue, respectively.

In the shorthand hexadecimal color notation (#RGB) each character (R, G, B) is equivalent to a two-character color code (RR, GG, BB) with the same hexadecimal digit in both positions. Specifically, "F" represents "FF", "A" - "AA", "9" - "99", and so on. As a result, #FFF is equivalent to #FFFFFF (white), #00A to #0000AA (a shade of blue), etc.

For example:

<div style="background-color: #0000FF;">
  <p style="color: #FFF;">White text in blue box.</p>
</div>

HSL values

HSL notations:
hsl(hue, saturation, lightness)
or
hsla(hue, saturation, lightness, alpha)

HSL value defines a color in terms of its hue, saturation, and lightness. Hue is a degree on the color wheel (0 to 360), saturation is a percentage (0% to 100%), and lightness is a percentage (0% to 100%).

HSLA value also includes a parameter for the alpha channel, representing opacity. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all).

For example:

<div style="background-color: hsl(240, 100%, 50%, 0.5);">
  <p style="color: hsl(0, 0%, 100%);">White text in blue semi-transparent box.</p>
</div>