日本の伝統色をHSV空間に配置してみた

color label explorer (※やや重い) が面白かったので、日本の伝統色でやってみた。

データは Japanese Traditional Colors - 日本の伝統色: 2xup から抽出させてもらったのを使ってる。

こうやって分布させるだけでも、新たな気づきがあっておもしろい。

内側に密集していて、外側にいくほど(彩度が高くなるほど)色が少なくなる。特に、左下の緑なんてすっからかん。伝統色には、自然を表現する色が多いのに、緑が少ないとは意外。自然界には、彩度が高い色は少ない、ということか。

一応ソースものっけておく。これぐらいなら、JS ででもできそうなんだけど、日ごろの慣れで AS。

package{
    import flash.display.*;
    import flash.text.TextField;
    import sketchbook.colors.*;
    import com.nitoyon.as3query.*;

    [SWF(backgroundColor="#000000")]
    public class TraditionalColor extends Sprite{
        private var box:Sprite;

        public function TraditionalColor(){
            $(stage)
                .attr({
                    align: "TL",
                    scaleMode: "noScale"
                });

            box = $(Sprite)
                .attr({x : 200, y : 200})
                .appendTo(this)[0];

            for each(var col:Object in colors){
                putColor(col);
            }
        }

        private function putColor(col:Object):void{
            var hsb:Object = ColorUtil.getHSB(col.value);

            var rad:Number = (2 * Math.PI * hsb.h) / 360;
            var r:Number = hsb.s * 2;

            $(TextField)
                .text(col.color)
                .attr({
                    textColor : col.value,
                    autoSize: "left",
                    selectable: false,
                    x : r * Math.cos(rad),
                    y : r * Math.sin(rad)
                })
                .appendTo(box);
            
        }

        private var colors:Array = [
            {value: 0xfef4f4, color: "桜色 ", yomi: "さくらいろ"},
            {value: 0xfdeff2, color: "薄桜 ", yomi: "うすざくら"},
            // 以下略
        }
    }
}

無駄に as3Query を使ってる。あと、HSV 変換は sketchbook の ColorUtil を使ってる。