Pick any color and instantly convert between HEX, RGB, and HSL formats. Generate harmonious palettes, copy CSS color codes, and explore color theory — all in your browser.
Convert effortlessly between HEX, RGB, and HSL color formats. Each format is widely used in web development — HEX in CSS, RGB for image editing, and HSL for intuitive color adjustments.
Automatically generate complementary, analogous, triadic, and split-complementary palettes from any base color. Perfect for creating cohesive design systems and UI color schemes.
All color conversions happen instantly in your browser using pure JavaScript math. Nothing is uploaded or stored on our servers. Your color data stays completely private.
HEX uses a six-character hexadecimal code prefixed with # (e.g., #FF5733) to represent red, green, and blue channels. RGB defines colors with three decimal numbers from 0–255 for red, green, and blue (e.g., rgb(255, 87, 51)). HSL describes colors using Hue (0–360°), Saturation (0–100%), and Lightness (0–100%), making it more intuitive for adjusting brightness and vividness (e.g., hsl(14, 100%, 60%)).
To convert HEX to RGB, split the six-character hex code into three pairs. Convert each pair from hexadecimal to decimal. For example, #3B82F6: 3B = 59 (red), 82 = 130 (green), F6 = 246 (blue), giving rgb(59, 130, 246). Our tool does this conversion instantly — just enter or paste any HEX code.
HSL is ideal when you need to create color variations like lighter or darker shades, or desaturated versions of a base color. Since HSL separates the hue from saturation and lightness, you can easily adjust brightness or vividness without changing the underlying color. It's especially useful for generating consistent UI color schemes, hover states, and accessible color palettes in CSS.
Complementary colors sit opposite each other on the color wheel (180° apart), creating high contrast and visual tension — great for call-to-action buttons. Analogous colors are adjacent on the wheel (within 30°), creating harmonious, low-contrast palettes ideal for backgrounds and subtle UI. Triadic colors are evenly spaced at 120° intervals, offering vibrant variety while maintaining visual balance — perfect for illustrations and dashboards.
Use the native color picker input in our tool. On most modern browsers, clicking the color swatch opens a system-level color picker that supports eyedropper functionality. In Chrome and Edge, you can pick any color visible on your screen. Alternatively, enter a known HEX, RGB, or HSL value directly into the input fields to set the color precisely.
HEX (hexadecimal) color codes are the most widely used color notation on the web. A HEX code consists of a hash symbol (#) followed by six characters representing three color channels: red, green, and blue. Each channel uses two hexadecimal digits ranging from 00 (no intensity) to FF (maximum intensity). For example, #FF0000 is pure red, #00FF00 is pure green, and #0000FF is pure blue. HEX codes are concise, universally supported in CSS, and easy to copy-paste between design tools and code editors. They are case-insensitive, so #ff5733 and #FF5733 represent the same color. The shorthand form (e.g., #F00 for #FF0000) is valid when each channel pair uses identical digits.
RGB is an additive color model where red, green, and blue light are combined at various intensities to produce a wide spectrum of colors. Each channel accepts an integer value from 0 to 255, giving over 16.7 million possible color combinations (256 × 256 × 256). In CSS, RGB is written as rgb(255, 87, 51). The RGB model directly maps to how monitors and screens produce color — each pixel is composed of tiny red, green, and blue sub-pixels. When all three channels are at 0, the result is black; when all are at 255, the result is white. RGB is the native format for most image-editing software and is essential for understanding how digital displays render color.
HSL stands for Hue, Saturation, and Lightness. Hue is an angle on the color wheel from 0° to 360° — 0° is red, 120° is green, and 240° is blue. Saturation controls the vividness of the color, from 0% (gray) to 100% (fully saturated). Lightness controls brightness, from 0% (black) to 100% (white), with 50% being the pure color. HSL is more intuitive than HEX or RGB for designers because adjustments are predictable: increasing lightness always makes the color lighter, decreasing saturation always makes it more muted. This makes HSL ideal for creating hover effects, building accessible color palettes, and generating consistent design tokens across a theme.
Color theory is the foundation of effective visual design. The color wheel — a circular arrangement of hues — helps designers understand relationships between colors. Primary colors (red, yellow, blue) combine to form secondary colors (orange, green, purple), which in turn mix into tertiary colors. Understanding these relationships helps you create palettes that feel intentional and balanced. Warm colors (red, orange, yellow) evoke energy and urgency, while cool colors (blue, green, purple) feel calm and professional. Neutral tones (gray, beige, white) provide balance and prevent visual overwhelm in busy interfaces.
Use HEX when writing CSS stylesheets and sharing colors between developers — it's compact and universally recognized. Use RGB when working with image manipulation in JavaScript via Canvas API, or when you need alpha transparency with rgba(). Use HSL when you need to programmatically generate color variations, build accessible palettes, or create design systems. HSL makes it trivial to produce lighter/darker shades by adjusting lightness alone, or to desaturate a color for disabled states. In modern CSS, the hsl() function is natively supported, making HSL a first-class citizen alongside HEX and RGB for styling web pages.
Choosing the right colors isn't just about aesthetics — it's about accessibility. The Web Content Accessibility Guidelines (WCAG) require a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. Using HSL, you can easily check if a foreground color has sufficient contrast against a background by comparing lightness differences. Avoid relying solely on color to convey meaning — always pair color with text labels or icons. Approximately 8% of men and 0.5% of women have some form of color vision deficiency, so consider using colorblind-safe palettes for data visualizations and critical UI elements.
Converting between color formats involves well-defined mathematical formulas. HEX to RGB is straightforward: split the six hex digits into three pairs and convert each pair from base-16 to base-10. For example, #3B82F6 becomes R=59, G=130, B=246. RGB to HSL is more involved: normalize R, G, B to a 0–1 range, find the maximum and minimum channel values, compute lightness as (max+min)/2, saturation based on the difference between max and min (adjusted for lightness), and hue based on which channel is dominant. The reverse (HSL to RGB) uses a temporary chroma value and maps it back to three channels based on the hue sector.