Color Hex Convert Hex RGB CMYK HSL Colors

Color Hex – Convert Hex to RGB and RGB to Hex

When working with static websites, wordpress, CSS and graphics programs like Adobe Photoshop a user quickly learns about things they never knew existed or things they believed they would never use in life like the subject of this post “converting colors” to repeatable standards like Hexadecimal, RGB and CMYK to name a few. The reason for this is different systems use different methods of specifying color. The color needs of a website are different than that of someone in the printing industry or even Adobe Photoshop. Websites mostly use what’s called “Hex” color space which is short for “Hexadecimal”. (See explanation at the bottom of the page). The hex format is most common on websites and is specified in CSS style sheets. Hex codes are easily recognized by the # sign and six characters. Example the hex color space for white is #ffffff. Many WordPress themes that allow for color customization require users to pick from a color pallet or by entering a hex color directly. Often a color pallet doesn’t include the color a user wants so it needs to be specified. To that end my favorite tool for this and many other color related tasks comes by way of a website called Color Hex.

Picture of the Color Hex Tool to Convert RGB to Hex and Hex to RGB

Color Hex is a website that contains many useful tools for those who deal with colors on a regular basis. For starters Color Hex allows you enter a color in a search box in any of the common formats like Hexadecimal, RGB, CMYK, HSL, HSV etc. Once the color is submitted users are delivered to an awesome results page that will show the entered color converted into all the color spaces. I frequently use Color Hex to convert RGB to Hex and Hex to RGB, but the website does so much more. It will display shades of the users color, it will offer pallets that take advantage of the user color. It will also provide users with CSS and html examples for using the color on a website. I personally find the related colors and shades tool very helpful. Best of all Color Hex is free. Visit them here.

Microsoft Excel Custom Colors

I use Color Hex when customizing my Elegant Themes Divi and Extra color pallets as well with the CSS Hero plugin. Oddly enough I use it with Microsoft Excel. I use a workbook to keep track of my website color pallets and I fill the cells with my custom colors in RGB format.

Color Hex Color Codes

Color-hex gives information about colors including color models (RGB,HSL,HSV and CMYK), Triadic colors, monochromatic colors and analogous colors calculated in color page. Color-hex.com also generates a simple css code for the selected color. Html element samples are also shown below the color detail page. Simply type the 6 digit color code in the box above and hit enter.

What is a Hexadecimal or Hex color code?

A hex triplet is a six-digit, three-byte hexadecimal number used in HTML, CSS, SVG, and other computing applications to represent colors. The bytes represent the red, green and blue components of the color. One byte represents a number in the range 00 to FF (in hexadecimal notation), or 0 to 255 in decimal notation.

Example: The Hex Code for black is #111111

What is a RGB color?

RGB (red, green, and blue) refers to a system for representing the colors to be used on a computer display. Red, green, and blue can be combined in various proportions to obtain any color in the visible spectrum. Levels of R, G, and B can each range from 0 to 100 percent of full intensity. Each level is represented by the range of decimal numbers from 0 to 255 (256 levels for each color), equivalent to the range of binary numbers from 00000000 to 11111111, or hexadecimal 00 to FF. The total number of available colors is 256 x 256 x 256, or 16,777,216 possible colors.

In the Hypertext Markup Language (HTML), the color for a page background or text font is specified by an RGB value, expressed with six digits in hexadecimal format. The first and second digits represent the red level; the third and fourth digits represent the green level; the fifth and sixth digits represent the blue level. In order to actually display the colors for all possible values, the computer display system must have 24 bits to describe the color in each pixel. In display systems or modes that have fewer bits for displaying colors, an approximation of the specified color will be displayed.

In creating Web pages, the number of RGB values that are recommended for use is considerably reduced – first, by the fact that many displays can handle only 256 colors and, secondly, because PC and Mac Web browsers handle 40 of these 256 colors slightly differently. In order to ensure that your colors will be consistent on both browsers, a palette of the 216 colors common to both PC and Web browsers is recommended. Any color outside of these will be dithering (approximated).

Example: The RGB color space for black is 17,17,17

What is a CMYK color?

CMYK is a scheme for combining primary pigments. The C stands for cyan (aqua), M stands for magenta (pink), Y for yellow, and K for Key. The key color in today’s printing world is black but it has not always been. During the early days of printing, the colors used for Key have been brown, blue, or black — whichever was the cheapest ink to acquire at any given time.

The CMYK pigment model works like an “upside-down”version of the RGB (red, green, and blue) color model. Many paint and draw programs can make use of either the RGB or the CMYK model. The RGB scheme is used mainly for computer displays, while the CMYK model is used for printed color illustrations (hard copy).

