How to Convert multiple RGB values to HSL with this REST API

Andreas Zettl • April 26, 2021

coding javascript php converting colors

In this how-to, 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%

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!

Share on Twitter Share on Facebook