# Customizing the Colors of a Cell

Learn how you can set the background and foreground (text) colors for a cell or for a group of cells using Spread for ASP.NET.

## Content

You can set the background and foreground (text) colors for a cell or for a group of cells. The following figure shows the background and text colors of the data area changed from the default values with light blue text on a dark background.
![Cells with customized background and foreground colors](https://cdn.mescius.io/document-site-files/images/346c9178-0ed8-4fb9-908b-1565b22fb408/artwork/cellcolor.png)
To change the text and background colors, use the [BackColor](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.Cell.BackColor.html) and [ForeColor](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.Cell.ForeColor.html) properties of the [Cell](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.Cell.html) class or the [BackColor](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.StyleInfo.BackColor.html) and [ForeColor](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.StyleInfo.ForeColor.html) properties of the [StyleInfo](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.StyleInfo.html) class and apply the style to the cells. Alternatively, you can set the [CellBackColor](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.SheetSkin.CellBackColor.html) and [CellForeColor](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.SheetSkin.CellForeColor.html) properties of the [SheetSkin](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.SheetSkin.html) class and apply the skin to the sheet. For more information on styles for cells, refer to [Creating and Applying a Custom Style for Cells](/spreadnet/docs/latest/online-asp/overview/spweb-devguide/spweb-appearSet/spweb-appearCell/spweb-cellstyle). For more information on skins to apply to sheets, refer to [Creating a Skin for Sheets](/spreadnet/docs/latest/online-asp/overview/spweb-devguide/spweb-appearSet/spweb-appearSheet/spweb-SheetSkinCreate) and [Applying a Skin to a Sheet](/spreadnet/docs/latest/online-asp/overview/spweb-devguide/spweb-appearSet/spweb-appearSheet/spweb-SheetSkinApply).
You can also set the color for cells to change when they are selected. You can set the [SelectionBackColor](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.SheetSkin.SelectionBackColor.html) and [SelectionForeColor](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.SheetSkin.SelectionForeColor.html) to change the background color and text color of selected cells. This is done either to the sheet directly with the [SheetView](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.SheetView.html) class or with the skin that is applied to a sheet with the [SheetSkin](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.SheetSkin.html) class. For more information refer to [Customizing the Appearance of Selections](/spreadnet/docs/latest/online-asp/overview/spweb-devguide/spweb-interaction/spweb-interact-selection/spweb-selsetappear).
For information about cascading style sheets, refer to [Assigning a Cascading Style Sheet to a Cell](/spreadnet/docs/latest/online-asp/overview/spweb-devguide/spweb-appearSet/spweb-appearCell/spweb-appearCSS).

## Using the Properties Window

1. At design time, in the **Properties** window, select the FpSpread component.
2. Select the **Sheets** property.
3. Click the button to display the **SheetView Collection Editor**.
4. Select the **Cells** collection and then select **BackColor** under the **Misc.** section.
5. Click the **BackColor** drop-down button to display the color picker and choose the color from the available colors.
6. Click **OK**.
7. Click **Apply** and **OK** to apply the changes.

## Using a Shortcut

Set the [BackColor](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.AlternatingRow.BackColor.html) property or [ForeColor](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.AlternatingRow.ForeColor.html) property for the [FpSpread](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.FpSpread.html) [Cells](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.Cells.html) object.
**Example**
This example code sets the background color for cell A1 to Azure, then sets the background color for cells C3 through D4 to Bisque.

```csharp
FpSpread1.Sheets[0].RowCount = 4;
FpSpread1.Sheets[0].ColumnCount = 4;
FpSpread1.Sheets[0].Cells[0,0].BackColor = Color.Azure;
FpSpread1.Sheets[0].Cells[2,2,3,3].BackColor = Color.Bisque;
```

```vbnet
FpSpread1.Sheets(0).RowCount = 4
FpSpread1.Sheets(0).ColumnCount = 4
FpSpread1.Sheets(0).Cells(0, 0).BackColor = Color.Azure
FpSpread1.Sheets(0).Cells(2, 2, 3, 3).BackColor = Color.Bisque
```

## Using Code

Set the [BackColor](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.Cell.BackColor.html) property or [ForeColor](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.Cell.ForeColor.html) property for a [Cell](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.Cell.html) object.
**Example**
This example code sets the background color for cell A1 to Azure and the foreground color to Navy, then sets the background color for cells C3 through D4 to Bisque.

```csharp
FarPoint.Web.Spread.SheetView count;
count = FpSpread1.Sheets[0];
count.RowCount = 4;
count.ColumnCount = 4;
FarPoint.Web.Spread.Cell cellA1;
cellA1 = FpSpread1.Cells[0, 0];
cellA1.BackColor = Color.Azure;
cellA1.ForeColor = Color.Navy;
FarPoint.Web.Spread.Cell cellrange;
cellrange = FpSpread1.Cells[2,2,3,3];
cellrange.BackColor = Color.Bisque;
```

```vbnet
Dim count as FarPoint.Web.Spread.SheetView
count = FpSpread1.Sheets(0)
count.RowCount = 4
count.ColumnCount = 4
Dim cellA1 As FarPoint.Web.Spread.Cell
cellA1 = FpSpread1.Cells(0, 0)
cellA1.BackColor = Color.Azure
cellA1.ForeColor = Color.Navy
Dim cellrange As FarPoint.Web.Spread.Cell
cellrange = FpSpread1.Cells(2, 2, 3, 3)
cellrange.BackColor = Color.Bisque
```

## Using the Spread Designer

1. Select the cells to apply the changes to.
2. Select the **Home** menu and then select the **Fill Color** icon under the **Font** section.
    You can also select the **Settings** menu and then select the **Cells, Columns, and Rows** icon under the **Other Settings** section.
3. Click the **BackColor** drop-down button to display the color picker and choose the color from the available colors.
4. Click **OK** to apply the changes.
5. From the **File** menu choose **Apply and Exit** to apply your changes to the component and exit Spread Designer.