Hex color codes as three (or four) packed bytes
A 6-digit hex color like #3B82F6 is really three bytes side by side — one each for red, green, and blue — written as a single 6-character string rather than a comma-separated list. That's the entire reason hex became the standard way to write colors in CSS and design tools: it's more compact than rgb(59, 130, 246), and each color channel is unambiguously two hex digits, so there's no separator needed between them the way decimal RGB values need commas. An optional 8-digit form adds a fourth byte for alpha (transparency), covered separately by the Hex ↔ RGBA tool, since a plain 6-digit hex color has no way to represent partial transparency at all.
Why so many different color formats exist
RGB describes color the way a screen actually produces it — by mixing red, green, and blue light — which makes it the natural format for hex codes and for hardware, but not always the most intuitive for humans adjusting a color by hand. HSL and HSV instead separate hue (the base color), saturation (intensity), and a lightness or brightness value, which maps much more closely to how people naturally describe a color — "a lighter blue" is a lightness adjustment, not an intuitive change to three separate RGB numbers. CMYK exists for an entirely different reason: it models subtractive color mixing with physical ink, which is how printers actually produce color, as opposed to the additive light-mixing that RGB describes. None of these formats are more "correct" than another — they're different lenses on the same underlying color, each suited to a different task: RGB/hex for screens and code, HSL/HSV for intuitive adjustment, CMYK for print.
Platform- and framework-specific formats
Two tools in this section exist because a specific platform or framework expects color in its own particular syntax rather than a general-purpose format. UIColor is how Apple's development frameworks (UIKit, and by extension SwiftUI in many contexts) represent color in Swift code — as three or four floating-point numbers between 0.0 and 1.0, rather than 0–255 integers or a hex string, because Swift's color APIs are built around normalized floating-point channels. Tailwind CSS, meanwhile, defines a fixed palette of named colors and shades (like blue-500) rather than accepting arbitrary hex values directly in most of its utility classes, so knowing which named color is closest to a specific hex value (or vice versa) is a real, recurring need for anyone styling with Tailwind's default palette.
Beyond format conversion: comparing and adjusting colors
Three tools here don't convert between formats at all, but perform a calculation on one or more colors. The tint and shade calculator generates lighter and darker variations of a single color by blending it toward white or black — useful for generating a consistent hover or active state from a base brand color. The color difference calculator measures how visually distinct two colors are, using a perceptual model (Delta-E) rather than naive RGB distance, which matters because equal numeric distances in RGB space don't correspond to equal perceived differences — some regions of color space are far more sensitive to small RGB changes than others. The opacity calculator answers a different, very practical question: what does a semi-transparent color actually look like once it's rendered over a given background, since a color with opacity isn't a single fixed color until it's composited against something.
A note on precision and rounding
Converting between these formats isn't always perfectly reversible to the exact original value, because some formats have coarser precision than others. RGB and hex store each channel as an 8-bit integer (0–255), giving 256 discrete steps per channel. HSL and HSV represent hue as an angle and saturation or lightness as a percentage, which this site rounds to whole numbers for readability — converting hex to HSL and back to hex can occasionally land one unit off from the original due to that rounding, the same way converting a fraction to a rounded decimal and back doesn't always reproduce the original fraction exactly. This is expected behavior across color-space conversions generally, not a defect specific to any one tool.
Working with color at scale
Every converter in this section includes a batch mode, letting a full palette — a design system's color tokens, a CSS variable list, or a set of brand colors — be converted or checked all at once rather than one value at a time, with results exportable as CSV. That's particularly useful when auditing an existing color palette against a target format (checking which hex values in a codebase have no exact Tailwind equivalent, for instance) rather than converting colors individually as they come up. For a handful of named brand colors that need to leave the browser as a physical document rather than a spreadsheet row, the palette PDF export builds a printable reference sheet instead, with every format listed under each swatch.