Color Code Converter

Convert color codes between HEX, RGB, HSL, and RGBA formats in bulk. Paste multiple colors and get all format conversions at once. Perfect for developer workflows.

Key features

Bulk color conversion
Support for HEX, RGB, HSL, RGBA, HSLA
Copy individual or all results
Color preview for each entry

Guide

Colors in digital systems are represented by numerical codes. Different contexts require different color code formats. Web developers use hex codes and CSS color functions. Graphic designers work with CMYK for print and RGB for screen. UI designers reference HSL for intuitive color adjustments. Understanding these formats, how they relate to each other, and when to use each one is essential for anyone working with digital color. This guide covers the major color code formats, conversion math, and practical applications across design and development. RGB (Red, Green, Blue) is the foundational color model for screens. Every pixel on your monitor, phone, or tablet produces color by mixing red, green, and blue light at different intensities. Each channel ranges from 0 (no light) to 255 (maximum intensity). RGB(255, 0, 0) is pure red. RGB(0, 255, 0) is pure green. RGB(0, 0, 255) is pure blue. RGB(255, 255, 255) is white (all channels at maximum). RGB(0, 0, 0) is black (no light). RGB(128, 128, 128) is a medium gray (equal parts of each channel at half intensity). The RGB model is called additive because combining all colors at full intensity produces white, which matches how light works physically. Hexadecimal color codes are the most common color format on the web. A hex code is just an RGB value written in base-16. The hex code #FF0000 is RGB(255, 0, 0), which is red. The first two characters (FF) represent the red channel, the next two (00) represent green, and the last two (00) represent blue. FF in hexadecimal equals 255 in decimal. 00 equals 0. 80 equals 128. Converting between hex and RGB is a base conversion: divide the hex code into three pairs and convert each pair from base-16 to base-10. Shorthand hex codes use three characters instead of six. #F00 is equivalent to #FF0000. Each character is doubled: #F00 becomes #FF0000, #39F becomes #3399FF, #000 becomes #000000. This shorthand works only when each pair consists of two identical characters. #3A7F2B cannot be shortened because no pair has identical digits. Use shorthand in code for brevity when available, but be aware that some tools and design systems always output the full six-character form. Eight-digit hex codes add an alpha (transparency) channel. #FF000080 is red at 50% opacity. The last two digits (80, which is 128 in decimal, roughly 50% of 255) define the alpha value. #FF0000FF is fully opaque red (identical to #FF0000). #FF000000 is fully transparent red (invisible). Eight-digit hex is supported in modern CSS and all major browsers. Note that some formats (like Android development) place the alpha channel first (#80FF0000), so check the convention for your platform. HSL (Hue, Saturation, Lightness) represents color in a way that matches how humans think about color. Hue is the color angle on a color wheel: 0 degrees is red, 120 degrees is green, 240 degrees is blue, and 360 degrees wraps back to red. Saturation is the intensity of the color from 0% (gray) to 100% (fully vivid). Lightness is the brightness from 0% (black) to 100% (white), with 50% being the normal color. HSL(0, 100%, 50%) is pure red. HSL(120, 100%, 50%) is pure green. HSL(60, 100%, 50%) is pure yellow, halfway between red and green on the hue wheel. The practical advantage of HSL over RGB is intuitive color manipulation. To make a color lighter, increase the lightness value. To make it more muted, decrease saturation. To shift the color (from red toward orange, for example), adjust the hue angle. In RGB, achieving these same adjustments requires changing multiple channel values simultaneously, making it harder to predict the result. Designers building color palettes often work in HSL because they can create harmonious variations by systematically adjusting one parameter at a time. HSV (Hue, Saturation, Value) is closely related to HSL but defines brightness differently. In HSV, value represents the maximum brightness of the color. At V=100%, the color is as bright as possible. At V=0%, the color is black regardless of hue and saturation. HSV is the native color model in many design tools including Adobe Photoshop's color picker. The difference between HSL and HSV is subtle but matters: HSL(0, 100%, 100%) is white, while HSV(0, 100%, 100%) is pure red. HSV is more intuitive for painters and designers thinking about tinting with white versus shading with black. HSL is more symmetric and often preferred in CSS. HWB (Hue, Whiteness, Blackness) is a newer CSS color function that offers another intuitive model. The hue is the same as in HSL and HSV. Whiteness defines how much white is mixed in (0% to 100%). Blackness defines how much black is mixed in (0% to 100%). HWB(0, 0%, 0%) is pure red. HWB(0, 100%, 0%) is white. HWB(0, 0%, 100%) is black. HWB(0, 50%, 0%) is a light pink (red mixed with 50% white). Many designers find HWB the most intuitive model because it mirrors the physical concept of mixing paint with white or black. CSS supports hwb() in all modern browsers. CMYK (Cyan, Magenta, Yellow, Key/Black) is the color model used in printing. While screens add light (additive color mixing), printers lay down ink that absorbs light (subtractive color mixing). Cyan ink absorbs red light. Magenta absorbs green. Yellow absorbs blue. The key (black) channel exists because mixing CMY inks theoretically produces black but practically produces a muddy dark brown. Adding a dedicated black ink produces cleaner darks and saves colored ink. CMYK values range from 0% to 100% for each channel. Converting between RGB and CMYK is not a simple mathematical formula. The theoretical conversion (C = 1 - R/255, M = 1 - G/255, Y = 1 - B/255, then extracting K as the minimum of C, M, Y) gives you a starting point, but actual print colors depend on the ink, paper, printing press, and ICC color profile. Professional print workflows use color management systems with calibrated profiles to ensure accurate reproduction. The WebRecast converter performs the mathematical conversion, which is suitable for approximations, quick references, and non-critical color work. For production print jobs, always use a color-managed workflow with calibrated profiles. CSS color functions have expanded significantly in recent years. The traditional formats are hex (#FF0000), rgb(255, 0, 0), and hsl(0, 100%, 50%). Modern CSS also supports the hwb() function (Hue, Whiteness, Blackness), the lab() function (CIE LAB color space for perceptually uniform colors), the lch() function (CIE LCH, the cylindrical form of LAB), and the oklch() function (a corrected version of LCH that produces more predictable results). These newer color spaces address limitations in RGB and HSL, particularly around perceptual uniformity, where two colors with the same HSL lightness can appear quite different in brightness to the human eye. OKLCH deserves special attention because it is quickly becoming the recommended color space for web design. OKLCH stands for OK Lightness Chroma Hue and produces perceptually uniform results. This means a lightness of 70% looks equally bright across all hues, unlike HSL where yellow at 50% lightness appears much brighter than blue at 50% lightness. For creating accessible color palettes, generating consistent button hover states, and building design token systems, OKLCH produces better results than HSL. The syntax is oklch(70% 0.15 250) where 70% is lightness, 0.15 is chroma (color intensity), and 250 is the hue angle. Named CSS colors include 148 predefined names like red, blue, coral, darkslategray, and papayawhip. These names map to specific hex values (coral is #FF7F50, papayawhip is #FFEFD5). Named colors are convenient for prototyping and readable in code, but they limit you to a fixed palette. Most production CSS uses hex codes or HSL functions for precise control. The color names have historical origins: some come from X11 window system colors from the 1980s, which is why there are oddities like darkgray being lighter than gray. Alpha transparency (opacity) is available in all modern CSS color formats. rgba(255, 0, 0, 0.5) is red at 50% opacity. hsla(0, 100%, 50%, 0.5) is the same color. In modern CSS (Level 4), you can also write rgb(255 0 0 / 50%) using the space-separated syntax with a slash before the alpha value. The alpha channel ranges from 0 (fully transparent) to 1 (fully opaque) in CSS functions, or 0 to 255 in 8-digit hex. The difference between alpha transparency on a color and the CSS opacity property is important: opacity affects the entire element and its children, while color alpha affects only that specific color value. Color contrast is a critical consideration for accessibility. The Web Content Accessibility Guidelines (WCAG) require minimum contrast ratios between text and background colors. Level AA requires 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1 for normal text and 4.5:1 for large text. Contrast ratio is calculated from the relative luminance of two colors using the formula (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. Relative luminance uses a weighted formula that accounts for human perception: L = 0.2126R + 0.7152G + 0.0722B (after gamma correction). Green contributes most to perceived brightness, which is why green text on white needs higher RGB values than red text to reach the same contrast. Color blindness affects approximately 8% of men and 0.5% of women. The most common type is red-green color blindness (deuteranopia and protanopia), where reds and greens appear similar. Tritanopia (blue-yellow color blindness) is rare. Achromatopsia (complete color blindness) is extremely rare. When selecting colors for interfaces, charts, or data visualizations, avoid relying solely on color to convey information. Use color in combination with shapes, patterns, labels, or position. Testing your color palette with a color blindness simulator helps identify problematic combinations. The colors blue and orange are distinguishable by nearly all types of color blindness. Building a color palette for a website or application typically starts with a primary brand color. From that base, you derive a full palette of shades, tints, and complementary colors. In HSL, creating shades means decreasing lightness while keeping hue and saturation constant. Creating tints means increasing lightness. Creating a complementary color means adding 180 degrees to the hue. Analogous colors are within 30 degrees of the base hue. Triadic colors are 120 degrees apart. Split-complementary colors are 150 and 210 degrees from the base. These color theory relationships are easy to calculate in HSL and cumbersome in RGB or hex. Design tokens and CSS custom properties (variables) are the modern way to manage colors in a codebase. Define your colors once as CSS custom properties: --color-primary: hsl(220, 90%, 56%); --color-primary-light: hsl(220, 90%, 72%); --color-primary-dark: hsl(220, 90%, 40%). Reference these variables throughout your stylesheets. When you need to change the primary color, update one value. Design systems like Material Design and Tailwind CSS organize colors into scales (50, 100, 200 through 900) representing lightness variations of each hue. Dark mode requires a different approach to color than simply inverting everything. In dark mode, backgrounds are dark (not pure black, which causes too much contrast and eye strain) and text is light (not pure white for the same reason). Surfaces at different elevation levels use slightly lighter background shades. Brand colors often need reduced saturation and increased lightness in dark mode to maintain readability without appearing harsh on dark backgrounds. A well-designed color system using CSS custom properties can swap between light and dark palettes by changing variable values at the root level. Color spaces beyond sRGB are becoming important for modern displays. The sRGB color space, used by standard hex and RGB values, covers only about 35% of visible colors. Display P3, used by Apple devices and many modern monitors, covers about 45%. Rec. 2020, used in HDR television, covers about 75%. The new CSS color-mix(), color(), and oklch() functions can access these wider gamuts. A color specified as color(display-p3 1 0 0) produces a more vivid red than #FF0000 on displays that support P3. As wide-gamut displays become standard, understanding color spaces beyond sRGB becomes increasingly important for delivering vibrant visual experiences. Converting colors programmatically in JavaScript uses straightforward math. To convert hex to RGB: parseInt(hex.substring(1,3), 16) gives the red channel, and similarly for green and blue. To convert RGB to HSL: normalize R, G, B to the 0-1 range, calculate max and min values, derive lightness as (max+min)/2, saturation from the delta between max and min, and hue from which channel is the max. These formulas are well-documented and implemented in every color manipulation library (chroma.js, color, tinycolor2 in JavaScript, colour in Python, and palette in Rust). Gradients use multiple color codes. A CSS linear gradient transitions between colors: background: linear-gradient(to right, #FF0000, #0000FF) creates a red-to-blue gradient. Gradients in RGB can produce muddy intermediate colors because the straight line between two colors in RGB space may pass through unsaturated regions. Gradients in HSL or oklch often produce more vibrant transitions because they follow the color wheel. Modern CSS gradient interpolation with "in oklch" produces perceptually smooth transitions: background: linear-gradient(in oklch, #FF0000, #0000FF). This is a noticeable improvement for gradients between complementary colors. The WebRecast color converter accepts input in any supported format and instantly shows the equivalent values in all other formats. Enter a hex code and see the RGB, HSL, HSV, and CMYK values. Enter an HSL value and get the hex and RGB equivalents. This eliminates manual conversion math and reduces errors when translating between design tools (which may show HSV) and CSS (which uses hex, RGB, or HSL). The converter also displays a visual preview of the color so you can verify it matches your intention. Color in data visualization requires special attention. Charts, graphs, and maps must use colors that are distinguishable from each other, meaningful to the viewer, and accessible to people with color vision deficiencies. Sequential color scales (light to dark of one hue) work for continuous data like temperature or population density. Diverging color scales (two hues meeting at a neutral midpoint) work for data with a meaningful center point, like profit/loss or deviation from average. Categorical color scales (distinct hues) work for nominal data like product categories. Tools like ColorBrewer provide research-backed palettes optimized for different data types and accessibility requirements. Color management across devices is an ongoing challenge. The same hex code can look different on different screens due to variations in display technology, calibration, brightness, and ambient lighting. sRGB is the standard color space for the web, and most displays are calibrated to approximate it. Professional designers calibrate their monitors using colorimeters (hardware devices that measure display output) and ICC profiles. For web development where you cannot control the user's display, design with sufficient contrast margins so that slight color rendering differences do not affect usability or readability. Color extraction from images is useful for creating palettes that match photographs, brand assets, or inspiration images. The process involves sampling dominant colors using algorithms like k-means clustering, median cut, or octree quantization. These algorithms group similar pixels and identify the most representative colors. Tools like Adobe Color, Coolors, and various npm packages (color-thief, vibrant.js) automate this process. Extracting 5 to 8 dominant colors from a hero image and using them as accent colors ensures visual consistency between imagery and UI elements. Color psychology, while not an exact science, has some documented effects on perception. Red increases perceived urgency and is commonly used for sale announcements and error states. Blue conveys trust and professionalism, which is why financial institutions and social media platforms favor it. Green signals success, safety, and environmental themes. Orange is associated with action and is commonly used for call-to-action buttons. Yellow draws attention and works for warnings. These associations are culturally influenced: white represents mourning in some East Asian cultures, while red signifies luck and prosperity in Chinese culture. Consider your target audience's cultural context when choosing color schemes. Practical tips for working with color codes: always include the hash symbol (#) when writing hex codes in CSS, as it is required syntax. Use lowercase hex digits for consistency (#ff0000 rather than #FF0000), which is also the convention used by most CSS minifiers and formatters. Prefer HSL in your CSS when you need to create color variations programmatically. Use 8-digit hex or rgba/hsla for transparency rather than the opacity CSS property, which affects the entire element including children. Store your brand colors as design tokens and reference them consistently throughout your project rather than hardcoding color values in individual components. When communicating colors with a design team, include both the hex code and the visual swatch to avoid ambiguity from screen calibration differences.

Frequently asked questions

How is this different from a regular color converter?

This tool is designed for developers who need to convert multiple colors at once, with code-friendly output format.

What color formats are supported?

HEX (#RRGGBB), RGB(r,g,b), HSL(h,s%,l%), RGBA, and HSLA formats are all supported.