Difference between revisions of "Color and Scripting"

From Second Life Wiki
Jump to: navigation, search
(two colors, gray and brown, added to table)
m (Replaced old <LSL> block with <source lang="lsl2">)
 
(6 intermediate revisions by one other user not shown)
Line 1: Line 1:
 
{{#vardefine:ml-cat|/LSL}}{{Help|Misc=*}}
 
{{#vardefine:ml-cat|/LSL}}{{Help|Misc=*}}
 
{{LSL Header}}
 
{{LSL Header}}
Using color in SL scripting is fairly easy. If works by combining values of red, green, and blue light. They are stored like this:
+
Using color in LSL scripting is fairly easy. If works by combining values of red, green, and blue light. They are stored like this:
  
< Red Value, Green Value, Blue Value >
+
<source lang="lsl2">
 +
float red_value;
 +
float green_value;
 +
float blue_value;
  
Each red, green, or blue value can be between 0.0 (no color saturation) to 1.0 (total color saturation). These values are determined by combining the colors as if they were light, not paint. Therefore, the combination of all three in total saturation is white:
+
vector color = <red_value, green_value, blue_value>;
  
The combination of all three with no saturation is black:
+
//  or:
 +
//        color.x = red_value;
 +
//        color.y = green_value;
 +
//        color.z = blue_value;
 +
</source>
  
If there is not saturation on two values, and the third is saturated, you get a pure color:
+
Each red, green, or blue value can be between 0.0 (no color saturation) to 1.0 (total color saturation). These values are determined by combining the colors as if they were light, not paint. Therefore, the combination of all three in total saturation is white. The combination of all three with no saturation is pitch black. If there is not saturation on two values, and the third is saturated, you get a pure color.
  
{|class="wikitable" style="color:#fff;text-align:center;border: 1px solid #999; background: #111; " border="1"
+
{{{!}} class="sortable" {{Prettytable}}
|-
+
{{!}}- {{Hl2}}
! Color !! Hexadecimal for CSS/HTML !! Vector for Second Life
+
! Color
|- style="background:#f00;color:#000"
+
! Hexadecimal code
! Red
+
! LSL color representations
| #ff0000
+
{{!}}-
|<1.0, 0.0, 0.0>
+
{{!}} style="color: white; background: #001f3f" {{!}}NAVY
|- style="background:#0f0;color:#000"
+
{{!}} #001f3f
! Green
+
{{!}}<code><0.000, 0.122, 0.247></code>
| #00ff00
+
{{!}}-
|<0.0, 1.0, 0.0>
+
{{!}} style="background: #0074d9" {{!}}BLUE
|- style="background:#00f;color:#fff"
+
{{!}} #0074d9
! Blue
+
{{!}}<code><0.000, 0.455, 0.851></code>
| #0000ff
+
{{!}}-
|<0.0, 0.0, 1.0>
+
{{!}} style="background: #7fdbff" {{!}}AQUA
|- style="background:#ff7f00;color:#000"
+
{{!}} #7fdbff
! Orange
+
{{!}}<code><0.498, 0.859, 1.000></code>
| #ff7f00
+
{{!}}-
|<1.0, 0.5, 0.0>
+
{{!}} style="background: #39cccc" {{!}}TEAL
|- style="background:#0ff;color:#000"
+
{{!}} #39cccc
! Cyan
+
{{!}}<code><0.224, 0.800, 0.800></code>
| #00ffff
+
{{!}}-
|<0.0, 1.0, 1.0>
+
{{!}} style="background: #3d9970" {{!}}OLIVE
|- style="background:#ff007f;color:#000"
+
{{!}} #3d9970
! Pink
+
{{!}}<code><0.239, 0.600, 0.439></code>
| #ff007f
+
{{!}}-
|<1.0, 0.0, 0.5>
+
{{!}} style="background: #2ecc40" {{!}}GREEN
|- style="background:#ff0;color:#000"
+
{{!}} #2ecc40
! Yellow
+
{{!}}<code><0.180, 0.800, 0.251></code>
| #ffff00
+
{{!}}-
|<1.0, 1.0, 0.0>
+
{{!}} style="background: #01ff70" {{!}}LIME
|- style="background:#909;color:#fff"
+
{{!}} #01ff70
! Purple
+
{{!}}<code><0.004, 1.000, 0.439></code>
| #990099
+
{{!}}-
|<0.6, 0.0, 0.6>
+
{{!}} style="background: #ffdc00" {{!}}YELLOW
|- style="background:#664;color:#c33;"
+
{{!}} #ffdc00
! brown
+
{{!}}<code><1.000, 0.863, 0.000></code>
| #664c33
+
{{!}}-
| <0.4, 0.2, 0.3>
+
{{!}} style="background: #ff851b" {{!}}ORANGE
|- style="background:#fff;color:#000;"
+
{{!}} #ff851b
! White
+
{{!}}<code><1.000, 0.522, 0.106></code>
| #ffffff
+
{{!}}-
| <1.0, 1.0, 1.0>
+
{{!}} style="background: #ff4136" {{!}}RED
|- style="background:#787;color:#878;"
+
{{!}} #ff4136
! Gray
+
{{!}}<code><1.000, 0.255, 0.212></code>
| #787878
+
{{!}}-
| <0.5, 0.5, 0.5>
+
{{!}} style="color: white; background: #85144b" {{!}}MAROON
|- style="background:#000;color:#fff"
+
{{!}} #85144b
! Black
+
{{!}}<code><0.522, 0.078, 0.294></code>
| #000000
+
{{!}}-
| <0.0, 0.0, 0.0>
+
{{!}} style="background: #f012be" {{!}}FUCHSIA
|}
+
{{!}} #f012be
 +
{{!}}<code><0.941, 0.071, 0.745></code>
 +
{{!}}-
 +
{{!}} style="color: white; background: #b10dc9" {{!}}PURPLE
 +
{{!}} #b10dc9
 +
{{!}}<code><0.694, 0.051, 0.788></code>
 +
{{!}}-
 +
{{!}} style="background: #ffffff" {{!}}WHITE
 +
{{!}} #ffffff
 +
{{!}}<code><1.000, 1.000, 1.000></code>
 +
{{!}}-
 +
{{!}} style="background: #dddddd" {{!}}SILVER
 +
{{!}} #dddddd
 +
{{!}}<code><0.867, 0.867, 0.867></code>
 +
{{!}}-
 +
{{!}} style="background: #aaaaaa" {{!}}GRAY
 +
{{!}} #aaaaaa
 +
{{!}}<code><0.667, 0.667, 0.667></code>
 +
{{!}}-
 +
{{!}} style="color: white; background: #111111" {{!}}BLACK
 +
{{!}} #111111
 +
{{!}}<code><0.067, 0.067, 0.067></code>
 +
{{!}}}
  
 
== Converting Hexadecimal to Vectors ==
 
== Converting Hexadecimal to Vectors ==
Line 76: Line 105:
 
|-
 
|-
 
! {{Hl2}} | Hexadecimal
 
! {{Hl2}} | Hexadecimal
| FF
+
| {{HoverText|FF|total saturation}}
 
| CC
 
| CC
| 00
+
| {{HoverText|00|no saturation}}
 
|-
 
|-
 
! {{Hl2}} |Decimal
 
! {{Hl2}} |Decimal
| 255
+
| {{HoverText|255|total saturation}}
 
| 204
 
| 204
| 0
+
| {{HoverText|0|no saturation}}
 
|-
 
|-
 
! {{Hl2}} |Saturation Float
 
! {{Hl2}} |Saturation Float
| 1.0
+
| {{HoverText|1.0|total saturation}}
 
| 0.8
 
| 0.8
| 0.0
+
| {{HoverText|0.0|no saturation}}
 
|}
 
|}
  
FF = total saturation
+
total saturation:
 
+
* hexadecimal: FF
00 = no saturation
+
* decimal: 255
 
+
* float: 1.0
00 on the web = 0 in Second Life
+
  
FF on the web = 1 in Second Life
+
no saturation:
 +
* hexadecimal: 00
 +
* decimal: 0
 +
* float: 0.0
  
 
Therefore:
 
Therefore:
  
FF00FF = <1.0,0.0,1.0>
+
<code>#F0F = #FF00FF = <1.0,0.0,1.0></code>
  
 
== Contributor ==
 
== Contributor ==

Latest revision as of 14:48, 22 January 2015

Using color in LSL scripting is fairly easy. If works by combining values of red, green, and blue light. They are stored like this:

float red_value;
float green_value;
float blue_value;
 
vector color = <red_value, green_value, blue_value>;
 
//  or:
//        color.x = red_value;
//        color.y = green_value;
//        color.z = blue_value;

Each red, green, or blue value can be between 0.0 (no color saturation) to 1.0 (total color saturation). These values are determined by combining the colors as if they were light, not paint. Therefore, the combination of all three in total saturation is white. The combination of all three with no saturation is pitch black. If there is not saturation on two values, and the third is saturated, you get a pure color.

Color Hexadecimal code LSL color representations
NAVY #001f3f <0.000, 0.122, 0.247>
BLUE #0074d9 <0.000, 0.455, 0.851>
AQUA #7fdbff <0.498, 0.859, 1.000>
TEAL #39cccc <0.224, 0.800, 0.800>
OLIVE #3d9970 <0.239, 0.600, 0.439>
GREEN #2ecc40 <0.180, 0.800, 0.251>
LIME #01ff70 <0.004, 1.000, 0.439>
YELLOW #ffdc00 <1.000, 0.863, 0.000>
ORANGE #ff851b <1.000, 0.522, 0.106>
RED #ff4136 <1.000, 0.255, 0.212>
MAROON #85144b <0.522, 0.078, 0.294>
FUCHSIA #f012be <0.941, 0.071, 0.745>
PURPLE #b10dc9 <0.694, 0.051, 0.788>
WHITE #ffffff <1.000, 1.000, 1.000>
SILVER #dddddd <0.867, 0.867, 0.867>
GRAY #aaaaaa <0.667, 0.667, 0.667>
BLACK #111111 <0.067, 0.067, 0.067>

Converting Hexadecimal to Vectors

To convert from a hexadecimal values used in CSS or HTML to ones usable in Second Life scripting, first convert the number for the red, green and blue saturation from hexadecimal to decimal, then divide that number by 255. Do bear in mind that 3-digit codes are a shorthand form, so each digit should be doubled (F becomes FF, 4 becomes 44, 0 becomes 00 etc)

Form\Channels Red Green Blue
Hexadecimal FF CC 00
Decimal 255 204 0
Saturation Float 1.0 0.8 0.0

total saturation:

  • hexadecimal: FF
  • decimal: 255
  • float: 1.0

no saturation:

  • hexadecimal: 00
  • decimal: 0
  • float: 0.0

Therefore:

#F0F = #FF00FF = <1.0,0.0,1.0>

Contributor

FlipperPA Peregrine