darken

darken(color, value) returns a darker version of color, where value is 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. See lighten for the inverse.

Arguments

Name	Type	Description
color	string	Any parseable CSS color string.
value	number	How much to darken, in the [0, 1] range (0 no-op).

Returns: string — a #RRGGBBAA hex string.

Examples

Darkness ramp

Renders the same color darkened by increasing amounts so the progression is visible side by side.

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

function App() {
	const amounts = [0, 0.15, 0.3, 0.45]

	return (
		<div style={{ display: 'flex' }}>
			{amounts.map(amount => (
				<div
					style={{
						'background-color': darken('#ff0080', amount),
						width: '3rem',
						height: '3rem',
					}}
				/>
			))}
		</div>
	)
}

render(App)