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.

Andreas Zettl | 2 minute read

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%

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"]

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);
});

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();

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"
    }
}

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


🔙 Back to the article overview | Share on Twitter

      FontExplorer X - Makes Everyone an Expert

Advertisment: These links are affiliate (commission) links. If you click on such a link and buy something on that website, I get a commission. For you, the price does not change.