}
sub disphues {
- my ($index, $hues) = @_;
+ my ($index, $hues, $opaque) = @_;
my @lum = ($index % 3, $index / 3 % 3, $index / 9); # hue opacities (0..2)x3
- my @lumf = ('hsl(%s,100%%,50%%)', 'hsl(%s,100%%,25%%)');
+ my @lumf = $opaque ? ('hsl(%s,100%%,50%%)', 'hsl(%s,100%%,25%%)') :
+ ('hsl(%s,100%%,50%%)', 'hsla(%s,100%%,50%%,.5)');
return sprintf(
'<svg width="16" height="16" viewBox="0 0 22 22">%s</svg>',
join '', map {
style => [
'svg { isolation: isolate }',
'svg circle { mix-blend-mode: screen }',
+ '.sample { background: black }',
+ ],
+ list => [
+ map { disphues($_, [0, 240, 120], 1) } # Red, Blue, Green
+ 0 .. 3*3*3 - 1
+ ],
+},
+cmymap => {
+ title => 'CMYmap',
+ style => [
+ 'svg { isolation: isolate }', # mix on white
+ 'svg circle { mix-blend-mode: multiply }',
+ '.sample { background: white }',
+ ],
+ list => [
+ map { disphues($_, [180, 60, 300]) } # Cyan, Yellow, Magenta
+ 0 .. 3*3*3 - 1
],
- list => [ map { disphues($_, [0, 240, 120]) } 0 .. 3*3*3 ], # Red, Blue, Green
},
dni => {
title => "D'ni",