Q:

Uncaught ReferenceError: updateHead is not defined using jscolor

This is a fairly simple question, I am not quite sure what is wrong (new to this). 
When I try to run the following on my robot, I always get "Uncaught ReferenceError: updateHead is not defined":
This is for a Robot, using ROS, that is controllable over the internet using ROS plugins for rosbridge_websocket. 
<! DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="http://cdn.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
    <script type="text/javascript" src="http://cdn.robotwebtools.org/roslibjs/current/roslib.min.js"></script>
    <script type="text/javascript" type="text/javascript">

        var ros = new ROSLIB.Ros({
          url : 'ws://glados-cpr:9090'
        });

        ros.on('connection', function() {
          console.log('Connected to websocket server.'); 
        });

        ros.on('error', function(error) {
          console.log('Error connecting to websocket server: ', error);
        });

        ros.on('close', function() {
          console.log('Connection to websocket server closed.'); 
        });

        // Publishing a Topic
        // ------------------

        var base = new ROSLIB.Topic({
          ros : ros,
          name : '/base',
          messageType : 'std_msgs/UInt8'
        });
        var base_val = new ROSLIB.Message({data : 0});

        var elbow = new ROSLIB.Topic({
          ros : ros,
          name : '/elbow',
          messageType : 'std_msgs/UInt8'
        });
        var elbow_val = new ROSLIB.Message({data : 0});

        var wrist = new ROSLIB.Topic({
          ros : ros,
          name : '/wrist',
          messageType : 'std_msgs/UInt8'
        });
        var wrist_val = new ROSLIB.Message({data : 0});

        var head = new ROSLIB.Topic({
          ros : ros,
          name : '/head',
          messageType : 'std_msgs/UInt8'
        });
        var head_val = new ROSLIB.Message({data : 0});

        function UP() {
           elbow_val.data = elbow_val.data + 5;
           elbow.publish(elbow_val);
        }

        function DOWN() {
           elbow_val.data = elbow_val.data - 5;
           elbow.publish(elbow_val);
        } 

        function LEFT() {
           base_val.data = base_val.data + 5;
           base.publish(base_val);
        } 

        function RIGHT() {
           base_val.data = base_val.data - 5;
           base.publish(base_val);
        } 

        function POWER_OFF() {
           base_val.data = 0;
           base.publish(base_val);
           elbow_val.data = 0;
           elbow.publish(elbow_val);
           wrist_val.data = 0;
           wrist.publish(wrist_val);
           head_val.data = 0;
           head.publish(head_val);
        }

        var speech = new ROSLIB.Topic({
            ros : ros,
            name : '/speech',
            messageType : 'std_msgs/String'
        });
        var speech_val = new ROSLIB.Message({data : ""});

        function SAY(){
        speech_val.data = document.getElementById('TEXTBOX_SPEECH').value;
        speech.publish(speech_val);

        var color_head = new ROSLIB.Topic({
            ros : ros,
            name : '/color_head',
            messageType : 'std_msgs/ColorRGBA'
        });
        var cHead_val = new ROSLIB.Message({r:0, g:0, b:0, a:0});

        var color_body = new ROSLIB.Topic({
            ros : ros,
            name : '/color_body',
            messageType : 'std_msgs/ColorRGBA'
        });
        var cBody_val = new ROSLIB.Message({r:0, g:0, b:0, a:0});

        function updateHead(color) {
            cHead_val.r = color.rgb[0];
            cHead_val.g = color.rgb[1];
            cHead_val.b = color.rgb[2];
            color_head.publish(cHead_val);
        }
        function updateBody(color) {
            cBody_val.r = color.rgb[0];
            cBody_val.g = color.rgb[1];
            cBody_val.b = color.rgb[2];
            color_body.publish(cBody_val);
        }

        }

    </script>
    <script type="text/javascript" src="jscolor.js"></script>
</head>
<body>
    <center>
        <h1>GLaDOS Control Centre</h1>
        <img src="/?action=stream" />
        <br>
        <input id="POWER OFF" type="button" value="POWER OFF" onclick="POWER_OFF();" />
        <br>
        <input id="UP" type="button" value="UP" onclick="UP();" />
        <br>
        <input id="LEFT" type="button" value="LEFT" onclick="LEFT();" />
        <input id="RIGHT" type="button" value="RIGHT" onclick="RIGHT();" />
        <br>
        <input id="DOWN" type="button" value="DOWN" onclick="DOWN();" />
        <br>
        <input type="text" id="TEXTBOX_SPEECH">
        <input id="SAY" type="button" value="SAY" onclick="SAY();" />
        <br>
        Head Colour: <input class="color" onchange="updateHead(this.color);" value="0800FF">
        <br>
        Body Colour: <input class="color {onImmediateChange:'updateBody(this);'}" value="FFF82B">
    </center>
</body>

A:

You're defining the updateHead and updateBody functions inside the SAY function. 
Due to javascripts function scope they're not available outside of the SAY function. 
You need to define them in global/window scope(move them out of the SAY function) to access them like you do.