Color Picker and Converter

Color Models

A color model is a system for describing colors as numbers. Different models are used in different contexts depending on whether the output is a screen, a printer, or a design specification.

RGB / RGBA

Format

RGB defines colors by mixing red, green, and blue light. Each channel ranges from 0 to 255. rgb(255, 0, 0) is pure red. rgb(255, 255, 255) is white. The A (alpha) channel adds transparency, ranging from 0 (fully transparent) to 1 (fully opaque). For example, rgba(255, 0, 0, 0.5) is semi-transparent red. RGB is the native color model for screens and digital displays.

History

The RGB model is rooted in the Young-Helmholtz theory of trichromatic color vision from the 19th century. James Clerk Maxwell conducted the first RGB color photography experiments in 1861. RGB became the standard for electronic displays with the development of color CRT televisions in the 1930s and 1940s, and was later adopted for computer monitors. The sRGB color space was formally adopted as the web standard in HTML 3.2 in January 1997.

HEX / HEXA

Format

HEX is a compact notation for RGB values using hexadecimal. #FF0000 is the same as rgb(255, 0, 0). Each pair of hex digits represents one channel: #RRGGBB. The 8-digit form #RRGGBBAA adds an alpha channel, where 00 is fully transparent and FF is fully opaque. For example, #FF000080 is red at 50% opacity. Shorthand forms like #F00 expand to #FF0000.

History

Hex color notation originated in early web browsers in the mid-1990s. The first versions of Mosaic and Netscape Navigator inherited the X11 color name system. CSS Level 1, published in December 1996 by Hakon Wium Lie and Bert Bos, formally standardized hex triplets as the primary way to specify colors on the web.

HSL / HSLA

Format

HSL describes color as hue, saturation, and lightness. Hue is a degree on the color wheel (0-360): 0 is red, 120 is green, 240 is blue. Saturation (0-100%) controls color intensity. Lightness (0-100%) controls brightness, where 0% is black and 100% is white. HSL is often more intuitive than RGB for selecting colors because you can adjust brightness and saturation independently.

History

HSL was first described by George H. Joblove and Donald Greenberg in a 1978 paper in Computer Graphics. It was created to solve a fundamental problem with RGB: mixing red, green, and blue values is unintuitive for humans. HSL rearranges the RGB color space so that artists and designers can think in terms of color (hue), vividness (saturation), and brightness (lightness), which maps more closely to how people naturally describe colors.

HSV / HSB

Format

HSV (hue, saturation, value) is similar to HSL but uses "value" (brightness) instead of lightness. At 100% value, fully saturated colors are pure and bright. HSV maps more naturally to how color pickers work: the saturation/brightness panel adjusts S and V while the hue slider adjusts H.

History

HSV was described by Alvy Ray Smith in August 1978 while working at the New York Institute of Technology's Computer Graphics Lab. It was published in the same issue of Computer Graphics as HSL. Smith designed HSV for use in an early digital painting program, where artists needed an intuitive way to select colors on screen. HSV's cylinder model made it natural to implement as a color picker with a hue slider and a saturation/brightness panel.

CMYK

Format

CMYK (cyan, magenta, yellow, key/black) is used in print. While RGB is additive (light), CMYK is subtractive (ink). Each value represents the percentage of that ink applied. cmyk(0, 100, 100, 0) produces red. Converting between RGB and CMYK is approximate because they cover different color ranges (gamuts).

History

The foundations of CMYK date back to Jacob Christoph Le Blon, who invented halftone color printing using separate copper plates around 1710. He initially used red, yellow, and blue plates, and later added a black plate for sharper outlines and text. The modern four-color CMYK process was first implemented in the 1890s for color newspaper illustrations. The black plate is called the "key" plate because it carries the fine detail that the other plates are aligned (keyed) to.

CSS Color Formats

Modern CSS supports several color notations:

• #FF5733 or #ff5733 (HEX)
• rgb(255, 87, 51) or rgba(255, 87, 51, 0.5)
• hsl(14, 100%, 60%) or hsla(14, 100%, 60%, 0.5)
• Named colors: red, cornflowerblue, rebeccapurple (148 named colors total)