alpha

alpha(color, value) returns a new color with its alpha channel set to value, a number in the [0, 1] range. Re-exported from the color-bits string entry, so it takes any CSS color string the parser accepts and returns a #RRGGBBAA hex string.

Arguments

Name	Type	Description
color	string	Any parseable CSS color string.
value	number	New alpha in the [0, 1] range (0 clear, 1 solid).

Returns: string — a #RRGGBBAA hex string.

Examples

Fade a swatch

Renders the same color at a few alpha levels over a checkerboard so the transparency is visible.

import { render } from 'pota'
import { alpha } from 'pota/use/color'

function App() {
	const levels = [1, 0.66, 0.33, 0.1]

	return (
		<div
			style={{
				display: 'flex',
				background:
					'repeating-conic-gradient(#ccc 0 25%, #fff 0 50%) 0 0 / 20px 20px',
			}}
		>
			{levels.map(value => (
				<div
					style={{
						'background-color': alpha('#ff0080', value),
						width: '3rem',
						height: '3rem',
					}}
				/>
			))}
		</div>
	)
}

render(App)