Color Utilities

Hex To Hsl

Converts hex color codes to HSL (Hue, Saturation, Lightness) format with precise calculations. Access via MCP in Cursor or Windsurf for instant color space conversions, or call GET /v1/color/hex-to-hsl directly. Input "#FF5733" returns hue: 14°, saturation: 100%, lightness: 60%. Perfect for design workflows requiring HSL manipulation.

API Endpoint

GET /v1/color/hex-to-hsl

Code Examples

curl "https://tinyfn.io/v1/color/hex-to-hsl" \
  -H "X-API-Key: YOUR_API_KEY"
const response = await fetch('https://tinyfn.io/v1/color/hex-to-hsl', {
  headers: { 'X-API-Key': 'YOUR_API_KEY' }
});
const data = await response.json();
console.log(data);
import requests

response = requests.get('https://tinyfn.io/v1/color/hex-to-hsl',
    headers={'X-API-Key': 'YOUR_API_KEY'})
data = response.json()
print(data)

Use via MCP

Add to your AI agent

Connect your AI agent (Claude, Cursor, Windsurf, etc.) to TinyFn's color tools:

{
  "mcpServers": {
    "tinyfn-color": {
      "url": "https://tinyfn.io/mcp/color",
      "headers": {
        "X-API-Key": "YOUR_API_KEY"
      }
    }
  }
}

Learn more about MCP setup →

Related Tools

Hsl To Hex
Convert HSL to hex color.
Hex To Hsv
Convert hex color to HSV.
Hsv To Hex
Convert HSV to hex color.
Hex To Cmyk
Convert hex color to CMYK.
Cmyk To Hex
Convert CMYK to hex color.
Lighten Color
Lighten a color by a percentage.
Darken Color
Darken a color by a percentage.
Saturate Color
Increase color saturation by a percentage.

FAQ

What HSL format does hex-to-hsl return?

Returns HSL as separate numeric values: hue (0-360 degrees), saturation (0-100%), and lightness (0-100%). No CSS string formatting.

Can I convert hex colors without the # symbol?

Yes, both #FF5733 and FF5733 formats work. The tool handles 3-digit (#RGB) and 6-digit (#RRGGBB) hex codes automatically.

How do I use hex-to-hsl in my MCP-enabled editor?

In Cursor or Claude Code, reference the tool directly in prompts: 'Convert #3498DB to HSL using hex-to-hsl'. The AI agent calls the function and returns precise values.

What's the difference between HSL and HSV color spaces?

HSL uses lightness (pure color at 50%), while HSV uses brightness/value (pure color at 100%). Use HSL for web design, HSV for color picking interfaces.

Does hex-to-hsl handle invalid hex codes gracefully?

The tool validates hex input and returns error messages for malformed codes. Invalid characters or wrong lengths are caught before conversion.

Try Hex To Hsl Now

Get your free API key and start using Hex To Hsl in seconds.

Get Free API Key