Color Picker Guide: HEX, RGB, HSL & HSV

Color is fundamental to web design, branding, and user experience — yet working with colors in code is surprisingly tedious. You copy a hex code from Figma, need the RGB equivalent for a Canvas animation, then need the HSL version for generating lighter variants in your Tailwind config. Without a color picker tool, you're doing mental math or bouncing between browser tabs.

An online color picker solves this by giving you every format simultaneously. Pick any color — from a visual picker, a hex input, or RGB/HSL/HSV sliders — and instantly see the value in every format, ready to copy. Our Color Picker & Converter goes further with color harmony generation, shades & tints, WCAG contrast checking, and CSS color name detection.

Whether you're a frontend developer choosing button colors, a designer building a brand palette, or a CSS engineer creating a design system, a reliable color picker is one of the most frequently used tools in your daily workflow.

HEX color codes are the most widely used color format on the web. A hex code like #FF6B35 is a compact base-16 representation of RGB values. The first two digits (FF) represent red (255), the middle two (6B) represent green (107), and the last two (35) represent blue (53). Together they encode over 16.7 million possible colors.

HEX supports a 3-digit shorthand where each digit is doubled: #F63 expands to #FF6633. This shorthand is convenient for common colors like #FFF (white), #000 (black), and #F00 (red), but limits you to 4,096 colors. Most color pickers automatically expand shorthand codes to the full 6-digit form.

HEX is ideal for static color values in CSS, SVG, Tailwind configs, and design tokens. Its main weakness is human readability — it's nearly impossible to mentally adjust #3A7CA5 to be 20% lighter. That's where HSL and a good color picker become essential.

RGB defines colors by mixing Red, Green, and Blue light at intensities from 0 to 255. Your screen literally has millions of tiny RGB subpixels, making RGB the machine-native color model. rgb(255, 0, 0) is pure red. rgb(0, 0, 0) is black. rgb(255, 255, 255) is white.

Modern CSS supports the alpha channel for transparency: rgb(255 107 53 / 0.5) produces a 50% transparent orange. The older rgba() syntax still works but the space-separated format with a forward slash is now preferred in CSS Color Level 4.

RGB sliders in a color picker let you isolate and adjust individual channels — perfect for fine-tuning a specific hue without affecting the overall brightness. Our color picker shows dynamic per-channel gradients so you can see exactly how each slider change affects the final color.

HSL stands for Hue (0–360° on the color wheel), Saturation (0–100% intensity), and Lightness (0–100% brightness). Red is at 0°, green at 120°, blue at 240°. This maps directly to how humans intuitively think about color: 'I want a slightly less saturated, lighter blue.'

HSL is the secret weapon for building design systems. To generate a full shade scale (like Tailwind's 50–900 range), you keep the hue constant and vary lightness from 95% down to 10%. To create a muted version, reduce saturation. To find a complementary accent, add 180° to the hue. All of these operations are trivial with HSL sliders in a color picker.

Our color picker's HSL section shows three gradient-track sliders: a rainbow hue bar, a saturation gradient from gray to vivid, and a lightness gradient from black through pure color to white. Each gradient updates dynamically based on the current color, giving you immediate visual feedback.

HSV (Hue, Saturation, Value) — also called HSB (Hue, Saturation, Brightness) — is the model used by Photoshop, Figma, Sketch, and virtually every graphical color picker. The familiar square gradient where saturation runs left-to-right and brightness runs top-to-bottom is the HSV model visualized.

The key difference from HSL: in HSV, Value = 100% means full brightness of the hue, and reducing Value darkens the color toward black. In HSL, Lightness = 50% is the pure color, while 0% is black and 100% is white. Both models share the same 0–360° hue wheel.

While you won't write HSV directly in CSS (it's not natively supported), our color picker provides HSV sliders so you can match values from your design tools precisely. Change any HSV slider and instantly copy the equivalent HEX, RGB, or HSL for your stylesheet.

Color harmony theory defines which colors look pleasing together based on their positions on the color wheel. Instead of guessing, you can use mathematical relationships to generate harmonious palettes from any starting color. Our color picker generates five harmony types with one click.

Complementary colors sit directly opposite each other (180° apart) — like blue and orange. They create maximum contrast and visual energy, perfect for call-to-action buttons against a calm background. Analogous colors are adjacent on the wheel (±30°), creating smooth, cohesive palettes ideal for backgrounds and subtle UI gradients.

Triadic harmonies use three colors equally spaced at 120° intervals, offering vibrant variety while maintaining balance. Split-complementary takes one color plus the two colors adjacent to its complement — giving strong contrast with less tension than pure complementary. Tetradic (rectangular) uses four colors forming a rectangle on the wheel, offering the richest palettes for complex UIs.

