Lighten Color
What It Does
Makes a color lighter by increasing its lightness by a specified amount. This is useful for creating tints of a base color or generating lighter variants for disabled states and background elements.
Inputs
| Name | Description | Type | Required |
|---|---|---|---|
| color | The color to lighten | Color | No |
| value | How much to lighten the color (0-1) | Number | No |
Outputs
| Name | Description | Type |
|---|---|---|
| value | The lightened color | Color |
How to Use It
- Drag the Lighten Color node into your graph.
- Connect a color (like
#1D1CEE) to the "color" input. - Set a value between 0 and 1 (like
0.4) to the "value" input. - Run the graph—your output will be a lighter version of the input color (
#77A0FF).
Tips
- A value of 0 makes no change, while 1 produces white.
- Dark colors can be lightened more before losing their character than light colors.
See Also
- Darken Color: For making colors darker instead of lighter.
- Mix Colors: For blending a color with white for more control.
Use Cases
- Disabled States: Create lighter variants of interface elements to indicate disabled status.
- Background Variations: Generate lighter background colors that complement your main palette.
- Tint Series: Create a progression of increasingly lighter tints from a base brand color.