ねるねるねるねはヒッヒ。練れば練るほど色がかわって

RGB系

色の話です。RGB系の記述方法で色をゴネゴネすることができるようです。

rgb

10進数または%指定のRGB値を16進数のRGB値に変換します。

.example {
  color: rgb(100,254,10);
  color: rgb(10%,5%,72%);
}

/*
.example {
  color: #64fe0a;
  color: #190cb7;
}
*/

rgba

RGBA値を10進数のRGBA値に変換します。
CSSだと透明度付きの場合16進数で指定できませんが、16進数のRGB値を指定しても10進数に変換してくれます。
また、キーワードも変換してくれます。
なんやこの使いみちなさそうな関数・・・

.example {
  color: rgba(100,254,10,.5);
  color: rgba(10%,5%,10,.8);
  color: rgba(red,.7);
  color: rgba(#132,.2);
}

/*
.example {
  color: rgba(100, 254, 10, 0.5);
  color: rgba(25, 12, 10, 0.8);
  color: rgba(255, 0, 0, 0.7);
  color: rgba(17, 51, 34, 0.2);
}
*/

red

16進数のRGB値のR値（赤）を返します。

.example {
  property: red(#4c61a8);
}

/*
.example {
  property: 76;
}
*/

green

16進数のRGB値のG値（緑）を返します。

.example {
  property: green(#4c61a8);
}
/*
.example {
  property: 97;
}
*/

blue

16進数のRGB値のB値（青）を返します。

.example {
  property: blue(#4c61a8);
}
/*
.example {
  property: 168;
}
*/

mix

2つの色を混ぜて中間色が作れます。

.example {
  background: mix(#000, #fff, 50%);
}
/*
.example {
  background: #7f7f7f;
}
*/

RGB系の関数は以上ですが・・・・
うーん・・・使うのかこれ・・・