HEX
#3B82F6
Click to copy
RGB
rgb(59, 130, 246)
Click to copy
HSL
hsl(217, 91%, 60%)
Click to copy
Convert colors between formats in seconds
Paste any HEX color code (#3B82F6) into the HEX input field. The converter automatically updates RGB and HSL values in real-time, showing equivalent color representations across all formats with live preview.
Use the red, green, and blue sliders to visually mix colors. Each slider ranges from 0-255, letting you fine-tune individual color channels. Watch HEX and HSL values update automatically as you adjust RGB components.
Control hue (0-360°), saturation (0-100%), and lightness (0-100%) for intuitive color adjustments. Hue selects the color, saturation controls vibrancy, lightness adjusts brightness. Perfect for creating color variations and palettes.
Click any color value card to instantly copy that format to your clipboard. Get colors in HEX for CSS, RGB for JavaScript, HSL for design systems, or export as CSS/SCSS variables for direct use in your stylesheets.
HEX, RGB, HSL and how they work together
Color representation in digital systems relies on mathematical models that encode colors as numerical values. Different color models serve different purposes—some optimize for human perception, others for hardware display, and others for mathematical manipulation. Understanding these models is fundamental to web development, design systems, image processing, and frontend engineering.
Modern web development uses three primary color models: HEX (hexadecimal RGB), RGB (red-green-blue), and HSL (hue-saturation-lightness). Each model represents the same colors but with different notations optimized for specific use cases. Designers prefer HSL for intuitive color adjustments, developers use HEX for CSS conciseness, and graphics APIs often expect RGB for programmatic manipulation.
HEX (Hexadecimal RGB): Represents colors as six hexadecimal digits (#RRGGBB) encoding red, green, and blue channel values from 00 to FF (0-255 in decimal). Example: #3B82F6 breaks down to Red=3B (59), Green=82 (130), Blue=F6 (246). HEX is the most compact notation, making it standard in CSS and design tools. Optional alpha channel extends to 8 digits (#RRGGBBAA) for transparency.
RGB (Red-Green-Blue): Represents colors as three decimal values (0-255) for red, green, and blue light channels matching how computer displays emit light. Example: rgb(59, 130, 246) is the same color as #3B82F6. RGB is intuitive for programmatic color manipulation since channels are separate integers. RGBA adds alpha (0-1) for transparency: rgba(59, 130, 246, 0.5).
HSL (Hue-Saturation-Lightness): Represents colors based on human perception rather than display technology. Hue (0-360°) selects the color from the color wheel, saturation (0-100%) controls color intensity, lightness (0-100%) adjusts brightness. Example: hsl(217, 91%, 60%) is the same blue. HSL makes it easy to create color variations—adjust lightness for tints/shades, saturation for muted versions.
Frontend developers constantly convert between color formats when implementing design systems, theming, and dynamic color manipulation. Design tools export colors in HEX, but CSS animations might use RGB for programmatic tweening. JavaScript libraries expect RGB arrays, while SCSS variables use HEX. Accessibility tools require RGB for contrast calculations.
Design systems define color palettes with base colors and systematic variations (lighter, darker, muted). HSL makes these variations trivial—increment lightness by 10% for each tint, decrement for shades. RGB makes this calculation complex, requiring gamma-correct interpolation.
Theming and dark mode implementations require generating complementary colors, adjusting saturation globally, or inverting lightness values. CSS custom properties can store colors in any format, but HSL enables calc() expressions for dynamic color adjustments without JavaScript.
Color accessibility (WCAG contrast requirements) uses relative luminance calculations that require RGB values. Converting user-selected colors to RGB enables automatic contrast checking and suggesting accessible alternatives. Brand color enforcement across platforms requires converting between formats since iOS, Android, and web use different native color notations.
The RGB color model is additive—combining red, green, and blue light at full intensity produces white, while zero intensity on all channels produces black. This matches how displays work: each pixel has red, green, and blue subpixels that emit light.
HSL separates color into perceptually meaningful dimensions. Hue represents the "pure" color (red, orange, yellow, green, blue, purple). Saturation controls color purity—100% is vivid, 0% is grayscale. Lightness controls brightness—50% is the "true" color, 100% is white, 0% is black. This separation makes color manipulation intuitive for humans.
Complementary colors sit opposite on the color wheel (180° hue difference). Analogous colors are adjacent (±30° hue). These relationships are easy to calculate in HSL but complex in RGB. Color harmonies, gradients, and palette generation all benefit from HSL's perceptual organization.
CMYK (Cyan-Magenta-Yellow-Black): Subtractive color model for printing. Mixing pigments (cyan, magenta, yellow) produces darker colors, opposite of additive RGB light. Black (K) added for true blacks since CMY creates muddy dark gray. Used by print design, not web development.
HSV/HSB (Hue-Saturation-Value/Brightness): Similar to HSL but Value replaces Lightness. At 100% value, you get full-saturation colors; at 0%, always black. Preferred by some graphics software (Photoshop uses HSB) but less common in CSS.
LAB and LCH: Perceptually uniform color spaces designed to match human vision. Color differences correspond to perceived differences. Used in advanced color science, image processing, and professional photography but rarely in web development.
All modern color models support alpha channels for transparency. RGBA adds alpha to RGB: rgba(255, 0, 0, 0.5) is 50% transparent red. HEX8 adds two digits for alpha: #FF000080 (same 50% red). HSLA adds alpha to HSL: hsla(0, 100%, 50%, 0.5). Alpha values range 0 (transparent) to 1 (opaque), or 00-FF in HEX8.
Transparency enables layering effects, overlays, shadows, and subtle UI elements. When compositing transparent colors, browsers alpha-blend them with the background. Understanding alpha is critical for implementing glassmorphism, modal overlays, and modern UI effects.
How developers use color conversion daily
Build systematic color scales for design systems by converting brand colors to HSL, then generating tints and shades by adjusting lightness. Create consistent 50-900 scales (Tailwind-style) where each step has predictable lightness values. Export in multiple formats for different platform requirements.
Convert designer-provided HEX colors to CSS custom properties supporting multiple formats. Use HSL in CSS variables for enabling calc() expressions that adjust lightness or saturation dynamically. Create theming systems that swap color values while maintaining relationships between shades.
Ensure brand colors are consistent across web, iOS, Android, and print by converting the authoritative HEX brand color to platform-specific formats. Verify that RGB values match exactly across all platforms to prevent color drift between web and native apps.
Convert colors to RGB for calculating relative luminance and contrast ratios per WCAG guidelines. Determine if text colors meet AA or AAA contrast requirements against backgrounds. Generate accessible color alternatives by adjusting lightness in HSL until contrast thresholds are met.
Master color conversion and palette creation
This color converter provides instant, real-time conversion between HEX, RGB, and HSL color formats with live preview. All color calculations happen client-side in your browser using standard color space mathematics, ensuring your brand colors and design tokens remain private with zero server uploads.
HEX Input: Type or paste any HEX color code in the format #RRGGBB or RRGGBB (# is optional). The converter accepts uppercase or lowercase letters (A-F). As you type, RGB and HSL values update in real-time. Invalid HEX codes are ignored until you complete a valid 6-character code.
RGB Sliders: Drag the red, green, and blue sliders to visually mix colors. Each slider ranges from 0 (no color) to 255 (full intensity). Watch the color preview update in real-time as you adjust channels. This is perfect for fine-tuning colors by eye or exploring the RGB color space interactively.
HSL Sliders: The hue slider (0-360°) selects the base color from the color wheel (0=red, 60=yellow, 120=green, 180=cyan, 240=blue, 300=magenta). Saturation (0-100%) controls color intensity—0% is grayscale, 100% is vivid. Lightness (0-100%) adjusts brightness—0% is black, 50% is the "true" color, 100% is white.
The large preview panel shows your current color with overlaid HEX code. The text color automatically switches between black and white based on lightness to ensure readability (light backgrounds get dark text, dark backgrounds get light text). This preview helps verify colors look correct before copying values.
Click any of the three color format cards (HEX, RGB, HSL) to instantly copy that format to your clipboard. No need to manually select text—just click the card. The card shows "Copied!" feedback briefly to confirm the copy operation succeeded. Copy HEX for CSS, RGB for JavaScript Canvas API, or HSL for color manipulation.
Click the "Random" button or press the keyboard shortcut to generate a random color. Perfect for exploring the color space, finding color palette inspiration, or testing your design with unexpected colors. The random generator produces colors across the full spectrum with varied saturation and lightness.
Save frequently-used colors as presets for quick access later. Name your presets (e.g., "Brand Primary", "Success Green", "Warning Orange") and load them with one click. Presets store HEX, RGB, and HSL values so you can quickly switch between project color schemes without re-entering values.
Export colors in multiple formats for different use cases:
These export formats make it easy to integrate colors into your codebase, design system, or configuration files without manual formatting.
To create lighter versions (tints), increase lightness in the HSL sliders. For darker versions (shades), decrease lightness. To desaturate (make more gray), decrease saturation. To create color variations while maintaining the same hue, keep hue constant and adjust saturation and lightness.
For complementary colors (opposite on color wheel), add or subtract 180° from the hue value. For analogous colors (harmonious neighbors), adjust hue by ±30°. For triadic colors, use hue values 120° apart.
Everything you need to know about color formats
Your colors never leave your browser
Your color data never leaves your browser. This converter operates entirely client-side using standard color space mathematics implemented in JavaScript. There are no server uploads, no backend processing, and no data transmission to any external services.
This makes the converter safe for sensitive use cases like developing unreleased product color schemes, working with confidential client brand colors, designing proprietary design systems, or any color work that must remain confidential before public launch. Use with confidence for client projects, stealth startups, or any color work requiring discretion.
When using colors in production, always verify contrast ratios meet WCAG accessibility standards. Test colors with color blindness simulators to ensure designs work for users with color vision deficiencies (deuteranopia, protanopia, tritanopia). Provide non-color cues (icons, labels, patterns) in addition to color coding to accommodate all users.
Color conversion capabilities and specifications
Showing 8 of 94 related tools