search

unvt / charites

It is an application to style vector tiles easily
https://unvt.github.io/charites/
MIT License
54 stars 13 forks source link

rgb に対する掛け算を追加したい。 #17

Closed naogify closed 3 years ago

naogify commented 3 years ago

例えば、basic の landcover-wood や landcover-grass など少し濃い/薄い色が欲しいケースは多いと思います。

スクリーンショット 2021-10-07 17 32 09

RGBの各色を10%ずつ増やせば色を薄く、10%ずつ減らせば色を濃くできるので、

$grassColor: rgb(216, 232, 200)
$forestColor: $grassColor * 1.1

のように指定できると色を変更するときも簡単になります。

naogify commented 3 years ago

@champierre さんの、ブログのように darken という関数を作ってしまうのも良いかも。

darken('ff0000', 0.8)

のように darken 関数を呼んでください。2つ目の引数は濃くする度合いで、1に近いほど濃くする度合いは弱く、0に近いほど度合いが強くなります。

https://blog.champierre.com/831

naogify commented 3 years ago

Sass に lighten() と darken() があるのか。

https://sass-lang.com/documentation/modules/color#lighten https://sass-lang.com/documentation/modules/color#darken

naogify commented 3 years ago

color.scale の方が良いな。 https://sass-lang.com/documentation/modules/color#scale

color.scale(#6b717f, $red: 15%); // #81717f

JinIgarashi commented 3 years ago

https://www.npmjs.com/package/@jiaminghi/color/v/0.0.5

このnpmパッケージ使うと良さそう。色を薄く濃くするだけでなく、透過率も簡単に変えられると良さそう。

naogify commented 3 years ago

@JinIgarashi ありがとうございます。試してみます！透過率も欲しいですね。

miya0001 commented 3 years ago

@naogify We need to re-open this issue in English. 😊