Professional color picker with saturation-brightness canvas, hue slider, HEX/RGB/HSL/HSB formats, saved colors palette, contrast calculation, and preset colors
Color formats in CSS describe the same color through different coordinate systems, each with different strengths. Hex (#FF5733) is the compact form, encoding 24-bit sRGB as six hexadecimal digits; it is writable but hard to reason about (is #FF5733 darker or lighter than #FF6B33? the math is not obvious). RGB (rgb(255, 87, 51)) is the same color in decimal, slightly more verbose but easier for programmatic manipulation. HSL (hsl(11, 100%, 60%)) decomposes color into hue (angle on the color wheel), saturation (percentage), and lightness (percentage), which is the format you want when you need to tweak "the same color but a bit lighter"just change the lightness component. HSB/HSV replaces lightness with brightness/value; the practical difference is that HSL's 50% lightness is the pure color and HSB's 100% value is the pure color, which matters when you are trying to generate tints and shades programmatically. This picker converts between all of them simultaneously. Enter a color in any format, see the others update immediately. That matters because different tools expect different formats: Figma and Sketch prefer hex, dev tools often show RGB, CSS preprocessors like Sass make heavy use of HSL for color manipulation, and design libraries increasingly use OKLCH for perceptually uniform color operations.
Initializing in your browser…
Extract dominant, vibrant, or muted colors from images. Generate color schemes with HEX, RGB, HSL values and export palettes for design projects.
Convert audio files between WAV, MP3, OGG, AAC, M4A, FLAC formats online. Adjust bitrate and quality settings. Free browser-based conversion with no file uploads to servers.
Convert between HEX, RGB, HSL, and CMYK color formats
A brand guide gives you only the hex value #3B82F6 but your design tokens file needs the HSL and RGB equivalents.
Picked colour
#3B82F6
All formats
HEX: #3B82F6 RGB: rgb(59, 130, 246) HSL: hsl(217, 91%, 60%) Relative luminance: 0.26 → use white text for contrast
The same colour is shown in every model it might be needed in: RGB for canvas/image code, HSL for building lighter/darker shades by moving only the L channel, and hex for markup. The luminance line applies the WCAG formula so you immediately know whether white or black text will pass contrast on this background.
Color formats in CSS describe the same color through different coordinate systems, each with different strengths. Hex (#FF5733) is the compact form, encoding 24-bit sRGB as six hexadecimal digits; it is writable but hard to reason about (is #FF5733 darker or lighter than #FF6B33? the math is not obvious). RGB (rgb(255, 87, 51)) is the same color in decimal, slightly more verbose but easier for programmatic manipulation. HSL (hsl(11, 100%, 60%)) decomposes color into hue (angle on the color wheel), saturation (percentage), and lightness (percentage), which is the format you want when you need to tweak "the same color but a bit lighter"just change the lightness component. HSB/HSV replaces lightness with brightness/value; the practical difference is that HSL's 50% lightness is the pure color and HSB's 100% value is the pure color, which matters when you are trying to generate tints and shades programmatically. This picker converts between all of them simultaneously. Enter a color in any format, see the others update immediately. That matters because different tools expect different formats: Figma and Sketch prefer hex, dev tools often show RGB, CSS preprocessors like Sass make heavy use of HSL for color manipulation, and design libraries increasingly use OKLCH for perceptually uniform color operations.
sRGB is the implicit color space for all of hex, RGB, HSL, and HSB in traditional CSS. It covers a specific gamut defined in 1996 and used by essentially every consumer display until recently. The catch is that sRGB is perceptually nonuniform: the same numerical change in RGB values produces a very different perceived brightness change depending on where in the color space you are. Interpolating from sRGB black (0,0,0) to sRGB white (255,255,255) halfway lands at (128,128,128), which is perceptually much darker than the midway point between black and white that you would name by eye; the actual perceptual midpoint is closer to RGB 186 due to the gamma encoding sRGB uses.
Display P3 is the wider-gamut color space Apple devices and many modern monitors now support, covering about 25% more colors than sRGB, particularly in the saturated greens, reds, and oranges. CSS Color Module Level 4 specifies `color(display-p3 1 0 0)` for explicit P3 color; on displays that support it, this produces a noticeably more vivid red than sRGB's pure red can. On displays that do not support P3, the browser remaps to the nearest sRGB equivalent, which is why your design may look different on a 2015 MacBook versus a 2022 one even though the CSS is the same.
Perceptually uniform color spaces like OKLCH and OKLAB solve the gamma-encoding problem by redefining axes so equal numerical changes produce equal perceived changes. OKLCH in particular is gaining traction for UI design because it decomposes color into lightness, chroma, and hue like HSL but with the correct perceptual weighting, tweaking lightness in OKLCH keeps perceived saturation constant, which HSL does not. For programmatic color generation (design tokens, theme variants, accessibility-adjusted palettes), OKLCH is strictly better than HSL. For one-off static colors, the legacy formats are still fine and have the broadest tool support.
Hex is most common for static colors. HSL is easier to work with when you need to adjust lightness or saturation programmatically.
This runs as client-side JavaScript. Keys, tokens, payloads, and other inputs never leave your device.