Difference between revisions of "S2 Cookbook: Colors"

From Dreamwidth Notes
Jump to: navigation, search
 
Line 74: Line 74:
  
 
== Getting a lighter or darker version of a color ==
 
== Getting a lighter or darker version of a color ==
 +
 +
Use the <code>lighter</code> and <code>darker</code> functions of the Color class:
 +
 +
<syntaxhighlight lang="s2">
 +
"""<pre>""";
 +
 +
var Color dark_blue = "#111A91";
 +
# prints #111a91
 +
print $dark_blue + "\n";
 +
 +
var Color lighter_blue = $dark_blue->lighter();
 +
# prints #1824c6
 +
print $lighter_blue + "\n";
 +
 +
var Color even_lighter_blue = $dark_blue->lighter(60);
 +
# print #3340e7
 +
print $even_lighter_blue + "\n";
 +
 +
var Color light_blue = "#6F93E7";
 +
# prints #6f93e7
 +
print $light_blue + "\n";
 +
 +
var Color darker_blue = $light_blue->darker();
 +
# prints #3c6dde
 +
print $darker_blue + "\n";
 +
 +
var Color even_darker_blue = $light_blue->darker(60);
 +
# prints #2050be
 +
print $even_darker_blue + "\n";
 +
 +
"""</pre>""";
 +
</syntaxhighlight>
  
 
== Getting the inverse of a color ==
 
== Getting the inverse of a color ==
 +
 +
Use the <code>inverse</code> function of the Color class:
 +
 +
<syntaxhighlight lang="s2">
 +
"""<pre>""";
 +
 +
var Color dark_blue = "#111A91";
 +
# prints #111a91
 +
print $dark_blue + "\n";
 +
 +
var Color inverse_blue = $dark_blue->inverse();
 +
# prints #eee56e
 +
print $inverse_blue + "\n";
 +
 +
"""</pre>""";
 +
</syntaxhighlight>
 +
 +
== Getting a color's values ==
 +
 +
There are functions to access both RGB and HSL values:
 +
 +
<syntaxhighlight lang="s2">
 +
"""<pre>""";
 +
 +
var Color dark_blue = "#111A91";
 +
# prints "#111a91"
 +
print $dark_blue + "\n";
 +
 +
# prints "R: 17 G: 26 B: 145"
 +
print "R: " + $dark_blue->red() +
 +
      " G: " + $dark_blue->green() +
 +
      " B: " + $dark_blue->blue() + "\n";
 +
 +
# prints "H: 167 S: 201 L: 81"
 +
print "H: " + $dark_blue->hue() +
 +
      " S: " + $dark_blue->saturation() +
 +
      " L: " + $dark_blue->lightness() + "\n";
 +
 +
"""</pre>""";
 +
</syntaxhighlight>
  
 
== Altering a color's values ==
 
== Altering a color's values ==
 +
 +
You can alter a color's RGB values, too:
 +
 +
<syntaxhighlight lang="s2">
 +
"""<pre>""";
 +
 +
var Color dark_blue = "#111A91";
 +
# prints "#111a91"
 +
print $dark_blue + "\n";
 +
 +
# prints "#281a91"
 +
$dark_blue->red(40);
 +
print $dark_blue + "\n";
 +
 +
# prints "#28b491"
 +
$dark_blue->green(180);
 +
print $dark_blue + "\n";
 +
 +
# prints "#28b4c8"
 +
$dark_blue->blue(200);
 +
print $dark_blue + "\n";
 +
 +
# setting hue, saturation, lightness seem to be broken currently?
 +
 +
"""</pre>""";
 +
</syntaxhighlight>
  
 
[[Category: S2 Cookbook]]
 
[[Category: S2 Cookbook]]

Latest revision as of 20:35, 10 August 2010

To work with colors we use the Color class. With it, you can work with RGB or HSL values.

Creating a color from a hex string

You can create a new Color variable from a valid hex string just by assigning the string to the variable. If the string isn't a valid color, the resulting variable will be undefined. 

"""<pre>""";
 
var Color white = "#FFF";
# prints "#ffffff"
print $white + "\n";
$white = "#000000";
print $white + "\n";
 
# $invalid will end up undefined
var Color invalid = "none";
# prints nothing
print $invalid;
 
# prints "Not defined!"
if ( not defined $invalid ) {
   print "Not defined!\n";
}
 
"""</pre>""";

Making a copy of a color

Getting the hex string from a color

Unlike most objects, you can assign directly between strings and Color objects. You can use a Color class' member variable as_string. 

"""<pre>""";
 
var Color white = "#FFF";
var string background = $white;
 
# prints "#ffffff"
print $background + "\n";
 
$background = $white.as_string;
# prints "#ffffff"
print $background + "\n";
 
"""</pre>""";

Blending two colors together

If you want a straight up average between two colors: 

var Color white = "#FFF";
var Color black = "#000";
var Color mix = $white->average($black);
 
# prints "#808080"
print $mix;

If you want to blend one color with another at a certain percentage/weight: 

var Color white = "#FFF";
var Color black = "#000";
# 75% black, 25% white
var Color mix = $white->blend($black, 75);
 
# prints "#404040"
print $mix;

Getting a lighter or darker version of a color

Use the lighter and darker functions of the Color class: 

"""<pre>""";
 
var Color dark_blue = "#111A91";
# prints #111a91
print $dark_blue + "\n";
 
var Color lighter_blue = $dark_blue->lighter();
# prints #1824c6
print $lighter_blue + "\n";
 
var Color even_lighter_blue = $dark_blue->lighter(60);
# print #3340e7
print $even_lighter_blue + "\n";
 
var Color light_blue = "#6F93E7";
# prints #6f93e7
print $light_blue + "\n";
 
var Color darker_blue = $light_blue->darker();
# prints #3c6dde
print $darker_blue + "\n";
 
var Color even_darker_blue = $light_blue->darker(60);
# prints #2050be
print $even_darker_blue + "\n";
 
"""</pre>""";

Getting the inverse of a color

Use the inverse function of the Color class: 

"""<pre>""";
 
var Color dark_blue = "#111A91";
# prints #111a91
print $dark_blue + "\n";
 
var Color inverse_blue = $dark_blue->inverse();
# prints #eee56e
print $inverse_blue + "\n";
 
"""</pre>""";

Getting a color's values

There are functions to access both RGB and HSL values: 

"""<pre>""";
 
var Color dark_blue = "#111A91";
# prints "#111a91"
print $dark_blue + "\n";
 
# prints "R: 17 G: 26 B: 145"
print "R: " + $dark_blue->red() +
      " G: " + $dark_blue->green() +
      " B: " + $dark_blue->blue() + "\n";
 
# prints "H: 167 S: 201 L: 81"
print "H: " + $dark_blue->hue() +
      " S: " + $dark_blue->saturation() +
      " L: " + $dark_blue->lightness() + "\n";
 
"""</pre>""";

Altering a color's values

You can alter a color's RGB values, too: 

"""<pre>""";
 
var Color dark_blue = "#111A91";
# prints "#111a91"
print $dark_blue + "\n";
 
# prints "#281a91"
$dark_blue->red(40);
print $dark_blue + "\n";
 
# prints "#28b491"
$dark_blue->green(180);
print $dark_blue + "\n";
 
# prints "#28b4c8"
$dark_blue->blue(200);
print $dark_blue + "\n";
 
# setting hue, saturation, lightness seem to be broken currently?

"""</pre>""";
Retrieved from "http://wiki.dreamwidth.net/wiki/index.php?title=S2_Cookbook:_Colors&oldid=8921"