Colors

This tool helps to create color palettes including shades, based on the hex colors you provide. For each hex color you add, its base shade is calculated, and the rest of the shades are generated based on their relative lightness.

Name	Hex		Shade		R	G	B		H	S	L		{{ sl.shade }}
		{{ color.hex }}	{{ getShadeByLightness($chroma(color.hex).get('hsl.l')) }}		{{ $chroma(color.hex).get('rgb.r') }}	{{ $chroma(color.hex).get('rgb.g') }}	{{ $chroma(color.hex).get('rgb.b') }}		{{ round($chroma(color.hex).get('hsl.h'), 2) }}	{{ round($chroma(color.hex).get('hsl.s'), 2) }}	{{ round($chroma(color.hex).get('hsl.l'), 2) }}		{{ getShadeHex($chroma(color.hex).hex(), getShadeByLightness($chroma(color.hex).get('hsl.l')), sl.shade) }}

$color-{{ color.id }}: {{ color.hex }};
$color-{{ color.id }}-{{ sl.shade }}: {{ getShadeHex($chroma(color.hex).hex(), getShadeByLightness($chroma(color.hex).get('hsl.l')), sl.shade) }};

'{{ color.id }}': '{{ color.hex }}',
'{{ color.id }}-{{ sl.shade }}': '{{ getShadeHex($chroma(color.hex).hex(), getShadeByLightness($chroma(color.hex).get('hsl.l')), sl.shade) }}',