DEV Community

Daily Challenge #158 - RGB To Hex Conversion

dev.to staff on January 10, 2020

The rgb() method is incomplete. Complete the method so that passing in RGB decimal values will result in a hexadecimal representation being returne...

Read full post

SavagePixie • Jan 10 '20 • Edited

My JavaScript solution, which would look a lot nicer if the TC39 finally added a pipeline operator.

const checkRange = num => Math.min(255, Math.max(num, 0))

const rgb = (...args) => args.slice(0, 3)
    .map(x => checkRange(x)
        .toString(16)
        .toUpperCase()
        .padStart(2, '0'))
    .join('')

Luiz Felipe Gonçalves • Jan 10 '20 • Edited

String.prototype.padStart would handle the addZeroes trick for you. ;)

Quozzo • Jan 11 '20 • Edited

I got really confused when the link opened in Portuguese. I had to check my VPN 😆

Luiz Felipe Gonçalves • Jan 11 '20

Whoops! Sorry about that. :P Should be fixed now.

SavagePixie • Jan 10 '20 • Edited

I've modified it to use padStart instead of my custom function.

Thanks @lffg and @avalander !

Avalander • Jan 10 '20

We have padStart now in strings to add characters to the beginning up to a certain length.

Mihail Malo • Jan 25 '20 • Edited

Nodejs (not web):

const rgb = (...args) => 
  Buffer.from(args).toString('hex') // .toUpperCase() // if you are wasteful xD

Not necessarily actually efficient, but definitely hilarious.

General JS:

const rgb = (...args) =>
  args.reduce((a, x, i) => a + x * 0x100 ** (2 /*or args.length*/ - i), 0)
  .toString(16).toUpperCase().padStart(6, '0')

Ilyes Chouia • Jan 12 '20 • Edited

My PHP Solution

// round the number to the closest value (255 or 0)
function roundToClosest($color)
{ 
    if($color > 255){
        return 255;
    }elseif($color < 0){
        return 0;
    }
    return $color; 
}

function rgb($r,$g,$b){

    $r = roundToClosest($r);
    $g = roundToClosest($g);
    $b = roundToClosest($b);

    return sprintf("%02X%02X%02X", $r, $g, $b);
}

Amin • Jan 10 '20

Elm

toHexadecimalLetter : Int -> String
toHexadecimalLetter integer =
    case integer of
        10 ->
            "A"

        11 ->
            "B"

        12 ->
            "C"

        13 ->
            "D"

        14 ->
            "E"

        15 ->
            "F"

        _ ->
            String.fromInt integer

toHexadecimal : Int -> String
toHexadecimal integer =
    let
        clampedInteger  = clamp 0 255 integer
        integerDivision = clampedInteger // 16
        decimalDivision = toFloat clampedInteger / 16.0
        rest            = floor ((decimalDivision - toFloat integerDivision) * 16)
    in
        toHexadecimalLetter integerDivision ++ toHexadecimalLetter rest 

rgb : Int -> Int -> Int -> String
rgb red green blue =
    [red, green, blue]
        |> List.map toHexadecimal
        |> String.join ""

Test.

Craig McIlwrath • Jan 10 '20

Haskell, using the word8 type to ensure the inputs are from 0-255.

import Data.Bits
import Data.Word 

hexMap :: (Integral a) => a -> Char
hexMap = ("0123456789ABCDEF"!!) . fromIntegral

toHex :: Word8 -> String
toHex word = let lo = word .&. 15
                 hi = word .&. 240
             in  hexMap lo : hexMap (hi `shift` (-4)) : [] 

rgb :: Word8 -> Word8 -> Word8 -> String
rgb r g b = toHex r ++ toHex g ++ toHex b

Meow • Jan 11 '20

My solution in PHP

<?php

namespace MayMeow\PHPColor;

class Color
{
    /** int $red */
    public $red;

    /** int $green */
    public $green;

    /** int $blue */
    public $blue;

    public function __construct($red, $green, $blue)
    {
        $this->red = $red;
        $this->green = $green;
        $this->blue = $blue;
    }

    /**
     * Method convertToHex
     * Covert given color to string #RRGGBB
     */
    public static function convertToHex(Color $color)
    {
        $red = dechex($color->red);
        if (strlen($red) < 2) $red = '0' . $red; // check string length and add zero if needed

        $green = dechex($color->green);
        if (strlen($green) < 2) $green = '0' . $green;

        $blue = dechex($color->blue);
        if (strlen($blue) < 2) $blue = '0' . $blue;

        return '#' . $red . $green . $blue;
    }

    /**
     * Method convertToRGB
     * Convert given color string back to RGB color values
     */
    public static function convertToRGB($hex)
    {
        $hex = ltrim($hex, "#");

        $red = hexdec(substr($hex, 0, 2));
        $green = hexdec(substr($hex, 2, 2));
        $blue = hexdec(substr($hex, 4, 2));

        return new Color($red, $green, $blue);
    }
}

David Kanekanian • Jan 11 '20

Python solution, supports 1 or 3 arguments like CSS.

rgb = lambda *_: "#"+eval("'%02X'"+(lambda a:a.pop(len(_)>1)+a.pop())(["%_","*3"]))

print(rgb(255)) # => #FFFFFF
print(rgb(126, 28, 29)) # => #7E1C1D

Nick Holmes • Jan 11 '20

In C#, you don't even really need to implement a method for this, as its easily done with string interpolation;

    var rgb  = $"{red:X02}{green:X02}{blue:X02}";

(Useful for unique ad-hoc strings, but usually better factored out to a method anyway)

Daniel Viklund • Jan 10 '20

Ruby solution

def valid_num(v)
  [[v, 255].min, 0].max
end

def rgb(*args)
  args[0..2].reduce('') { |str, v|
    str << valid_num(v).to_s(16).rjust(2, '0')
  }
end

Vaibhav Yadav • Jan 10 '20

In Go.

func rgb(r, g, b uint8) string {
    return fmt.Sprintf("#%x%x%x", r, g, b)
}

Daniel Viklund • Jan 10 '20

Thanks for the tip! I've mostly used string formating for dealing with point numbers in decimals. Need to explore more use cases because the syntax is indeed preferable.

Adam Crockett 🌀 • Jan 10 '20

I'd do this with Uint8Array