Play With Colors!

Unmaintained Play With Colors! 1.0.5

No permission to download
Overview FAQ Updates (5) History Discussion
How to use this color helper?

The basics
This helper is meant to be used inside the XenForo templates.
The minimum command is this one:

HTML: 
{xen:helper playwithcolors, 'yourColor'}

Replace 'yourColor' by any hexa, rgb, rgba color or even its name (the name will be internally converted to hexa using a XenForo function).
Example: red - rgb(255, 0, 0, ) - rgba(255, 0, 0, 1) - #ff0000.

This simple command will return an array with the following keys:
  • _hex: the hexa without "#"
  • _red: the red channel
  • _green: the green channel
  • _blue: the blue channel
  • _hue: the hue value
  • _staturation: the saturation value
  • _lightness: the lightness value
  • _alpha: the alpha channel
  • isLight: if the color is a light one
  • isDark: if the color is a dark one
  • hex: the hexa string ready to use
  • rgb: the rgb string ready to use
  • rgba: the rgba string ready to use
  • hsl: the hsl string ready to use
  • hsla: the hsla string ready to use
  • argb: the arbg string ready to use
As getting an array is not convenient, if you only need one key, just specify a second parameter for this helper which will be the "helper command". Example:
HTML: 
{xen:helper playwithcolors, 'yourColor', 'rgba'}


Where the fun begins: modify any color settings
The color settings are the keys starting with a '_' (except _hexa); in other words:
  • _red: the red channel
  • _green: the green channel
  • _blue: the blue channel
  • _hue: the hue value
  • _staturation: the saturation value
  • _lightness: the lightness value
  • _alpha: the alpha channel
The command name to modify the color settings is 'modify'. You will have to use then a third parameter for the helper. It will be used to enter any options.

HTML: 
{xen:helper playwithcolors, 'yourColor', 'modify', 'modificationsToDo'};

Let's see now how to use this third parameter. Every modifications must be separated with a ";". Each modification must start with the color setting name without "_"), then comes this symbol ":" to set a new value or to increase/decrease the actual value. An example will be easier:

HTML: 
{xen:helper playwithcolors, 'yourColor', 'modify', 'red:+5;  green:-7 ;blue:123;'};

In this example, your color will be modified this way:
  1. It's red channel will be increased of 5 points
  2. It's green channel will be decrease of 7 points
  3. And the blue channel will have a new value: 123
Please note that the above code will outpout the same big array than the one described above. If you want to get only one output, do like this:
HTML: 
{xen:helper playwithcolors, 'yourColor', 'modify', 'red:+5;  green:-7 ;blue:123; hex'};
This will output the hex string ready to use. The possible outputs are: _hex, hex, rgb, rgba, hsl, hsla, and argb.


Where the fun continues: get pre-formatted gradients

Now you understand how the helper works, no need to go in further details. To get pre-formatted gradients, use the command 'gradient'. You will have tow ways of doing it:
  1. With a single color and a value to darken or lighten the color (the darken/lighten will be automatically done)
    Code: 
    {xen:helper playwithcolors, '@primaryDark', 'gradient', '20'}
    singlecolor-png.58457



  2. With two colors
    Code: 
    {xen:helper playwithcolors, '@primaryDark', 'gradient', '@primaryLight'}
    dualcolors-png.58456


A quick view of the "calc" command

Edit: The cacl command is still there but now with the commands from "Less CSS" script, it's not needed anymore. I keep it for reference.

For this paragraph, I'm going to use a screenshot and the source code which allows to get that screenshot.

Screenshot:
calc-command-png.58477


Template code:
HTML: 
<h2><b>Examples</b></h2>
   <div style="padding:15px">
     <p>For each example, the first line will be the addition of the two colors hexa, which explains why the result can be black</p>
     <p>The second line wille be medium color between the two given</p>
   </div>

<xen:set var="$uglyCss">display:inline-block;width:200px;height:70px;border:1px solid grey; padding:1px</xen:set>

