Question

As the HSL vals presumably cycle through the rainbow, and there are 7 cardinal colors in that proverbial array of hues (ROYGBIV), the distance between each one, from 0 to 360, should be 51 or 52. So why do the colors here not correspond to what one would expect?

HTML

<p class="red">rot</p>
<p class="orange">arnj</p>
<p class="yellow">yaller</p>
<p class="green">green</p>
<p class="blue">bloo</p>
<p class="indigo">indiglo</p>
<p class="violet">violence</p>

CSS

.red {
    color: hsl(0, 100%, 50%);
}
.orange {
    color: hsl(51, 100%, 50%);
}
.yellow {
    color: hsl(103, 100%, 50%);
}
.green {
    color: hsl(154, 100%, 50%);
}
.blue {
    color: hsl(206, 100%, 50%);
}
.indigo {
    color: hsl(257, 100%, 50%);
}
.violet {
    color: hsl(309, 100%, 50%);
}

see http://jsfiddle.net/NvTvr/

Perhaps the assumption that the canonical colors are equidistant from one another was faulty; if such is the case (and it seems to be), what is the accepted hue value for true blue (and the rest of the gang)?

The naked eye says 30 is about right for orange, and 60 about right for yellow; the rest seem okay as-is.

UPDATE

These values (0,25,50,100,200,250,300) are more like what I think of when I hear those color's names:

http://jsfiddle.net/NvTvr/2/

UPDATE 2

I fiddled around again, this time using John's vals: http://jsfiddle.net/NvTvr/7/

Was it helpful?

Solution

Since HSL is a derivative color model of RGB it might get more clear if you look at RGB values.

Red 255 0 0 (0° 100% 50%)
Orange 255 128 0 (30° 100% 50%)
Yellow 255 255 0 (60° 100% 50%)
Green 0 255 0 (120° 100% 50%)
Blue 0 128 255 (210° 100% 50%) [for me blue is RGB 0 0 255...]

Indigo - hm .. - 9 31 146 (230° 88% 30%)
Violet 143 0 255 (274° 100% 50%)

The names and corresponding values also have historic background. It was very early when someone tried to give the rainbow colors names.

The rainbow contains the whole color spectrum. It's just our visual system which forms the distinctive bands.

You can play with hsl colors here.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top