Asial Blog

Recruit! Asialで一緒に働きませんか?

【CSS3】HSL色空間による色指定のすゝめ

カテゴリ :
フロントエンド(HTML5)
タグ :
Tech
JavaScript
CSS3
こんにちは、橋本です。

今日は、知らない人も多いCSS3の隠れた(?)新機能、HSL色空間による色指定について書いてみたいと思います。

Webにおける色指定の方法として一番メジャーなのは、16進数を用いたRGB値による色指定の方法かと思います。

説明不要かもしればせんが、#に続けて、赤、緑、青の順に、0から255の数値を16進数を用いて色を指定する方法です。

  1. .hoge {
  2.         background-color: #123456;    
  3.     }

その他に色キーワードを用いた色指定の方法や、rgb(rgba)関数を用いた色指定の方法があります。

  1. .hoge {
  2.         background-color: red;
  3.         color: rgb(255, 255, 255);
  4.     }

CSS3では、上記の色指定の方法に加えて、HSL色空間による色指定を行うことが可能になりました。

HSL色空間とは、色相(Hue)、彩度(Saturation)、明度(lightness)の3つの成分からなる色空間のことで、色相を0〜360度の範囲(赤を0度に置き、時計回りに赤、橙、黄、黄緑、緑、青緑、青、青紫、紫、赤紫の順に変化)で、彩度を純色から灰色の範囲で、明度を白から黒の範囲で(中間が純色)表すものです。

色相のイメージ


色相、彩度、明度の関係



色相の角度による色の把握がわかりやすく、また、色の鮮やかさや明るさを数値で指定することで増減することができるため、rgbを用いた色指定の方法よりも、直感的に色の指定が行える方法になっています。

CSS3でHSLによる色指定を行うには、hsl関数(透明度を指定する際には、hsla)を用いて指定します。
引数は、色相(0〜360までの数値)、彩度(0%〜100%)、明度(0%〜100%)の順に指定します。
(hsla関数の場合は、上記に加え、透明度を0.0〜1.0の値で指定します。)

  1. .hoge {
  2.         background-color: hsl(0, 100%, 50%) // 純色の赤
  3.         color: hsl(60, 100%, 80%) // 明るい黄色
  4.     }

rgbによる色指定では、「ちょっと色を明るくしたい、もうちょっと赤を強くしたい」などといったときに、直感的に修正しにくいため、カラーピッカー等を用いてrgb値を確認する必要があったのですが、HSLによる色指定であれば、色相、彩度、明度を調節することで簡単に色を調節することができます。

CSS3による新機能のため、使える場面が限られるのですが、使える場合には是非使ってみていただければと思います。

ちなみに、HSLについて調べている中で、RGBからHSLに変換する変換式とHSLからRGBに変換する変換式を見つけたので、javascriptで実装してみました。

以下のサンプルページで変換を試すことができるので、ぜひ触ってみてください。

