# Cell Colors

## Content

You can set background and foreground colors for cells, columns, rows, headers, and the widget.

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/cellcolor.png)

Set the **backColor** or **foreColor** methods for cells, columns, headers, or rows. You can set the [backColor](/spreadjs/api/v16/classes/GC.Spread.Sheets.CellRange#backColor) method or use themes for the widget. You can use the **options.grayAreaBackColor** property for the gray area.

For more information about themes, refer to [Configure Themes](/spreadjs/docs/v16/features/styletheme/themes). You can also use styles to set cell colors. For more information, refer to [Styles](/spreadjs/docs/v16/features/cells/styles).

The following code sample sets the [foreColor](/spreadjs/api/v16/classes/GC.Spread.Sheets.CellRange#foreColor) and [backColor](/spreadjs/api/v16/classes/GC.Spread.Sheets.CellRange#backColor) for cell B2.

```javascript
//Set the backcolor and forecolor of cells.
var cell = activeSheet.getCell(1, 1, GC.Spread.Sheets.SheetArea.viewport);
cell.backColor("Blue");
cell.foreColor("Red");
cell.value("Color");
```

You can set the forecolor and backcolor for the header as shown in the code sample below.

```javascript
//Set the backcolor and forecolor for the entire column header.
var row = activeSheet.getRange(0, -1, 1, -1, GC.Spread.Sheets.SheetArea.colHeader);
row.backColor("Red");
row.foreColor("White");

//Set the backcolor for the second row header.
activeSheet.getCell(1, 0, GC.Spread.Sheets.SheetArea.rowHeader).backColor("Yellow");
```

The color of the active cell can also be changed by binding an event.

```javascript
window.onload = function()
{
   var spread =
   new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
   var sheet = spread.getActiveSheet();
   sheet.getCell(0, 0).backColor("pink");
   sheet.bind(GC.Spread.Sheets.Events.LeaveCell, function (event, infos) {
   
   // Reset the backcolor of cell before moving
   infos.sheet.getCell(infos.row, infos.col).backColor(undefined);
   });
  
   sheet.bind(GC.Spread.Sheets.Events.EnterCell, function (event, infos) {
           
      //Set the backcolor of destination cells (currently active cells)
      infos.sheet.getCell(infos.row, infos.col).backColor("pink");
   });
}
```