By alabama on Sep 25, 2011
View a live demo here:
http://mslcoding.com/dev/color2.php
<!doctype html>
<html lang="en">
<head>
<title>Random Colors</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<?php for ($i = 0; $i < 16; $i++) { $color = mt_rand(1,11184810);
$hex = base_convert($color,10,16);
$height = 350;
$width = 155;
echo "<div style=\"float:left;width:{$width}px;height:{$height}px;display:inline-block;background-color: #{$hex}\">#{$hex} Press f5</div>";
} ?>
</body>
</html>
alabama, i think the easiest way to visualize a spectrum is to think of a particular RGB value as a point in 3D space. the full range of RGB values is then a 256 x 256 x 256 unit cube. the points 'black' (0,0,0), and 'white' (255,255,255) are on 2 opposite corners of the cube.
now, you can define a spectrum any number of ways. MSPaint's color slider, for example, always has black and white as the two limits, and changes depending upon the midpoint you select. if you were to view this in 3D, there would be 2 straight lines, one connecting (0,0,0) to the midpoint, and another connecting the midpoint to (255,255,255). for the first 50% of the spectrum, the slider travels along the first line, and for the second 50%, it travels along the second.
in mSL this would look like:
; $spectrum(r, g, b, X)
; X% along the spectrum centered around (r, g, b)
alias spectrum {
if (X <= 50) return $rgb($calc($1 * $4 / 50), $calc($2 * $4 / 50), $calc($3 * $4 / 50))
return $rgb( $&
$calc((255 - $1) * ($4 / 50 - 1) + $1) ,$&
$calc((255 - $2) * ($4 / 50 - 1) + $2) ,$&
$calc((255 - $3) * ($4 / 50 - 1) + $3) )
}
so as an example, $spectrum(255, 0, 0, 25) returns the integer value for the point half way between black and red on MSPaint's slider, (127, 0, 0).
you can have a spectrum with any 2 limits and any midpoint using this principle, you would just need to adjust the numbers in the calculations. you could even have one that was non-linear, so instead of joining the 3 points via 2 lines you could join them all with a curve. not sure how meaningful the resulting distribution of points would be, but it could be an interesting investigation