サンプル

  1. /**
  2.      *  hslからrgbに変換する関数
  3.      * 
  4.      *  hue 色相。0〜360の数値を指定
  5.      *  saturation 彩度 0〜100%の値を指定
  6.      *  lightness 明度 0〜100%の値を指定
  7.      */
  8.     var hslToRgb = function(hue, saturation, lightness){
  9.         var h = Number(hue),
  10.             s = Number(saturation.replace('%', '')) / 100,
  11.             l = Number(lightness.replace('%', '')) / 100,
  12.             max = l <= 0.5 ? l * (1 + s) : l * (1 - s) + s,
  13.             min = 2 * l - max,
  14.             rgb = {};
  15.  
  16.         if (s == 0) {
  17.             rgb.r = rgb.g = rgb.b = l;
  18.         } else {
  19.             var list = {};
  20.             
  21.             list['r'] = h >= 240 ? h - 240 : h + 120;
  22.             list['g'] = h;
  23.             list['b'] = h < 120 ? h + 240 : h - 120; 
  24.  
  25.             for (var key in list) {
  26.                 var val = list[key],
  27.                     res;
  28.  
  29.                 switch (true) {
  30.                     case val < 60:
  31.                         res = min + (max - min) * val / 60;
  32.                         break;
  33.  
  34.                     case val < 180:
  35.                         res = max;
  36.                         break;
  37.  
  38.                     case val < 240:
  39.                         res = min + (max - min) * (240 - val) / 60;
  40.                         break;
  41.  
  42.                     case val < 360:
  43.                         res = min;
  44.                         break;
  45.                 }
  46.  
  47.                 rgb[key] = res;
  48.             }
  49.         }
  50.  
  51.         // CSS用に変換して返す
  52.         return 'rgb(' + Math.round(rgb.r * 255) + ',' + Math.round(rgb.g * 255) + ',' + Math.round(rgb.b * 255) + ')';
  53.     };
  54.  
  55.     /**
  56.      *  rgbからhslに変換する関数
  57.      * 
  58.      *  red 赤。0〜255の数値を指定
  59.      *  green 緑。 0〜255の値を指定
  60.      *  blue 青。 0〜255の値を指定
  61.      */
  62.     var rgbToHsl = function(red, green, blue){
  63.         var r = red / 255,
  64.             g = green / 255,
  65.             b = blue / 255,
  66.             rgb = {
  67.                 'r': r,
  68.                 'g': g,
  69.                 'b': b
  70.             },
  71.             max = Math.max(r, g, b),
  72.             min = Math.min(r, g, b),
  73.             hsl = {
  74.                 'h': 0,
  75.                 's': 0,
  76.                 'l': (max + min) / 2
  77.            };
  78.  
  79.         // 彩度と色相の算出
  80.         if (max != min) {
  81.             // 彩度
  82.             var m = hsl.l <= 0.5 ? (max + min) : (2 - max - min);
  83.             hsl.s = (max - min) / m;
  84.  
  85.             // 色相
  86.             var c = {};
  87.             for (var k in rgb) {
  88.                 var v = rgb[k];
  89.                 c[k] = (max - v) / (max - min);
  90.             }
  91.  
  92.             var h;
  93.             switch (max) {
  94.                 case r:
  95.                     h = c.b - c.g;
  96.                     break;
  97.  
  98.                 case g:
  99.                     h = 2 + c.r - c.b;
  100.                     break;
  101.                 case b:
  102.                     h = 4 + c.g - c.r;
  103.                     break;
  104.             }
  105.  
  106.             h = h * 60;
  107.  
  108.             hsl.h = h < 0 ? h + 360 : h;
  109.         }
  110.  
  111.         // CSS用に変換して返す
  112.         return 'hsl(' + hsl.h + ', ' + hsl.s * 100 + '%, ' + hsl.l * 100 + '%)';
  113.     };

コメント

  • なけない

    こっちも分かりやすいとおもいますよ
    http://www.geocities.jp/net_t3/color/what02_5.html

  • 橋本章史

    なけないさん、ありがとうございます。個人的に今色について勉強中なので、非常に助かります。

  • aki

    pccsのサイトも勉強になりますよ

    プログラムは全く関係ありませんが色彩については非常に勉強になります。

    いつも楽しみにblog拝見してます

    内容がかなり難しいためただ眺めているだけですが、頑張ってください。

  • 橋本章史

    akiさん、ありがとうございます。
    PCCSのサイト拝見しました。
    内容がとても充実していて、大変勉強になります。

    他にも良いサイトがありましたら、是非紹介してください。

コメントフォーム



captcha_key

アシアルの会社情報

アシアル株式会社はPHP、HTML5、JavaScriptに特化したWebエンジニアリング企業です。ユーザーエクスペリエンス設計から大規模システム構築まで、アシアルメンバーが各々の専門性を通じてインターネットの進化に貢献します。

会社情報詳細

最近の記事