Theme
/ API Reference / Color Manipulation
Theme
/ API Reference / Color Manipulation

opacify

A small utility function that increases the alpha (opacity) of a CSS color value by a relative amount.
It uses the hsl color model to do so.

The Gist

import { opacify } from '@weser/theme'

const moreOpaque = opacify('rgba(255, 0, 0, 0.5)', 0.2)
const opacifiedVariable = opacify('var(--background)', 0.3)

Parameters

ParameterTypeDescription
valuestringThe CSS color value to increase the alpha.
amount0-1The relative amount to increase the alpha.

Returns

(string) A string that references a CSS color value with the alpha increased.

On this page