Color Picker & Converter — HEX, RGB, HSL, CMYK

Color Formats Explained: HEX vs RGB vs HSL vs CMYK

Every color you see on a screen or in print can be described in multiple ways. Each format serves a different purpose and is used in different contexts. Understanding when to use each format is essential for designers, developers, and anyone working with digital or print media.

HEX (Hexadecimal). The most common format for web development. A hex color like #6366F1 encodes red, green, and blue channels as two-digit hexadecimal numbers (00–FF). Hex is compact, widely supported in HTML and CSS, and trivial to copy-paste into code. The shorthand form #RGB works when both digits in each pair are identical — so #FF0000 becomes #F00.

RGB (Red, Green, Blue). The additive color model used by screens. Values range 0–255 for each channel. rgb(255, 0, 0) is pure red. RGB is intuitive for screen work because it mirrors how monitors produce color by mixing light. The RGBA variant adds an alpha channel (0–1) for transparency.

HSL (Hue, Saturation, Lightness). A human-friendly model where Hue is the color angle (0–360°), Saturation controls colour intensity (0–100%), and Lightness controls brightness (0–100%). HSL is excellent for programmatic color manipulation — rotating hue by 180° gives the complementary color, and adjusting lightness creates tints and shades without changing the base color. This makes HSL ideal for generating color scales and themes in CSS.

HSB/HSV (Hue, Saturation, Brightness/Value). Similar to HSL but uses Brightness (0–100%) instead of Lightness. Unlike HSL where pure white is L=100%, in HSB pure white requires S=0, B=100%. HSB is common in design tools like Adobe Photoshop and Figma because it maps more intuitively to how artists think about color.

CMYK (Cyan, Magenta, Yellow, Key/Black). The subtractive color model used in print. Where screens add light to create color, printers subtract it by layering ink. CMYK values are percentages (0–100%) for each ink. If you are sending designs to a commercial printer, your colors must be in CMYK — RGB colors look different when printed. Our tool shows the CMYK equivalent for any color you pick, allowing you to verify print accuracy before sending files.

The HEX8 format adds two digits for the alpha channel — for example #6366F1FF(fully opaque) or #6366F180 (50% transparent). This is used in some CSS contexts and design tools that support 8-digit hex codes.

Tailwind CSS Color Classes — How Matching Works

Tailwind CSS ships with a comprehensive color palette of 22 color families, each with 11 shades from 50 (very light) to 950 (very dark). When you pick a color in this tool, we find the closest Tailwind class by measuring the perceptual distance in CIE LAB color space — the same color model used by the human visual system. This gives more accurate results than simple Euclidean distance in RGB space, which does not reflect how different colors look to the human eye.

For example, if you pick #6366F1, the tool identifies it as closest to indigo-500 in Tailwind. You can use this immediately in your markup:

<div class="bg-indigo-500 text-white px-4 py-2 rounded">
  Button
</div>

Tailwind colors are designed to be used together — lighter shades for backgrounds, mid shades for elements, and darker shades for text. The -100 to -300 range works well for backgrounds, -400 to -600 for interactive elements, and -700 to -900 for text.

Note that the "closest match" is an approximation — exact custom colors should be defined in your tailwind.config.js under theme.extend.colors if the nearest Tailwind shade is not precise enough. Our CSS Gradient Generator can help you create gradient utilities for Tailwind as well.

Color Theory Basics: Complementary, Analogous, and Triadic

The color wheel is the foundation of color theory. Colors that work harmoniously together follow predictable mathematical relationships on the wheel. Our tool calculates three standard harmony types for any color you pick:

Complementary colors sit directly opposite each other on the color wheel — 180° apart. They create high contrast and visual tension when used together, making them effective for call-to-action buttons, error states, and emphasis. The complementary of blue is orange; the complementary of red is cyan.

Analogous colors are adjacent on the color wheel — typically ±30° and ±60° from the base color. They create harmonious, low-tension palettes that feel cohesive. Analogous schemes are common in nature (think autumn foliage) and work well for backgrounds, illustrations, and brands that want a calm, unified appearance.

Triadic colors are three colors evenly spaced 120° apart on the wheel. They offer strong visual contrast while still feeling balanced — unlike complementary pairs which can feel harsh. Primary colors (red, blue, yellow) form a triadic scheme. Triadic palettes work well for bold brand identities and children's products.

You can use these harmony swatches directly as brand accent colors, or feed them into our Color Palette Extractor to build a complete palette around your chosen base.

WCAG Color Accessibility — What AA and AAA Mean

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text color and background color to ensure readability for people with low vision or color deficiency. Our tool checks your picked color against both white and black backgrounds.

WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). This is the minimum required for legal compliance in most accessibility standards including EN 301 549 in Europe and Section 508 in the United States.

WCAG AAA requires 7:1 for normal text and 4.5:1 for large text. This is the enhanced level — recommended for body text and critical content, but not always achievable for all color combinations without sacrificing design goals.

Contrast ratio is calculated as (L1 + 0.05) / (L2 + 0.05) where L1 and L2 are the relative luminances of the two colors. Pure black on white gives a ratio of 21:1 (maximum). Pure white on white gives 1:1 (minimum). Most usable text colors fall between 4.5:1 and 21:1.

A common pitfall is choosing a mid-tone color that fails both on white and black backgrounds. In this case, you need to either darken the color for use on white, or lighten it for use on dark backgrounds. Our shades row makes it easy to find accessible alternatives.

Frequently Asked Questions