HTML color codes are needed when implementing a website design, I create the layout structure and incorporate content in text and images. I must format typography and colors in WordPress theme settings and configure and code in CSS or within specific page builder elements.
There are about 140 standard HTML color codes (names), but it was determined that monitors could display up to 256 colors in the early days. With newer technology, it’s now possible to display thousands of colors — creating very selective and detailed color palettes for digital use.
“Hex” Codes
The most popular are Hex color codes; three-byte hexadecimal numbers* (meaning they consist of six digits), with each byte, or pair of characters in the Hex code, representing the intensity of red, green, and blue, respectively. So, in pairs, we see #XX XX XX with the first pair corresponding to Red, the second pair to Green, and the last pair to Blue.
*Sometimes referred to as a Hex Triplet
Hex codes are a more compact way to communicate with applications whether on websites or even a local application, such as specifying a matching brand color in Microsoft Word.
Hex code byte values range from 00, the lowest intensity of a color, to FF, which represents the highest intensity. The color white, for example, is made by mixing each of the three primary colors at their full intensity, resulting in the Hex color code of #FFFFFF.
Black, the absence of any color on a screen display, is the opposite, with each color displayed at its lowest possible intensity and a Hex color code of #000000.
Understanding the basics of Hex color code notation, I can easily create grayscale colors since they consist of equal intensities of each color. So a Charcoal Gray is #454545, whereas a Pewter Gray is #999999.
The three primary colors, red, green, and blue, are made by mixing the highest intensity of the desired color with the lowest intensities of the other two:
#FF0000 #00FF00 #0000FF
With modern browsers supporting the full spectrum of 24-bit color, there are 16,777,216 different color possibilities.
Credit Source: https://htmlcolorcodes.com/
“RGB” Codes or Values
RGB or Red Green Blue is a digital value for colors that is based upon the percentage of those three colors to achieve the desired mix. With RGB coding for color in CSS, I can more easily control device translation of colors and easily add instructions about the percent opacity that should render. The values range from 0 to a maximum of 255.
RGB color codes are sometimes called RGBA color codes when they include an additional value for an alpha channel. These are one of the most popular ways to define colors on web pages. They are written in the following way:
color: rgb(0, 0, 0); /* black */
color: rgb(255, 255, 255); /* white */
What’s an alpha channel?
As mentioned above, it’s possible to code RGBA or the three channels representing Red, Green, and Blue with a fourth Alpha Channel. Alpha indicates how opaque each pixel is and allows an image to be combined over others using alpha compositing, with transparent areas and anti-aliasing of the edges of opaque regions.
HSL Codes
HSL stands for hue, saturation, and lightness. HSLA color values are an extension of HSL with an Alpha channel (opacity) – this is similar to the expression used for alpha channel with RGBA Codes. Formats like RGB and Hex are more machine-readable than human-readable. HSL, the opposite, is meant to be more understandable by humans. HSL is a more recent and spontaneous way to work with colors. Also seen is HSV (for hue, saturation, value; also known as HSB, for hue, saturation, brightness). These codes were developed as alternative representations of the RGB color model, designed in the 1970s by computer graphics researchers to align more closely with how human vision perceives color-making attributes.
I do not use HSL on WordPress websites at present.
Non-Digital (Print Media) Color Codes
CMYK
CMYK color code is used in the printing field. CMYK comes in the form of 4 codes, each representing the percentage of the color used. The primary colors of subtractive synthesis are cyan, magenta, and yellow, with the fourth as black.
Printers use CMYK codes to provide precise ink matches. For example, Cerulean Blue has a CMYK formula of (94%, 32%, 0%, 9%) that translates to 94% Cyan, 32% Magenta, 0% Yellow, and 9% Black.
It’s important too that images and sometimes even document creation are created in specific color space. High-resolution photos are often set in the CMYK color space and should convert to RGB color space for websites or digital documents (like a PDF brochure).
Pantone & PMS
Pantone is a color system used widely in the industry, from setting formularies for inks used in print to dyes in textiles or plastics to pigment ratios in paints. When I use my Pantone color deck like the one in the image above (hearkening from my more intensive graphic design days), the colors have a Pantone name and PMS or Pantone Matching System. Again, in the industries that use the proprietary PMS, there will be consistency across the board to how each specific PMS value is interpreted (assuming that devices are calibrated properly) and processed.
Pantone Color Systems used for graphic design include color decks for both Solid and Processed colors.
Solid colors (sometimes call spot colors) are the truest representation of color intent in graphic arts. Solid color printing, also known as spot printing or offset printing, is the process by which a single color is formulated and then applied through print.
Spot colors, also known as PMS colors and officially as Pantone Matching System colors. Are specific color formulas that will reproduce accurately in print. Instead of simulating colors by combining primary colors, spot (PMS) colors are pre-mixed with existing and published color formulas. Because of this, you are nearly guaranteed that your PMS 186 from one printer will be matched by a PMS 186 from another printer. Better yet, the ink factory often pre-mixed these PMS colors, leaving even less to chance.
“Spot” colors refer to the actual printing process by which they are applied. It is possible to have spot colors that have no color to them at all. Spot varnishes are glossy or dull varnishes applied to specific areas in a printed piece to achieve specific results.
Spot colors may also be used in design applications to indicate die-lines (this is a cut out shape process), embosses, foils and heat stamps.
Process colors utilize a limited number of inks, such as cyan, magenta, yellow and black (CMYK), applied in different ratios to create a variety of colors. Process colors are generally used when color accuracy or range is less critical.
Source: Pantone.com
When I have created a brand identity and established a company’s brand standard, once I’ve picked (and have approval) for the color palette, I can share all the popular color codes for the same color in the standard. The Pantone deck provides the PMS for each color, the CMYK formula (usually used by printers), and then for digital applications: RGB and Hex values. Shown below is a real example excerpted from one of a client brand standard documenting official colors for digital and print use.