There is a fundamental difference between color and pigment. Color represents energy radiated by a luminous object such as a cathode ray tube (CRT) or a light-emitting diode (LED). The primary colors are red (R), green (G), and blue(B). When you see a red area on a CRT, it looks red because it radiates a large amount of light in the red portion of the electromagnetic radiation spectrum (around 750 nanometers), and much less at other wavelength. Pigments, as opposed to colors, represent energy that is not absorbed by a substance such as ink or paint. The primary pigments are cyan (C), magenta (M), and yellow (Y). Sometimes black (K) is also considered a primary pigment, although black can be obtained by combining pure cyan, magenta, and yellow in equal and large amounts. When you see yellow ink on a page, it looks yellow because it absorbs most energy at all visible wavelengths except in the yellow portion of the spectrum (around 600 nanometers), where most of the energy is reflected.

The primary pigments and the primary colors are mathematically related.Any two pure radiant primary colors (R, G, or B), when combined,produce radiation having the appearance of one of the pure non-black primary pigments (C, M, or Y). Any two pure non-black primary pigments, when mixed, produce a substance having the appearance of one of the pure primary colors. These relationships are depicted in the illustration.

The primary colors RGB, combined at 100-percent brilliance,produce white. The primary pigments CMY, combined at maximum concentration,produce black. Shades of gray result from the equal (but not maximum) brilliance of R,G, and B, or from equal (but not maximum) concentrations of C, M, and Y. If you have a paint or draw program such as Corel DRAW! that employs both the RGB and the CMYK schemes, you can investigate these relationships by filling in regions with solid colors using one mode, and examining the equivalent in the other mode. After a while you will develop an intuitive sense of how these schemes work, how they resemble each other, and how they differ.

In general, the RGB mode should be used when preparing graphics intended mainly for viewing on computer displays. The CMYK mode should be used when creating illustrations for print media.

Example: The CMYK value for black is 0.00 0.00 0.00 0.93

What is a HSL color?

An HSL color value is specified with: hsl(hue, saturation, lightness). Hue is a degree on the color wheel (from 0 to 360) – 0 (or 360) is red, 120 is green, 240 is blue. Saturation is a percentage value; 0% means a shade of gray and 100% is the full color. Lightness is also a percentage; 0% is black, 100% is white.

Example: The HSL value for black is 0.00 0.00 0.07

What is a HSV color?

Unlike RGB and CMYK, which are defined in relation to primary colors, HSV is defined in a way that is similar to how humans perceive color.

HSV is named as such for three values: hue, saturation, and value.

This color space describes colors (hue or tint) in terms of their shade (saturation or amount of gray) and their brightness value.

Note: Some color pickers (like the one in Adobe Photoshop) use the acronym HSB, which substitutes the term “Brightness” for value, but HSV and HSB are the same color model.

How to Use the HSV Color Model

The HSV color wheel is sometimes depicted as a cone or cylinder, but always with these three components:

Hue

Hue is the color portion of the color model, and is expressed as a number from 0 to 360 degrees:

Saturation

Saturation is the amount of gray in the color, from 0 to 100 percent. A faded effect can be had from reducing the saturation toward zero to introduce more gray.

However, saturation is sometimes viewed on a range from just 0-1, where 0 is gray and 1 is a primary color.

Value (or Brightness)

Value works in conjunction with saturation and describes the brightness or intensity of the color, from 0-100 percent, where 0 is completely black and 100 is the brightest and reveals the most color.

How HSV Is Used

The HSV color space is used when selecting colors for paint or ink because HSV better represents how people relate to colors than does the RGB color space.

The HSV color wheel is also used to generate high-quality graphics. Although less well known than its RGB and CMYK cousins, the HSV approach is available in many high-end image editing software programs.

Selecting an HSV color begins with picking one of the available hues, which is how most humans relate to color, and then adjusting the shade and brightness value.

Example: The HSV value for black is 0° 0° 7°

What is CIE XYZ color coordinate system?

The CIE XYZ color space encompasses all color sensations that are visible to a person with average eyesight. That is why CIE XYZ (Tristimulus values) is a device-invariant representation of color. It serves as a standard reference against which many other color spaces are defined.

Go here

Example: The CIE XYZ Value for black is 0.5328 0.5605 0.6104

What is Yxy Color Space?

Go here

Example: The CIE Yxy Value for black is 0.5605 0.3127 0.3290

What is Hunter Lab color space?

Go here

Example: The Hunter Lab color space value for black is 7.4867 -0.3984 0.4066

What is CIE-Lab color?

Go here

Example: The CIE-Lab color space value for black is 5.0630 0.0025 -0.0016