what's wrong with my if .. else code?

what's wrong with my if .. else code?

Hi I'm trying to get the following code working:

$(document).ready(function() {
$('.red').hover(function() {
$('.yellow, .green').fadeToggle('slow');
});
var bg_colour = $('.yellow').css('background-color')
$('.blue').click(function(){
alert($('.yellow').css('background-color'))
if(bg_colour=='rgb(255, 255, 0)') {
      $('.yellow').css('background-color', '#0F0');
$('.green').css('background-color', '#FF0');
    } else {
      $('.yellow').css('background-color', '#FF0');
$('.green').css('background-color', '#0F0');
    }
});
});

It functions up to a point but I can't seem to get the else part to do anything. It is meant to change the colors of the two div's back to their original back-ground colors. Any ideas?

The html and css this relates to is:

<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.wrapper {
width: 800px;
margin-right: auto;
margin-left: auto;
margin-top:30px;
}
.red {
background-color: #F00;
height: 100px;
}

.yellow {
background-color: #FF0;
float: right;
height: 300px;
width: 400px;
}
.green {
background-color: #0F0;
float: left;
height: 300px;
width: 400px;
}
.blue {
background-color: #00F;
clear: both;
height: 100px;
}
</style>
</head>

<body>
<div class="wrapper">
  <div class="red"></div>
  <div class="green"></div>
  <div class="yellow"></div>
  <div class="blue"></div>
</div>
</body>
</html>