11
\$\begingroup\$

The world of art is full of colour, but the world of the network is even fuller than the world of art of diferent colours and it's renderings. That's why we need to know how to convert one type of colour format to another.

The challenge is self-evident:

Write a program / function than converts an given HEX code (#00ff0080, for instance) to RGBA (like rgba(0, 255, 0, 0.5)).

Rules:

  • External libraries/ built-ins for converting HEX to RGBA are disallowed. However, jQuery and syntax replacers like that are acceptable.
  • Standard Input/Output rules apply.
  • Format of the alpha can be between (1 == 100%) or the other (100 == 100%) that's not really important.
  • The output is flexible, as long as it returns the 4 converted values (as a String, Array, List, your choice).
  • You may choose to take the input without the # in the beginning. Hence, you can take input as either #RRGGBBAA or RRGGBBAA. You can assume that the hex code (excluding the #) will always be 8 characters long.
  • You should divide all the values by 255, including the alpha. The minimum decimal precision (for the alpha will be 2 decimal places).

Test Cases

Input:  00ff0080
Output: 0, 255, 0, 0.5

Scoring

, the code with the least amount of bytes wins.

\$\endgroup\$
  • \$\begingroup\$ Comments are not for extended discussion; this conversation has been moved to chat. \$\endgroup\$ – Dennis Jun 30 '17 at 18:57
  • 1
    \$\begingroup\$ Are we required to take the "hex code" as a string? You say that we can take it without the leading #, in which case it would just be a 32-bit integer value. Is it legal to take it as that? \$\endgroup\$ – Cody Gray Jul 10 '17 at 16:06

19 Answers 19

4
\$\begingroup\$

JavaScript (ES6), 73 54 50 bytes

(Saved some bytes thanks to @LeakyNun, the edited challenge, and @CraigAyre.)

s=>s.match(/../g).map((c,i)=>('0x'+c)/(i-3?1:255))

let f=

s=>s.match(/../g).map((c,i)=>('0x'+c)/(i-3?1:255))

console.log(f('00ff0080'));

\$\endgroup\$
  • \$\begingroup\$ Rick, it looks like we have the final spec for this now so you can update your answer. \$\endgroup\$ – Shaggy Jun 30 '17 at 16:06
  • \$\begingroup\$ As well as @Shaggy's comment you can save a few bytes by using eval instead of parseInt: s=>s.match(/../g).map((x,i)=>eval('0x'+x)/(i-3?1:255)) \$\endgroup\$ – Craig Ayre Jun 30 '17 at 16:16
  • \$\begingroup\$ @CraigAyre, eval is a great alternative to parseInt for golfing purposes, thanks! \$\endgroup\$ – Rick Hitchcock Jun 30 '17 at 18:12
  • \$\begingroup\$ @RickHitchcock, no worries! You can also shave a couple of bytes from the regex using /../g. You might be able to reduce it even further using replace over match/map \$\endgroup\$ – Craig Ayre Jun 30 '17 at 18:20
  • \$\begingroup\$ Oh, I see the rules have changed, so the initial pound sign is no longer required. \$\endgroup\$ – Rick Hitchcock Jun 30 '17 at 18:21
3
\$\begingroup\$

Japt, 13 bytes

Takes input as a string, without the leading #. Outputs the rgba value as an array.

ò ®nG
pUo /#ÿ

Test it


Explanation

We implicitly take the string as input via variable U.
"00ff0080"

ò

Split the string into an array of elements of length 2.
["00","ff","00","80"]

®nG

Map over the array and convert each element from a base 16 string to a decimal number. Because of the following newline, that array is implicitly assigned to variable U.
[0,255,0,128]

Uo

Pop the last element from the array.
128

/#ÿ

Divide it by 255.
0.5019607843137255

p

Push the result back into U then implicitly output the final array.
[0,255,0,0.5019607843137255]

\$\endgroup\$
2
\$\begingroup\$

PHP, 63 bytes

Output as array

$h=array_map(hexdec,str_split($argn,2));$h[3]/=255;print_r($h);

Try it online!

PHP, 80 bytes

Output as rgba value, Input without #

$h=array_map(hexdec,str_split($argn,2));$h[3]/=255;echo"rgba(",join(",",$h),")";

Try it online!

PHP, 88 bytes

Output as rgba value, Input with #

for(;$i<7;)$h[]=hexdec($argn[++$i].$argn[++$i]);$h[3]/=255;echo"rgba(",join(",",$h),")";

Try it online!

\$\endgroup\$
2
\$\begingroup\$

C (gcc), 139 bytes

C(x){x=x>57?x-87:x-48;}
#define Z C(h[i])*16+C(h[++i]))
i;f(char*h){printf("rgba(");for(i=0;i<6;i++)printf("%i, ",Z;printf("%g)",(Z/256.);}

Try it online!

My other attempt clocked in at 145 bytes. I'm not much of a C golfer, so this could probably be shorter.

\$\endgroup\$
2
\$\begingroup\$

05AB1E, 9 bytes

2ôH`255/)

Try it online!

At least we have supporters like Emigna to often use some common sense...(that's what you get for golfing all day and then you start producing stuff like 2ô16öRć255/¸ìR ಠ_ಠ)

\$\endgroup\$
  • \$\begingroup\$ 5 bytes shorter: 2ôH`žz/) \$\endgroup\$ – Emigna Jun 29 '17 at 16:49
  • \$\begingroup\$ @Emigna The challenge has been closed nevertheless... \$\endgroup\$ – Erik the Outgolfer Jun 29 '17 at 17:44
1
\$\begingroup\$

Jelly, 15 14 bytes

Øhi$€’s2ḅ⁴÷4¦⁹

Try it online!

How it Works

Øhi$€’s2ḅ⁴÷4¦⁹ - main link, takes input without # and all lowercase
   $€             - to each input character:
  i               - return its 1-based index in
Øh                - the string "0123456789abcdef"
     ’            - decrement (otherwise 0 is mapped to 1 and f to 16)
      s2          - split the characters into groups of two
        ḅ⁴        - convert from base 16 to decimal
           4¦     - on the fourth element:
          ÷       - divide by
             ⁹    - 256

-1 byte thanks to @EricTheOutgolfer

\$\endgroup\$
1
\$\begingroup\$

PHP, 72 bytes

Jörg´s array output version is unbeatable; but there are other options:

<?=($a=hexdec($argn))>>24,",",255&$a>>16,",",255&$a>>8,",",(255&$a)>256;

Run as pipe with -F. # does not matter, plain csv output

or 73 bytes (run with -R):

for($a=hexdec($argn);$i++<4;)echo(255&$a>>32-8*$i)/($i<4?:256),","[$i>3];

74 bytes with the spaces:

<?=($a=hexdec($argn))>>24,$c=", ",255&$a>>16,$c,255&$a>>8,$c,(255&$a)>256;

not so plain, 81 bytes:

rgba(<?=($a=hexdec($argn))>>24,$c=", ",255&$a>>16,$c,255&$a>>8,$c,(255&$a)/256?>)
\$\endgroup\$
1
\$\begingroup\$

Stacked, 47 45 41 bytes

[2#<$unhexmap(1::256)/', '#`'rgba(@id)'!]

Try it online!

\$\endgroup\$
1
\$\begingroup\$

Excel, 99 bytes

=HEX2DEC(LEFT(A1,2))&","&HEX2DEC(MID(A1,3,2))&","&HEX2DEC(MID(A1,5,2))&","&HEX2DEC(RIGHT(A1,2))/256
\$\endgroup\$
1
\$\begingroup\$

SmileBASIC, 50 bytes

INPUT H$RGBREAD VAL("&H"+H$)OUT R,G,B,A?R,G,B,A/#L

The hexadecimal string is converted to a number using VAL(), then RGBREAD extracts each byte. #L is a constant with the value 256.

RGBREAD is designed to extract the channels from an ARGB color, but really it just splits a 4 byte integer into 4 separate bytes, so the order doesn't matter.

\$\endgroup\$
  • \$\begingroup\$ I always like seeing basic responses, but I am afraid that this response may be invalid, as it uses a built in for converting hexadecimal to rgba \$\endgroup\$ – Taylor Scott Mar 5 '18 at 21:54
  • \$\begingroup\$ I think it doesn't count as a hex->rgba builtin because it requires an extra step to convert the hex string into an integer. \$\endgroup\$ – 12Me21 Mar 5 '18 at 23:21
  • \$\begingroup\$ Actually, looking at it again, I think you are right, the explicit conversion from hex to int would make it valid. \$\endgroup\$ – Taylor Scott Mar 6 '18 at 12:35
0
\$\begingroup\$

Perl 6, 42 bytes

{m:g/../.map({:16(~$_)}) »/«(1,1,1,255)}

Try it online!

\$\endgroup\$
0
\$\begingroup\$

JS ES2015, 84 bytes

$=>{a=[1,3,5,7].map(b=>eval("0x"+$.substr(b,2)));a[3]=(a[3]/256);return a.join(",")}

this is a function. Run it using

( CODE )("#00ff0080")
\$\endgroup\$
0
\$\begingroup\$

Python 3, 62 bytes

lambda h:[int(h[x:x+2],16)for x in(0,2,4)]+[int(h[6:],16)/255]

Try it online!

\$\endgroup\$
0
\$\begingroup\$

q/kdb+, 43 bytes

Solution:

{(16 sv'(.Q.n,6#.Q.a)?/:2 cut x)%1 1 1 256}

Example:

q){(16 sv'(.Q.n,6#.Q.a)?/:2 cut x)%1 1 1 256}"00ff0080"
0 255 0 0.5

Explanation:

{                                         } / anonymous lambda function
                        2 cut x             / split input into 2-char length lists
                     ?/:                    / returns index where (each-right) item is found in 'the list'
        (           )                       / 'the list'
              6#.Q.a                        / Q.a is lowercase alphabet, 6# takes first 6 chars
         .Q.n,                              / Q.n is "012..89", so prepend this onto the "abcdef"                         
  16 sv'                                    / converts each index from base 16 to base 10
 (                            )%1 1 1 256   / divide this output by 1,1,1,256 to get alpha in 0..1 range 
\$\endgroup\$
0
\$\begingroup\$

APL (Dyalog), 24 bytes

Requires ⎕IO←0 which is default on many systems. Prompts for input as uppercase without #.

256÷⍨@3⊢16⊥⍉4 2⍴⍞⍳⍨⎕D,⎕A

Try it online!

⎕D,⎕ADigits followed by Alphabet

⍞⍳⍨ prompt for text input (mnemonic: console with quote) and find the ɩndex of each letter in that

4 2⍴reshape as four row two column matrix

 transpose (because base conversion works columnwise)

16⊥ evaluate as base sixteen

 yield (serves to separate 3 and 16)

256÷⍨@3 divide the 4th element by 256

\$\endgroup\$
0
\$\begingroup\$

Python 2, 54 bytes

lambda h:[int(h[i-2:i],16)/2.**(8&i)for i in(2,4,6,8)]

Try it online!

\$\endgroup\$
0
\$\begingroup\$

Yabasic, 96 bytes

Yet another answer; Takes input as string and outputs to the console.

Input""a$
For i=1To 7Step 2
?Dec(Mid$(a$,i,2))/(j+1);
If i=5Then j=255Fi
If i<7Then?", ";Fi
Next

Try it online!

\$\endgroup\$
  • \$\begingroup\$ You can save a byte by removing the line break before ?. \$\endgroup\$ – 12Me21 Mar 5 '18 at 23:23
0
\$\begingroup\$

Excel VBA, 90 bytes

An anonymous VBE immediate window function that takes input from the range [A1] and outputs to the VBE immediate window.

For i=1To 7Step 2:[B1]=i:?[Hex2Dec(Mid(A1,B1,2))]/IIf(i=7,256,1)&""+IIf(i<7,", ","");:Next
\$\endgroup\$
0
\$\begingroup\$

Vim, 46 bytes

:s/../$((16#&)) /g␊iecho ␛$hhi*100/255␛:w !sh␊

Takes input without the # and returns by printing on the screen.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.