Color Converter & Picker

Pick a color or enter a hex code. Get HEX, RGB, and HSL values instantly. Click any value to copy.

Color Formats Explained

Web developers work with three primary color formats, each with distinct strengths. Understanding when to use each format saves time and improves code readability.

HEX Colors

HEX is the most widely used CSS color format (#FF5733). It represents Red, Green, and Blue channels as two hexadecimal digits each, with values from 00 (0) to FF (255). Shorthand notation like #F00 expands to #FF0000. HEX is compact, easy to copy-paste from design tools like Figma, and universally supported.

RGB Colors

RGB uses decimal values 0-255 for each channel: rgb(255, 87, 51). Its main advantage is programmatic manipulation — interpolating between colors, applying alpha transparency with rgba(), and performing color math. Most graphic libraries (Canvas, WebGL, PIL) use RGB natively.

HSL Colors

HSL (Hue, Saturation, Lightness) is the most human-friendly model: hsl(14, 100%, 60%). Hue is a degree on the color wheel (0=red, 120=green, 240=blue). Saturation controls intensity (0%=gray, 100%=vivid). Lightness controls brightness (0%=black, 50%=pure color, 100%=white). HSL is ideal for generating color palettes, creating hover states, and building theme systems.

Choosing the Right Format

Design handoff: Use HEX — it’s what Figma, Sketch, and Adobe XD export.
CSS themes and dark mode: Use HSL with CSS custom properties. Adjust lightness to create light/dark variants.
Animations and gradients: Use RGB or HSL for smooth interpolation between colors.
Accessibility (contrast ratio): Use RGB for WCAG contrast calculations.

Design Tip: Use HSL for theme systems. Keep the same hue and saturation, then vary lightness for consistent light/dark variants: --primary: hsl(234, 85%, 65%); --primary-light: hsl(234, 85%, 80%); --primary-dark: hsl(234, 85%, 45%);

Color Accessibility & Contrast

The Web Content Accessibility Guidelines (WCAG 2.1) require a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18px+ or 14px+ bold). To calculate contrast ratio, convert both colors to relative luminance using the formula: L = 0.2126 × R + 0.7152 × G + 0.0722 × B (where R, G, B are linearized sRGB values). The contrast ratio is then (L1 + 0.05) / (L2 + 0.05), with L1 being the lighter color. Tools like Chrome DevTools display contrast ratios directly in the color picker, making it easy to verify accessibility compliance during development.

CSS Color Functions & Modern Syntax

Modern CSS introduces powerful color functions beyond basic HEX/RGB/HSL. color-mix() blends two colors in any color space: color-mix(in srgb, #FF0000 50%, #0000FF) creates purple. oklch() provides perceptually uniform colors, avoiding the brightness inconsistencies of HSL — making it ideal for design systems where equal lightness values should look equally bright. The light-dark() function automatically selects colors based on the user’s color scheme preference, reducing dark mode boilerplate: color: light-dark(#333, #ccc).

Working with Color in JavaScript

When manipulating colors programmatically, converting between formats is essential. HEX to RGB is straightforward with parseInt(hex.slice(1,3), 16) for each channel. RGB to HSL requires finding the min/max channel values and computing hue from the delta. For complex operations like generating complementary colors, analogous palettes, or triadic schemes, rotate the HSL hue by 180°, ±30°, or ±120° respectively. Canvas and WebGL applications typically work in RGB space, while CSS animations benefit from HSL interpolation for smoother color transitions.