How to use @csstools/convert-colors - 10 common examples

To help you get started, we’ve selected a few @csstools/convert-colors examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github jonathantneal / postcss-color-mod-function / lib / color.js View on Github external
channel => {
			// detect channel
			const isHue = channel === 'hue';
			const isRGB = !isHue && blueGreenRedMatch.test(channel);

			// normalized value of the channel
			const value = normalize(channels[channel], channel);

			// assign channel to new object
			color[channel] = value;

			if (isRGB) {
				// conditionally preserve the hue
				color.hue = rgb2hue(color.red, color.green, color.blue, base.hue || 0);
			}
		}
	);
github postcss / postcss-color-gray / index.js View on Github external
ast.walk(node => {
				const [lightness, alpha] = getFunctionGrayArgs(node);

				if (lightness !== undefined) {
					// rename the gray() function to rgb()
					node.value = 'rgb';

					// convert the lab gray lightness into rgb
					const [r, g, b] = lab2rgb(lightness, 0, 0).map(
						channel => Math.max(Math.min(Math.round(channel * 2.55), 255), 0)
					);

					// preserve the slash nodes within rgb()
					const openingSlash = node.first;
					const closingSlash = node.last;

					node.removeAll()
					// replace the contents of rgb with `(r,g,b`
					.append(openingSlash)
					.append(parser.number({ value: r }))
					.append(parser.comma({ value: ',' }))
					.append(parser.number({ value: g }))
					.append(parser.comma({ value: ',' }))
					.append(parser.number({ value: b }))
github jonathantneal / postcss-color-mod-function / lib / color.js View on Github external
function color2hsl(color) {
	const [ hue, saturation, lightness ] = color.colorspace === 'rgb'
		? rgb2hsl(color.red, color.green, color.blue, color.hue)
	: color.colorspace === 'hwb'
		? hwb2hsl(color.hue, color.whiteness, color.blackness)
	: [ color.hue, color.saturation, color.lightness ];

	return { hue, saturation, lightness, alpha: color.alpha, colorspace: 'hsl' };
}
github jonathantneal / postcss-color-mod-function / lib / color.js View on Github external
function color2hsl(color) {
	const [ hue, saturation, lightness ] = color.colorspace === 'rgb'
		? rgb2hsl(color.red, color.green, color.blue, color.hue)
	: color.colorspace === 'hwb'
		? hwb2hsl(color.hue, color.whiteness, color.blackness)
	: [ color.hue, color.saturation, color.lightness ];

	return { hue, saturation, lightness, alpha: color.alpha, colorspace: 'hsl' };
}
github jonathantneal / postcss-color-mod-function / lib / color.js View on Github external
constructor(color) {
		this.color = Object(Object(color).color || color);

		this.color.colorspace = this.color.colorspace
			? this.color.colorspace
		: 'red' in color && 'green' in color && 'blue' in color
			? 'rgb'
		: 'hue' in color && 'saturation' in color && 'lightness' in color
			? 'hsl'
		: 'hue' in color && 'whiteness' in color && 'blackness' in color
			? 'hwb'
		: 'unknown';

		if (color.colorspace === 'rgb') {
			this.color.hue = rgb2hue(color.red, color.green, color.blue, color.hue || 0);
		}
	}
github jonathantneal / postcss-color-mod-function / lib / color.js View on Github external
function color2hwb(color) {
	const [ hue, whiteness, blackness ] = color.colorspace === 'rgb'
		? rgb2hwb(color.red, color.green, color.blue, color.hue)
	: color.colorspace === 'hsl'
		? hsl2hwb(color.hue, color.saturation, color.lightness)
	: [ color.hue, color.whiteness, color.blackness ];

	return { hue, whiteness, blackness, alpha: color.alpha, colorspace: 'hwb' };
}