<p> Example 1:</p>

  <xen:set var="$firstColor">#FF0000</xen:set>
  <xen:set var="$secondColor">#00FF00</xen:set>
  <xen:set var="$newColor.1">{xen:helper playwithcolors, '{$firstColor}', 'calc', '{$secondColor}'}</xen:set>
  <xen:set var="$newColor.2">{xen:helper playwithcolors, '{$firstColor}', 'calc', '|{$secondColor}'}</xen:set>

  <xen:foreach loop="$newColor" value="$color" i="$i">
   <p>
     <div style="{$uglyCss}; background-color:{$firstColor}">First color:{$firstColor}</div>
     <div style="{$uglyCss}; background-color:{$secondColor}">Second color:{$secondColor}</div>
     <div style="{$uglyCss}; background-color:{$color}">New color ({$i}):{$color}</div>
   </p>
   <br />
  </xen:foreach>

<p> Example 2:</p>
  <xen:set var="$xenColor.1">{xen:helper playwithcolors, '@primaryLighterStill', 'calc', '@primaryLightest', 'rgb'}</xen:set>
  <xen:set var="$xenColor.2">{xen:helper playwithcolors, '@primaryLighterStill', 'calc', '|@primaryLightest', 'rgb'}</xen:set>


  <xen:foreach loop="$xenColor" value="$color" i="$i">
   <p>
     <div style="{$uglyCss}; background-color:@primaryLighterStill">First color:@primaryLighterStill</div>
     <div style="{$uglyCss}; background-color:@primaryLightest">Second color:@primaryLightest</div>
     <div style="
       {$uglyCss};
       background-color:{$color};
       {xen:if '{xen:helper playwithcolors, '{$color}', '_lightness'} < 0.5 ', 'color:white', 'color:black'}
       ">New color ({$i}):{$color}</div>
   </p>
   <br />
  </xen:foreach>


A quick view of all other commands

less-png.58558


HTML: 
<xen:set var="$eCss">width:100px;height:100px</xen:set>

