# Darken Color

### What It Does

Makes a color darker by reducing its lightness by a specified amount. It's perfect for creating shades of a base color or generating darker variants for hover states and hierarchical elements.

### Inputs

| Name  | Description                        | Type   | Required |
| ----- | ---------------------------------- | ------ | -------- |
| color | The color to darken                | Color  | No       |
| value | How much to darken the color (0-1) | Number | No       |

### Outputs

| Name  | Description        | Type  |
| ----- | ------------------ | ----- |
| value | The darkened color | Color |

<figure><img src="https://3657049418-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy0SFXZjN1sdgdxYM7QPE%2Fuploads%2FAbx7kYnm9bPyHlldGKNo%2FCleanShot%202025-03-20%20at%2016.02.26%402x.png?alt=media&#x26;token=d3035e04-487e-48b7-b4c1-4c887701f985" alt=""><figcaption></figcaption></figure>

### How to Use It

1. Drag the Darken Color node into your graph.
2. Connect a color (like `#5C9AFF`) to the "color" input.
3. Set a value between 0 and 1 (like `0.3`) to the "value" input.
4. Run the graph—your output will be a darker version of the input color (`#1d59b8`).

<figure><img src="https://3657049418-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy0SFXZjN1sdgdxYM7QPE%2Fuploads%2FVOyrvdcdjSkpTKAsgq7b%2FCleanShot%202025-03-20%20at%2016.05.25%402x.png?alt=media&#x26;token=c0ecee62-c221-4b3b-80b8-9c3c8e4f8ec0" alt=""><figcaption></figcaption></figure>

### Tips

* A value of 0 makes no change, while 1 produces black.
* Use small increments (0.1-0.3) for subtle darkening effects in UI states.

### See Also

* [**Lighten Color**](https://documentation.tokens.studio/graph-engine/available-nodes/color/lighten): For making colors lighter instead of darker.
* [**Mix Colors**](https://documentation.tokens.studio/graph-engine/available-nodes/color/mix): For blending a color with black for more control.

### Use Cases

* **Button States**: Create darker variants of a button color for hover and active states.
* **Color Scales**: Generate a range of related dark shades from a base color.
* **Background Hierarchy**: Create darker backgrounds for elevated or nested UI elements.