Convert multiple RGB values to HSL with this REST API

In this article, I show you how to convert multiple color values from one format into another by using the Converting Colors REST Api, which I provide on RapidAPI.

As input values, we will take the RGB colors "80, 120, 160", "240, 140, 40", "0, 0, 0" and "255, 255, 255".

The expected output if we check the mass conversion tool on this website is:

210°, 33%, 47%
30°, 87%, 55%
0°, 0%, 0%
0°, 0%, 100%
📋 Copy Code

To use the API, you need to create a RapidAPI account and then use the Mass Conversion endpoint of the API.

There are three required parameters the target and the source format and the color values as JSON array in the POST body.

So our target format is HSL and the source RGB, the JSON array for the colors looks like the following:

["80, 120, 160", "240, 140, 40", "0, 0, 0", "255, 255, 255"]
📋 Copy Code

The URL you need to call for these formats is https://convert-colors.p.rapidapi.com/mass-convert/rgb/hsl.

In the request headers, you have to send the "x-rapidapi-host" which is "convert-colors.p.rapidapi.com" and the "x-rapidapi-key" which you get after signup.

A jQuery sample call

var settings = {
    "async": true,
    "crossDomain": true,
    "url": "https://convert-colors.p.rapidapi.com/mass-convert/rgb/hsl",
    "method": "POST",
    "headers": {
        "x-rapidapi-host": "convert-colors.p.rapidapi.com",
        "x-rapidapi-key": "SIGN UP FOR A KEY",
        "content-type": "application/json",
        "accept": "application/json"
    },
    "processData": false,
    "data": "[\"80, 120, 160\", \"240, 140, 40\", \"0, 0, 0\", \"255, 255, 255\"]"
}

$.ajax(settings).done(function (response) {
    console.log(response);
});
📋 Copy Code

and PHP

<?php

$client = new http\Client;
$request = new http\Client\Request;

$body = new http\Message\Body;
$body->append('["80, 120, 160", "240, 140, 40", "0, 0, 0", "255, 255, 255"]');

$request->setRequestUrl('https://convert-colors.p.rapidapi.com/mass-convert/rgb/hsl');
$request->setRequestMethod('POST');
$request->setBody($body);

$request->setHeaders(array(
    'x-rapidapi-host' => 'convert-colors.p.rapidapi.com',
    'x-rapidapi-key' => 'SIGN UP FOR A KEY',
    'content-type' => 'application/json',
    'accept' => 'application/json'
));

$client->enqueue($request)->send();
$response = $client->getResponse();

echo $response->getBody();
📋 Copy Code

The result in both cases is a JSON object, which always contains the three entries "errors", "output" and "input". In our case, the result is the following.

{
    "errors":[],
    "output":{
        "80, 120, 160": "210°, 33%, 47%",
        "240, 140, 40": "30°, 87%, 55%",
        "0, 0, 0": "0°, 0%, 0%",
        "255, 255, 255": "0°, 0%, 100%"
    },
    "input":{
        "colors":[
            0: "80, 120, 160",
            1: "240, 140, 40",
            2: "0, 0, 0",
            3: "255, 255, 255"
        ],
        "source": "rgb",
        "target": "hsl"
    }
}
📋 Copy Code

The API also offers a lot of other endpoints for you to explore!