Loading...

Loading...

Color Picker

Using the Hex Color Picker

Our color picker lets you select from the millions of available colors, finding hex codes (or RGB, HSL, HSV and OKLCH codes… but more on that later). Simply click and drag your cursor around the color space, or enter a code to see various palette options.

How many hex codes are there?

There are exactly 16,777,216 possible hex color codes. Hex codes use a six-digit hexadecimal format (#RRGGBB), with each pair representing values from 00 to FF (0 to 255 in decimal). Multiplying the 256 possible values per color channel (red, green, and blue), we get 256×256×256=16,777,216 (or 256³) unique combinations.

Color Shades, Tints and Tones

Color shades, tints, and tones are fundamental concepts for refining and expanding color palettes. By adjusting the darkness, brightness, or intensity of a base color, you can create harmonious color schemes and variants of a base color to use in interface and web design.

Color shades

A shade is created by mixing a base color with black, resulting in a darker variation of the original color. Shades add depth and contrast, and are commonly used to provide visual weight or establish hierarchy within designs.

Color tints

Tints are created by adding white to a base color, producing lighter, softer versions of the original hue. Tints help establish visual balance, soften the overall aesthetic, and are often used for backgrounds and borders, or paired with a shade.

Color tones

A color tone results from adding gray (a combination of black and white) to a base color, which reduces its intensity and saturation. Tones are useful for creating sophisticated, subtle palettes and can introduce a sense of harmony and balance in designs.

Color Harmonies

Color harmonies are combinations of colors chosen based on their relationships on the color wheel. These combinations create pleasing and balanced visuals, and can be a great starting point for developing a brand palette. Common types include complementary, analogous, triadic, and tetradic harmonies.

Color Spaces

Color spaces describe different methods of organizing, mixing, and representing colors digitally and in print. Each color space has a unique structure and purpose, helping designers select and manage colors accurately across different devices, media, and use cases.

Red, green, blue (RGB)

The RGB color space is used primarily for digital screens and displays, mixing red (R), green (G), and blue (B) light in varying intensities to produce a wide range of visible colors. Each of the three channels ranges from 0 to 255, allowing for precise color specification on screens.

Hue, Saturation, Lightness (HSL)

HSL represents colors in terms of their hue (color type), saturation (intensity), and lightness (brightness). This intuitive model makes it easier for designers to pick harmonious palettes, adjust colors systematically, and fine-tune aesthetics for web and graphic design.

OKLCH (OKLab)

OKLCH, derived from OKLab, is a modern, perceptually uniform color space designed to align closely with human vision. It organizes colors using Lightness (perceived brightness), Chroma (colorfulness), and Hue (color type), making it ideal for precise and visually consistent color choices across devices.

Cyan, magenta, yellow, and key (CMYK)

CMYK is a subtractive color space used primarily for color printing. It mixes cyan, magenta, yellow, and key (black) inks to produce colors on physical media. Understanding CMYK is essential when designing for print, as it ensures accurate color reproduction in printed materials.

Hex Codes (Hexadecimal Codes)

Hex codes are widely used color identifiers that represent RGB color values using a short, six-digit hexadecimal format (#RRGGBB). Common in web and digital design, hex codes make it simple to consistently specify and communicate exact colors.

How do hex codes work?

Hex codes use hexadecimal numbers, a base-16 numbering system, to represent the intensity of red, green, and blue colors. Each color channel is represented by two characters ranging from “00” (no intensity) to “FF” (full intensity), combining to specify one of over 16.7 million unique colors.

Converting between hex and rgb

Since hex codes and RGB both represent the same color information, manually converting between the two is straightforward (or just use our RGB to hex converter). Each pair of digits in a hex code translates directly into RGB values ranging from 0 to 255.

For example, #FF0000 equals RGB (255, 0, 0), which is pure red; #00FF00 equals RGB (0, 255, 0) or pure green, #000000 equals RGB (0,0,0) or pure black, and so on.

WCAG and Accessibility Standards

The Web Content Accessibility Guidelines (WCAG) define international standards for making web content accessible to people with disabilities. Adhering to WCAG helps ensure your designs can be understood and navigated by users of all abilities, particularly regarding color contrast and readability.

Color accessibility standards

Color accessibility standards focus specifically on the appropriate use of colors and contrasts to accommodate users with visual impairments, such as color blindness or low vision. Tools and guidelines exist to help designers ensure adequate contrast and clearly communicate information without relying solely on color.

Dark and Light Mode Theming

Dark and light mode theming involves creating adaptable color schemes that optimize readability and reduce eye strain in different lighting conditions or personal preferences. Using shades and tints, or a color mixer with multiple stops can provide a useful base for dark and light mode color variants.