How to make your widget text box coloured?

You can use html in the widget so just set your color as background

Can you help me with the code to add background colour in the text widget?
I want a different colour for the heading and different one for the body.

About the body you just have to add <span style="background:white;">your text</span> for example, but I think that the headings cant’t be modified with html so you will need to do additional work somewhere in your theme.

Just edit your theme’s CSS to add the different colours. Try using Firefox with the Firebug add-on for this kind of CSS work.
https://getfirebug.com/

The above code only colours the text. I want a coloured box in which the text resides?

Remove the CSS from the widget and stick to modifying your theme’s CSS – possibly via a child theme.

Thanks Esmi. I will try using firefox and get back ??

Yes, of course the best option is to create a custom css for this, in child theme. If you can do this, it will be great