HEX to RGB & HSL Color Converter

What does the HEX to RGB & HSL Color Converter do?

The HEX to RGB & HSL Color Converter transforms web color codes between hexadecimal format (#RGB, #RRGGBB, and 8-digit alpha #RRGGBBAA) and standard CSS rgb(), rgba(), hsl(), hsla(), modern CSS variable channel formats (59 130 246), and print cmyk(). It provides a live visual color swatch, automatic WCAG text contrast recommendations, and batch palette translation for design systems and frontend developers.

Core Concepts

Understanding CSS color model conversions:

• Hexadecimal Decoding: Parses two-digit base-16 strings into 0–255 integer intensities for Red, Green, and Blue light channels.
• Alpha Channel Representation: 8-digit HEX formats (e.g. #3b82f680) convert the final two digits into floating-point alpha fractions (e.g. 0.5) for rgba() and hsla().
• Hue, Saturation, Lightness (HSL): Converts RGB cube coordinates into a cylindrical color model, making it easy to create consistent tint and shade design palettes.
• CSS Custom Property Channels: Modern CSS frameworks like Tailwind CSS use space-separated RGB numbers (59 130 246) to allow dynamic opacity modifiers (rgb(var(--color-primary) / 0.5)).

How to use the tool?

1. Enter or Pick HEX Color: Type #3b82f6, paste a batch list of hex values, or select a color using the built-in color picker.
2. Inspect Formats & Contrast: View the live color preview, WCAG contrast text badge, and calculated RGB/HSL values.
3. Copy Output: Click Copy next to any desired CSS format or download a converted batch list.

Related Developer Utilities

If you work with CSS styling, web design, and UI components, explore these complementary tools:

• CSS Unit Converter: Convert between PX, REM, EM, VW, VH, and percentage units.
• CSS Minifier: Minify and compress CSS stylesheets to reduce bandwidth and load times.
• CSS Formatter: Beautify and indent unformatted CSS rules.
• HTML Color Stripper: Strip HTML tags and retain pure plain text.

REST API Integration

Blueutils provides a free REST API endpoint (POST https://blueutils.com/api/css/hex-to-rgb) to programmatically convert HEX color codes into RGB, RGBA, HSL, and CMYK formats for design-token compilation and CI/CD pipelines.

API Request Parameters

API Request Payload Examples

cURL

curl -X POST https://blueutils.com/api/css/hex-to-rgb \
  -H "Content-Type: application/json" \
  -d '{
    "rawText": "#3b82f6"
  }'

Python

import requests

url = "https://blueutils.com/api/css/hex-to-rgb"
payload = {"rawText": "#3b82f6"}
headers = {"Content-Type": "application/json"}
response = requests.post(url, json=payload, headers=headers)
print(response.json())

Java

import java.net.URI;
import java.net.http.HttpClient;
import java.net.http.HttpRequest;
import java.net.http.HttpResponse;

public class Main {
    public static void main(String[] args) throws Exception {
        String jsonPayload = """
            {
                "rawText": "#3b82f6"
            }
            """;

        HttpClient client = HttpClient.newHttpClient();
        HttpRequest request = HttpRequest.newBuilder()
            .uri(URI.create("https://blueutils.com/api/css/hex-to-rgb"))
            .header("Content-Type", "application/json")
            .POST(HttpRequest.BodyPublishers.ofString(jsonPayload))
            .build();

        HttpResponse<String> response = client.send(request, HttpResponse.BodyHandlers.ofString());
        System.out.println(response.body());
    }
}

API Response Parameters

API Response Payload Examples

Success Response (HTTP 200 OK)

{
  "isValid": true,
  "isBatch": false,
  "total": 1,
  "hex": "#3b82f6",
  "rgb": "rgb(59, 130, 246)",
  "rgba": "rgba(59, 130, 246, 1)",
  "hsl": "hsl(217, 91%, 60%)",
  "hsla": "hsla(217, 91%, 60%, 1)",
  "cmyk": "cmyk(76%, 47%, 0%, 4%)",
  "cssVariable": "59 130 246",
  "contrastText": "#ffffff",
  "components": {
    "r": 59,
    "g": 130,
    "b": 246,
    "a": 1,
    "h": 217,
    "s": 91,
    "l": 60,
    "c": 76,
    "m": 47,
    "y": 0,
    "k": 4
  }
}

Validation Failure Response (HTTP 400 Bad Request)

{
  "isValid": false,
  "error": "Invalid HEX color format: \"#invalid\". Expected #RGB, #RGBA, #RRGGBB, or #RRGGBBAA."
}

Rate Limit Exceeded Response (HTTP 429 Too Many Requests)

{
  "error": "API rate limit exceeded. Please wait or contact support@blueutils.com."
}

Why use an API to convert HEX to RGB?

Integrating the HEX to RGB API into design-token build systems, theme generators, or AI agents provides key benefits:

• Automated Design Token Pipelines: Converts raw brand color tokens into multi-format CSS variables, Tailwind palettes, and iOS/Android color representations during CI/CD.
• AI Agent Styling & UI Generation: Enables AI frontend agents to calculate color luminance and WCAG text contrast dynamically before generating components.
• Design System Consistency: Normalizes shorthand 3-digit and alpha-hex codes into standard RGB/HSL formats across microservices.

Native Usage

How to convert HEX to RGB natively across programming environments:

Linux / Unix (Bash with Node.js)

# Convert HEX to RGB in Bash via Node.js
node -e '
const hex = "#3b82f6".replace("#", "");
const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);
console.log(`rgb(${r}, ${g}, ${b})`);
'

Windows (PowerShell)

# Convert HEX to RGB in PowerShell
$hex = "3b82f6"
$r = [Convert]::ToInt32($hex.Substring(0,2), 16)
$g = [Convert]::ToInt32($hex.Substring(2,2), 16)
$b = [Convert]::ToInt32($hex.Substring(4,2), 16)
Write-Host "rgb($r, $g, $b)"

Windows (Command Prompt)

:: Convert HEX to RGB via PowerShell one-liner in Command Prompt
powershell -Command "$h='3b82f6'; 'rgb(' + [Convert]::ToInt32($h.Substring(0,2),16) + ', ' + [Convert]::ToInt32($h.Substring(2,2),16) + ', ' + [Convert]::ToInt32($h.Substring(4,2),16) + ')'"

Python

def hex_to_rgb(hex_str):
    hex_str = hex_str.lstrip('#')
    return tuple(int(hex_str[i:i+2], 16) for i in (0, 2, 4))

print(f"rgb{hex_to_rgb('#3b82f6')}")

Java

import java.awt.Color;

public class HexToRgbExample {
    public static void main(String[] args) {
        Color color = Color.decode("#3b82f6");
        System.out.printf("rgb(%d, %d, %d)%n", color.getRed(), color.getGreen(), color.getBlue());
    }
}