<div style="width:80%;padding:20px">
   <div style="float:left">
     <p>MULTIPLY</p>
     <div style="{$eCss};background-color:{xen:helper playwithcolors, '@primaryMedium', 'multiply', '@primaryLighterStill', 'hex'}"></div>
   </div>
   <div style="float:left">
     <p>SCREEN</p>
     <div style="{$eCss};background-color:{xen:helper playwithcolors, '@primaryMedium', 'screen', '@primaryLighterStill'}"></div>
   </div>
   <div style="float:left">
     <p>OVERLAY</p>
     <div style="{$eCss};background-color:{xen:helper playwithcolors, '@primaryMedium', 'overlay', '@primaryLighterStill'}"></div>
   </div>
   <div style="float:left">
     <p>SOFTLIGHT</p>
     <div style="{$eCss};background-color:{xen:helper playwithcolors, '@primaryMedium', 'softlight', '@primaryLighterStill'}"></div>
   </div>
   <div style="float:left">
     <p>HARDLIGHT</p>
     <div style="{$eCss};background-color:{xen:helper playwithcolors, '@primaryMedium', 'hardlight', '@primaryLighterStill'}"></div>
   </div>
   <div style="float:left">
     <p>DIFFERENCE</p>
     <div style="{$eCss};background-color:{xen:helper playwithcolors, '@primaryMedium', 'difference', '@primaryLighterStill'}"></div>
   </div>
   <div style="float:left">
     <p>EXCLUSION</p>
     <div style="{$eCss};background-color:{xen:helper playwithcolors, '@primaryMedium', 'exclusion', '@primaryLighterStill'}"></div>
   </div>
   <div style="float:left">
     <p>AVERAGE</p>
     <div style="{$eCss};background-color:{xen:helper playwithcolors, '@primaryMedium', 'average', '@primaryLighterStill'}"></div>
   </div>
   <div style="clear: both;"></div>
   <div style="float:left">
     <p>MIX</p>
     <div style="{$eCss};background-color:{xen:helper playwithcolors, '@primaryMedium', 'mix', '@primaryLighterStill', '70', 'rgb'}"></div>
     <div style="{$eCss};background-color:{xen:helper playwithcolors, '@primaryMedium', 'mix', '@primaryLighterStill', '50', 'rgb'}"></div>
     <div style="{$eCss};background-color:{xen:helper playwithcolors, '@primaryMedium', 'mix', '@primaryLighterStill', '30', 'rgb'}"></div>
   </div>
   <div style="float:left">
     <p>TINT</p>
     <div style="{$eCss};background-color:{xen:helper playwithcolors, '@primaryMedium', 'tint', '70'}"></div>
     <div style="{$eCss};background-color:{xen:helper playwithcolors, '@primaryMedium', 'tint', '50'}"></div>
     <div style="{$eCss};background-color:{xen:helper playwithcolors, '@primaryMedium', 'tint', '30'}"></div>
   </div>
   <div style="float:left">
     <p>SHADE</p>
     <div style="{$eCss};background-color:{xen:helper playwithcolors, '@primaryMedium', 'shade', '70'}"></div>
     <div style="{$eCss};background-color:{xen:helper playwithcolors, '@primaryMedium', 'shade', '50'}"></div>
     <div style="{$eCss};background-color:{xen:helper playwithcolors, '@primaryMedium', 'shade', '30'}"></div>
   </div>
   <div style="float:left">
     <p>SATURATE</p>
     <div style="{$eCss};background-color:{xen:helper playwithcolors, '@primaryMedium', 'saturate', '70'}"></div>
     <div style="{$eCss};background-color:{xen:helper playwithcolors, '@primaryMedium', 'saturate', '50'}"></div>
     <div style="{$eCss};background-color:{xen:helper playwithcolors, '@primaryMedium', 'saturate', '30'}"></div>
   </div>
   <div style="float:left">
     <p>DESATURATE</p>
     <div style="{$eCss};background-color:{xen:helper playwithcolors, '@primaryMedium', 'desaturate', '70'}"></div>
     <div style="{$eCss};background-color:{xen:helper playwithcolors, '@primaryMedium', 'desaturate', '50'}"></div>
     <div style="{$eCss};background-color:{xen:helper playwithcolors, '@primaryMedium', 'desaturate', '30'}"></div>
   </div>
   <div style="float:left">
     <p>LIGHTEN</p>
     <div style="{$eCss};background-color:{xen:helper playwithcolors, '@primaryMedium', 'lighten', '70'}"></div>
     <div style="{$eCss};background-color:{xen:helper playwithcolors, '@primaryMedium', 'lighten', '50'}"></div>
     <div style="{$eCss};background-color:{xen:helper playwithcolors, '@primaryMedium', 'lighten', '30'}"></div>
   </div>
   <div style="float:left">
     <p>DARKEN</p>
     <div style="{$eCss};background-color:{xen:helper playwithcolors, '@primaryMedium', 'darken', '70'}"></div>
     <div style="{$eCss};background-color:{xen:helper playwithcolors, '@primaryMedium', 'darken', '50'}"></div>
     <div style="{$eCss};background-color:{xen:helper playwithcolors, '@primaryMedium', 'darken', '30'}"></div>
   </div>
   <div style="float:left">
     <p>FADE</p>
     <div style="{$eCss};background-color:{xen:helper playwithcolors, '@primaryMedium', 'fade', '70'}"></div>
     <div style="{$eCss};background-color:{xen:helper playwithcolors, '@primaryMedium', 'fade', '50'}"></div>
     <div style="{$eCss};background-color:{xen:helper playwithcolors, '@primaryMedium', 'fade', '30'}"></div>
   </div>
   <div style="float:left">
     <p>FADEIN</p>
     <div style="{$eCss};background-color:{xen:helper playwithcolors, '@primaryMedium', 'fadein', '70'}"></div>
     <div style="{$eCss};background-color:{xen:helper playwithcolors, '@primaryMedium', 'fadein', '50'}"></div>
     <div style="{$eCss};background-color:{xen:helper playwithcolors, '@primaryMedium', 'fadein', '30'}"></div>
   </div>
   <div style="float:left">
     <p>FADEOUT</p>
     <div style="{$eCss};background-color:{xen:helper playwithcolors, '@primaryMedium', 'fadeout', '70'}"></div>
     <div style="{$eCss};background-color:{xen:helper playwithcolors, '@primaryMedium', 'fadeout', '50'}"></div>
     <div style="{$eCss};background-color:{xen:helper playwithcolors, '@primaryMedium', 'fadeout', '30'}"></div>
   </div>
   <div style="float:left">
     <p>SPIN</p>
     <div style="{$eCss};background-color:{xen:helper playwithcolors, '@primaryMedium', 'spin', '70'}"></div>
     <div style="{$eCss};background-color:{xen:helper playwithcolors, '@primaryMedium', 'spin', '50'}"></div>
     <div style="{$eCss};background-color:{xen:helper playwithcolors, '@primaryMedium', 'spin', '30'}"></div>
   </div>
</div>
<div style="clear: both;"></div>
<br />
Top Bottom