12周年記念パーティ開催！ 2024/5/10(金) 19:00
記事検索
購読 する ログイン

色を自在に変換するcolor-mod()関数 第1回 CSSにおける色の指定方法

CSS Color Module Level4で策定されている、色変換の関数color-mod()について解説します。まずは、CSSで色を指定する方法を理解しましょう。

カテゴリー
HTML/CSS >
CSS仕様

発行

著者 高津戸 壮 テクニカルディレクター
色を自在に変換するcolor-mod()関数 シリーズの記事一覧

本シリーズ内で紹介している内容は利用できますが、現在はCSSの仕様としては関数color-mod()がなくなっているので注意してください。（2018年4月現在）

はじめに

本連載では、CSS Color Module Level 4にて定義されている、color-mod()関数を紹介します。

このcolor-mod()関数は、色を、別の色へと変換してくれる機能を持ちます。たとえば、次のように書くと、鮮やかな赤を、暗めな赤に変換することができます。

background-color: color-mod(#ff0000 shade(50%));

素の状態の#ff0000と、shade(50%)を適用した#ff0000

このような色変換の機能は、SassやCompassにて、組み込みの関数として用意されているため、利用された方も多いのではないでしょうか。CSS Color Module Level4では、そのような機能が、仕様として定義されようとしています。

このcolor-mod()関数、仕様書の中には存在しているものの、GitHubのissueを見る限りでは、まだまだ仕様が変化する可能性が高いようです*。

しかしながら、PostCSSのプラグインを使えば、この仕様で定義されているcolor-mod()関数とほぼ同じ内容の処理を、今すぐ利用することが可能です。color-mod()関数を使うとどのようなことができるのか、一足先に学んでみましょう。

この連載で紹介するサンプルは、次のリポジトリからダウンロード、またはクローンできます。併せて参照してください。

色を自在に変換するcolor-mod()関数

*注：仕様書中のcolor-mod()関数

color-mod()関数の仕様書の内容に矛盾があるようだったため、ピクセルグリッドの矢倉が構文についてIssueを立てたところ、返答がありました。それによると、まだまだ仕様が固まっておらず構文などは変更される可能性があることがわかっています。

PostCSSで今すぐcolor-mod()

本連載では、color-mod()関数の挙動を理解するために、PostCSSのpostcss-color-functionというプラグインを利用します。現状、仕様に書かれているcolor-mod()関数は、仕様自体がまだEditor's Draftであり、対応しているブラウザはありません。そこで、この機能をPostCSS上で実装しているpostcss-color-functionでCSSを変換しながら、その機能を見ていきます。

color()関数とcolor-mod()関数

このcolor-mod()関数ですが、そもそも、この色変換の機能を担う関数は、もともとcolor()関数として定義されていたものでした。しかしながら、color()関数には別の機能をもたせることになったため、color-mod()関数に変更したという経緯があります。postcss-color-functionは、このプラグインが実装された時点でのCSS Color Module Level 4の仕様を参考にして作られています。

このため、postcss-color-functionは、color-mod()関数ではなく、color()関数で色の変換を行います。postcss-color-functionを使うと、CSSの中でcolor()関数にて色変化が行われている箇所それぞれを、変換結果として得られる色に置き換えてくれます。

そのような事情があり、この連載で紹介している色変換関数の文法自体は、最終的にRecommendationとなる仕様の色変換関数の文法とは異なるものになると思われます。本稿では、postcss-color-functionの実装に合わせた書き方を紹介していきますので、その点ご注意ください。

PostCSSについて

なお、この連載の中では、PostCSSの使い方については、軽く触れる程度に留めます。PostCSSについては、次の連載で基本的な使い方を解説していますのでご参照ください。

本シリーズとの関係

実は上記連載の中で色の管理方法について書こうとしたところ、まとまった内容になったので、別途まとめたのがこの連載シリーズになります。ですから、この「PostCSSでECSSビルド環境構築」シリーズもご一読いただくと、よりスムーズに読み進められるかもしれません。

CSSにおける色指定について

color-mod()関数について知る前に、色の変換を行うためには、そもそもCSSにおいて色をどのように指定するのかというのを理解している必要があります。今回はまず、CSSでの色の指定方法を簡単に解説し、次回以降で色の変換、色の管理について紹介します。

ここでは、色の指定方法として、以下の3つを解説します。

  • RGB
  • HSL
  • HWB

RGBによる色の指定

まずはRGBによる指定です。RGBは、Red（赤）、Green（緑）、Blue（青）の光の三原色で色を表現します。

rgb() 関数

RGBで色を指定するには、rgb()関数を使います。rgb()関数には、次のように赤、緑、青の順で値を渡します。

background-color: rgb(205, 72, 85);

引数として受け取れるのは、0〜255の値です。赤、緑、青がどのくらいの強さなのかを指定します。

rgba() 関数

rgb()に、第四引数としてアルファ値を渡すことができるようになっているのがrgba()関数です。アルファ値は次のように、0〜1の範囲で指定します。

background-color: rgba(205, 72, 85, 0.5);

こうして作られた色は、アルファ値で指定された透明度を持ちます。

ここまでの、rgb()関数とrgba()関数を使って背景色を設定した状態は、次のページでも確認できます。

hex-color

赤、緑、青の強さを、それぞれ16進数で表現した値を#に続けて並べたのがhex-color形式での指定です。

background-color: #cf4452;

これは昔から馴染みの色の指定方法ですので、特に説明は不要でしょう。

赤／緑／青の値の変化による色の再現

RGBの値の変化により、どのように色が再現されるかはカラーピッカーを触ってみるのがもっともわかりやすいだろうと思われます。ブラウザ上で動作するRGBのカラーピッカーの例を次に挙げますので、触ってみてください。

rbga()関数のブラウザサポートとフォールバック

実務的な利用可否を判断する際に気になるブラウザのサポートですが、rbga()関数は、Internet Explorer 8以下では非対応です。もう対応する必要があるケースは稀でしょうが、もし非対応環境もサポートしたい場合、アルファ値なしの値を直前に指定するという方法があります。これを自動的に付加してくれるPostCSSプラグインがありましたので、必要な方は試してみるとよいかもしれません。

/* 変換前 */
body {
  background-color: rgba(153, 221, 153, 0.8);
}

/* 変換後 */
body {
  background-color: #99DD99;
  background-color: rgba(153, 221, 153, 0.8);
}

HSLによる色の指定

前述したRGBによる指定は、機械的にはダイレクトでわかりやすいですが、私たち人間にとっては直感的ではありません。たとえばもうちょっと明るくしたいなぁと思って、RGBの各値をちょこちょこと変更して、望む明るさにするのは至難の技です。より直感的に色を操作する方法として、HSLによる色指定があります。HSL各文字は、次の単語の頭文字をとったものです。

  • Hue: 色相 - どの色か
  • Saturation: 彩度 - どのくらい鮮やかか
  • Lightness: 明度 - どのくらい明るいか

この3つの値を指定することで、色を表現します。

hsl() 関数

CSSでhsl()関数を使うと、この3つの値を指定し、色を指定することができます。次の例がhsl()関数を使ってみたものです。hue、saturation、lightnessの順で指定します。すなわち、どの色で、どのくらい鮮やかで、どのくらい明るいかです。

color: hsl(30, 80%, 30%);

hsla() 関数

rgba()関数同様、ここに4番目の引数としてアルファ値を渡すことができるhsla()関数も用意されています。hsla()関数を使うと、透明度を持った色を指定することができます。

background-color: hsla(120, 80%, 30%, 0.5);

ここまでの、hsl() 関数とhsla() 関数を使って背景色を設定した状態は、次のページでも確認できます。

色相／彩度／明度の値の変化による色の再現

HSLによる色指定の関数で第一関数に指定している色相は、0〜360の数値で指定します。これは次のような、0を赤とした場合の、色相を円周上に並べた場合の角度です。

選んだ色につき、どのくらいの鮮やかさかを第二引数として、どのくらいの明るさかというのを第三引数として指定します。

色相を30ずつ、彩度を10%ずつ、明度を10%ずつ変化させてみたデモを用意したので、ご参照ください。

こちらも、RGB同様、カラーピッカーを実際に触ってみるのが直感的に仕組みを理解できるかと思います。ブラウザ上で動作するHSLのカラーピッカーの例を次に挙げます。

HSLでの色指定は、鮮やかさを調節したければ彩度を、明るさを調節したければ明度を変化させればよいので、RGBよりも色の調整が容易です。

hsl()関数とhsla()関数のブラウザサポートとフォールバック

このhsl()関数とhsla()関数は、rgba()同様、Internet Explorer 8以下で非対応です。rgba()関数のようにフォールバック用のPostCSSプラグインがあるかと探してみましたが、筆者は特に見つけられませんでした。IE8以下を対象とすることも減ったので、それほどに気にする必要はないのかもしれないですが、考慮しておいてください。

HWBによる色の指定

HWBというのは、選んだベースの色相に、どのくらい白味と黒味を混ぜるかという色の指定方法です。Wikipediaによると、より人間に直感的であるようにデザインされたとのことです。HWBは、以下の単語の頭文字を取っています。

  • Hue: 色相
  • Whiteness: 白味
  • Blackness: 黒味

このHWB、筆者も今回の記事を書くにあたって初めて知りましたが、CSSにおいての実装は、2016年12月時点では、CSS Color Module Level 4で策定中の段階です。

postcss-color-hwbで今すぐHWB

CSS Color Module Level 4では、HWBで色を指定できるhwb()関数が定義されようとしていますが、このhwb()関数を一足先に実装したpostcss-color-hwbというPostCSSのプラグインがあります。このプラグインを使うと、hwb()関数で書かれた箇所それぞれを、rgb()及びrgba()形式での色指定に変換してくれます。

/* 変換前 */
body {
  background-color: hwb(354deg, 28%, 20%);
}

/* 変換後 */
body {
  background-color: rgb(204, 71, 85);
}

本稿では、このpostcss-color-hwbを使いながら、HWB形式での色指定がどのようなものかを紹介します。

文法の違いについて注意

このpostcss-color-hwbが変換してくれるhwb()関数ですが、これもまたcolor-mod()関数のように、このプラグインが実装された時点でのhwb()関数の仕様はすでに古く、2016年12月段階でのhwb()関数は、若干異なる仕様になっています。

具体的には、最新の仕様では、引数の指定をカンマ区切りでなく、スペースやスラッシュで行うという差があります。とりあえず、本稿ではpostcss-color-hwbが変換してくれる形式で紹介しますが、その点にご注意ください。

/* 旧文法 */
color: hwb(30, 80%, 30%, 0.5);
/* 新文法 */
color: hwb(30 80% 30% / 0.5);

ちなみに、CSS Color Module Level 4ではrgb()もhsl()も同様に、引数の区切りをスペースとスラッシュで表すことになりそうです。

hwb() 関数

前置きが長くなりましたが、HWBで色指定を行うhwb()関数を見ていきましょう。先述の通り、以降はpostcss-color-hwbが作られた時点での文法で書き、PostCSSで変換をかけて確認しています。

hwb()関数には、色相（hue）、白味（whiteness）、黒味（blackness）の順で引数を指定します。

background-color: hwb(354deg, 28%, 20%);

アルファ値の指定

rgb()やhsl()でアルファ値を指定するには関数名をrgba()やhsla()にする必要があるのとは異なり、hwb()では、第四引数が指定された場合、その値を透明度として色に持たせます。

background-color: hwb(354deg, 28%, 20%, 0.5);

CSS Color Module Level 4では、rgb()やhsl()も同じようにアルファ値が受け取れるようになり、rgba()やhsla()は、互換性のために残される形となるようです。

ここまでの、hwb() 関数とアルファ値を指定したhwb()関数を使って背景色を設定した状態は、次のページでも確認できます。

色相／白味／黒味の値の変化による色の再現

HWBについても、これまでと同様、カラーピッカーを触ってみるのが直感的な理解を助けることと思います。ブラウザ上で動作するHWBのカラーピッカーの例を次に挙げますので、触ってみてください。

また、HSLで用意したように、色相を30ずつ、白味を10%ずつ、黒味を10%ずつ変化させてみたデモを用意しました。理解の助けとしてご参照ください。

HWBによる色指定は、HSLが彩度と明度を調製するのに対し、純色を「どのくらい白くするか」「どのくらい黒くするか」という2軸で考えるので、より単純と言えるかもしれません。

まとめ

今回はCSSにおける色の指定方法について解説しました。冒頭で触れた色変換の関数color-mod()は、今回紹介したRGB、HSL、HWBをベースとした変換を行います。

次回はcolor-mod()関数について解説します。
X GitHub
運営会社