The best approach is to start with your brand's primary color in the color picker, generate several harmony types, and evaluate which combinations communicate the right mood. Our tool shows each harmony as clickable swatches — click any swatch to make it the active color and explore further.

A shade is a color mixed with black (darker). A tint is a color mixed with white (lighter). Together, shades and tints create a full-spectrum scale from near-white to near-black for any given hue — exactly what you need for Tailwind's color scales, Material Design palettes, or any design system.

Our color picker generates an 11-step shade and tint strip for your selected color. Each step is a clickable swatch that loads the color into the picker, so you can grab the exact HEX code for any brightness level. This eliminates the guesswork of manually adjusting lightness values.

Pro tip: when building a color system, generate shades and tints for your primary, secondary, and neutral colors. Use the lightest tints (90–95% lightness) for backgrounds, medium values (40–60%) for text and icons, and the darkest shades (10–20%) for emphasis elements. This creates visual hierarchy without introducing new hues.

The Web Content Accessibility Guidelines (WCAG) mandate minimum contrast ratios between text and background colors. Level AA requires 4.5:1 for normal text and 3:1 for large text (18px+ bold or 24px+). Level AAA raises these to 7:1 and 4.5:1 respectively. Failing to meet these standards makes your website unusable for millions of people with visual impairments.

Contrast ratio is computed from relative luminance: L = 0.2126 × R + 0.7152 × G + 0.0722 × B (after linearizing the sRGB values). The ratio formula is (L_lighter + 0.05) / (L_darker + 0.05). This weighted formula reflects that human eyes are most sensitive to green light and least sensitive to blue.

Our color picker's built-in WCAG Contrast Checker shows your selected color against both white (#FFFFFF) and black (#000000) text with the exact ratio and pass/fail badge (AAA, AA, AA Large, or Fail). This lets you instantly verify whether a background color is accessible before writing a single line of CSS.

CSS defines 148 named colors — from 'aliceblue' (#F0F8FF) to 'yellowgreen' (#9ACD32). Named colors are easier to read in code than hex values and useful for quick prototyping, but they only cover a tiny fraction of the 16.7 million possible colors.

Our color picker automatically detects the closest CSS named color for any value you pick. If you select #FF6347, the tool shows '~ tomato'. If you select #4169E1, it shows '~ royalblue'. This helps you quickly identify whether a standard CSS name exists for your chosen color, saving you from memorizing hex codes.

While named colors aren't suitable for production design systems (they lack the precision of hex or HSL), they're invaluable for readable test code, quick demos, and communicating colors to non-technical team members who understand 'coral' better than '#FF7F50'.

HEX to RGB is the simplest conversion: split the 6-character hex string into three 2-character pairs and convert each from base-16 to base-10. FF → 255, 6B → 107, 35 → 53. The reverse (RGB to HEX) converts each decimal value to a zero-padded 2-digit hex string.

RGB to HSL requires normalizing RGB to 0–1, finding the min and max channel values, computing lightness as their average, saturation from the delta relative to lightness, and hue from which channel is dominant. The formula involves conditional logic for the six 60° hue sectors — which is exactly why using a color picker is faster than computing by hand.

HSL to RGB reverses the process: compute chroma from saturation and lightness, determine intermediate value X from the hue sector, and map back to RGB channels. RGB ↔ HSV follows a similar pattern with different saturation and value formulas. Our color picker implements all six conversions (HEX ↔ RGB ↔ HSL ↔ HSV) with full floating-point precision.

Define your design system tokens in HSL. Brand colors stored as HSL values make it trivial to generate consistent lighter and darker variants by adjusting only the lightness component. This produces more perceptually uniform scales than manipulating hex values.

Use HEX for static values in CSS, SVG, and config files where compactness matters. HEX is universally supported, copy-paste friendly, and takes less space than rgb() or hsl() function notation. When sharing colors with other developers, hex codes are the lingua franca.

Always verify contrast ratios before committing to a color combination. A visually appealing palette that fails WCAG AA will make your product inaccessible to approximately 300 million people with color vision deficiency worldwide. Use our color picker's contrast checker to validate every text-background pairing.

Leverage color harmonies for systematic palette creation. Start with one brand color, generate complementary and analogous harmonies, then create shade scales for each. This gives you a complete, mathematically coherent color system instead of an ad-hoc collection of hand-picked values.

Zutily's free Color Picker & Converter provides HEX, RGB, HSL, and HSV conversion with live preview, five color harmony types, a shades & tints generator, WCAG contrast checking, CSS color name detection, a native color picker, 20 curated presets, and one-click copy. Everything runs client-side in your browser — zero data sent to any server, completely free, no sign-up required.