/** * ----------------------------------------------------------------------------- * @package smartVISU * @author Martin Gleiß and Stefan Widmer * @copyright 2012 - 2016 * @license GPL [http://www.gnu.de] * ----------------------------------------------------------------------------- */ {% extends "widget_basic.html" %} {% block example %}
Examples
Circular view
{% filter trim|escape|nl2br %}{% verbatim %} {{ basic.color('', 'bath.color.r', 'bath.color.g', 'bath.color.b') }} {{ basic.color('', 'bath.color.r', 'bath.color.g', 'bath.color.b', '', '', 6, 8) }} {{ basic.color('', 'bath.color.r', 'bath.color.g', 'bath.color.b', 0, 255, 15, 19) }} {% endverbatim %}{% endfilter %}
{{ basic.color('', 'bath.color.r', 'bath.color.g', 'bath.color.b') }} 7 steps and 10 colors (default) {{ basic.color('', 'bath.color.r', 'bath.color.g', 'bath.color.b', '', '', 6, 8) }} 6 steps and 8 colors {{ basic.color('', 'bath.color.r', 'bath.color.g', 'bath.color.b', 0, 255, 15, 19) }} 15 steps and 19 colors
Rectangular view
{% filter trim|escape|nl2br %}{% verbatim %} {{ basic.color('', 'bath.color.r', 'bath.color.g', 'bath.color.b', '', '', '', '', 'rect') }} {{ basic.color('', 'bath.color.r', 'bath.color.g', 'bath.color.b', '', '', 6, 8, 'rect') }} {% endverbatim %}{% endfilter %}
{{ basic.color('', 'bath.color.r', 'bath.color.g', 'bath.color.b', '', '', '', '', 'rect') }} 7 steps and 10 colors (default) {{ basic.color('', 'bath.color.r', 'bath.color.g', 'bath.color.b', '', '', 6, 8, 'rect') }} 6 steps and 8 colors
Slider view (the sliders show hue, saturation and brightness)
{% filter trim|escape|nl2br %}{% verbatim %} {{ basic.color('', 'bath.color.r', 'bath.color.g', 'bath.color.b', '', '', '', '', 'slider') }} {% endverbatim %}{% endfilter %}
{{ basic.color('', 'bath.color.r', 'bath.color.g', 'bath.color.b', '', '', '', '', 'slider') }}
HSL and HSV color space
{% filter trim|escape|nl2br %}{% verbatim %} {{ basic.color('', 'bath.color.h', 'bath.color.s', 'bath.color.l', '', '', '', '', 'rect', 'hsl') }} {{ basic.color('', 'bath.color.h', 'bath.color.s', 'bath.color.v', '', '', '', '', '', 'hsv') }} {% endverbatim %}{% endfilter %}
{{ basic.color('', 'bath.color.h', 'bath.color.s', 'bath.color.l', '', '', '', '', 'rect', 'hsl') }} {{ basic.color('', 'bath.color.h', 'bath.color.s', 'bath.color.v', '', '', '', '', '', 'hsv') }}
Values as list in a single item
{% filter trim|escape|nl2br %}{% verbatim %} {{ basic.color('', 'bath.color.rgb') }} {% endverbatim %}{% endfilter %}
{{ basic.color('', 'bath.color.rgb') }}
{% endblock %} /** background-image: linear-gradient(90deg, hsl(0,100%,100%), hsl(60,100%,100%), hsl(120,100%,100%), hsl(180,100%,100%), hsl(240,100%,100%), hsl(300,100%,100%), hsl(360,100%,100%)); Saturation: background-image: linear-gradient(90deg, hsl(26,0%,68%), hsl(26,100%,34%)); // 0,L1 0,L1/2 L1 = L+S/2*(1-|2*L-1|) Lightness; background-image: linear-gradient(90deg, hsl(26,0%,0%), hsl(26,100%,58%)); // 0,0 100,L/L1 L1 = L+S/2*(1-|2*L-1|) background-image: linear-gradient(90deg, hsl(26,40%,0%), hsl(26,40%,50%)); background-image: linear-gradient(90deg, rgb(0,150,150), rgb(255,150,150)); background-image: linear-gradient(90deg, rgb(0,150,150), rgb(255,150,150)); background-image: linear-gradient(90deg, rgb(150,150,150), rgb(150,150,0)); background-image: linear-gradient(90deg, rgb(0,0,0), rgb(255,255,127.5)); background-image: linear-gradient(90deg, rgb(255, 0, 0), rgb(255, 255, 0), rgb(0, 255, 0), rgb(0, 255, 255), rgb(0, 0, 255), rgb(255, 0, 255), rgb(255, 0, 0) ) TW: background-image: linear-gradient(90deg, rgba(255, 255, 255, 1), rgb(255, 204, 0)) background-image: linear-gradient(90deg, rgba(204, 238, 255, 1), rgb(255, 204, 0)); B'/(1-|2L-1|) (L+S/2*(1-|2L-1|))/(1-|2L-1|) S/2-L/(|1-2L|-1) 1/2B'*(2-S') B'=100 .5*(2-S') B'=100 S' = L+S(1-|2*L-1|)/2 50*(2-L+S*(1-|2*L-1|)/2) Saturation: Lx = L + (S*(1-|2*L-1|))/2 from: Sa=0, La=? Lsa = L + (S*(1-|2*L-1|))/2 to: sb=1, Lb=? Lsb = La/2 Lightness; Lx = 1/2*B*(2-S') S' = 2(Bx-L)/Bx Bx = Lsa Lx = 1/2*B*(2-2(Bx-L)/Bx) Lx = B*L/Bx = B*L/Lsa from Sla=0, Lla=0 to: slb=1, Llb=?, Bb=1 Llb = L/Lsa */