Returning Values from a function

I've got some javascript doing a bunch of stuff and in the middle of it I need to get a colour based on a value in my function and a call to the database. I've been messing around with my function getCoverageColourCode and neither version works the way I want.

when I view the console I get

What am I missing that my the variable colour in drawStuff isn't catching the returned value?

function drawStuff(position){
    var colour = getCoverageColourCode(position);
    console.log('colour about to be applied: '+ colour);
       }

   
function getCoverageColourCode(position){

            $.ajax({
                url: "/data.php",
                data: position.toJSON(),
                async: false,  // shouldn't have this, I know
                type: 'GET',
                success: function(data, textStatus, jqXHR){
                    console.log('Success: '+data);
                    return data;
                }
            });
    }

    function getCoverageColourCode1(position){

        $.when(
            $.ajax({
                url: "/data.php",
                data: position.toJSON(),
                async: false,
                type: 'GET',
            })
            .then(
                function (response){
                    console.log('Success: '+response);
                    return response;
                },
                function (reasons) {
                    console.log('Fail: '+reasons);
                    return '#FF0000';
                }   
                )
            );
    }

Code (markup):

 

Fixed it, had to have a change of strategy. Instead of getting the building blocks and putting it altogether I've changed it so that each building block initiates the call to the next building block and it works a treat.