rgb-color-utils 又一個(gè)前端RGB顏色小工具

ZweiZhao 發(fā)布于2019-08-21 17:22 / 2669人閱讀

rgb-color-utils

A simple utils library for RGB colors which provides some convenient methods such as color interpolation, gradient generation, etc.

Installation

npm install rgb-color-utils

yarn add rgb-color-utils

Example Usage

import { parseColor, interpolate, gradientColor } from "rgb-color-utils";

const colorList = parseColor("#cdab85"); // [205, 171, 133]
const newColor = interpolate("rgb(0, 23, 148)", "#febab5", 0.5); // "#7f69a5"
const colorMap = gradientColor("#bca380", "#00f", 4); // ["#bca380", "#8d7aa0", "#5e52c0", "#2f29df"]

API parseColor(color)

color one RGB/HEX color string (rgba(0, 23, 148) or #bf0081)

interpolate(from, to, step)

from the starting position RGB/HEX color string (rgba(0, 23, 148) or #bf0081)

to the end position color string

step the normalized value (between 0 and 1) of the interpolation. A step of 0.5 would be the middle of from and to

gradientColor(from, to, length)

from the starting position RGB/HEX color string (rgba(0, 23, 148) or #bf0081)

to the end position color string

length the length of the gradient colors array.

License

MIT License

GPU云服務(wù)器云服務(wù)器 RGB顏色值 js 顏色轉(zhuǎn)換rgb 又一個(gè)典型實(shí)例 php項(xiàng)目又什么工具

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/89425.html

相關(guān)文章

ionic2實(shí)現(xiàn)透明狀態(tài)欄和透明工具欄

摘要：抽時(shí)間寫了個(gè)，你想要的都在這里了。你可以狠狠的點(diǎn)擊下面的鏈接去往倉(cāng)庫(kù)地址，一探究竟。你可以直接下來(lái)，直接運(yùn)行。 ionic2實(shí)現(xiàn)透明狀態(tài)欄和透明工具欄目錄如何實(shí)現(xiàn)？集成DEMO（2017/4/1更新）簡(jiǎn)短的分析一個(gè)額外的小栗子我想讓狀態(tài)欄變色怎么辦？為什么這么做？總結(jié) 以下是我的方案，不繞彎子，直接上實(shí)現(xiàn)過程．首先貼效果圖，來(lái)張gif（2017/4/1更新）show...

wenshi11019 2019-08-21 15:36 評(píng)論0 收藏0
web前端（11）—— 頁(yè)面布局1

摘要：維護(hù)起來(lái)更加方便不足雪碧的最大問題是內(nèi)存使用拼圖維護(hù)比較麻煩使的編寫變得困難雪碧調(diào)用的圖片不能被打印我們可以使用綜合屬性制作通天，什么是通天呢，就是一般我們電腦的屏幕都是但是設(shè)計(jì)師給我們的圖都會(huì)比這個(gè)大，那么我們可以此屬性來(lái)制作通天。要說(shuō)頁(yè)面布局的話，那就必須說(shuō)說(shuō)margin，padding，和background。這三個(gè)屬性其實(shí)都是前面講過的，這里還是再次講解以下，為什么呢？因?yàn)槭沁@樣的...

番茄西紅柿 2019-04-23 13:11 評(píng)論0 收藏0
01-html介紹和head標(biāo)簽

摘要：三開發(fā)工具的使用使用技巧編輯器四介紹的概述全稱，翻譯為超文本標(biāo)記語(yǔ)言，它不是一種編程語(yǔ)言，是一種描述性的標(biāo)記語(yǔ)言，用于描述超文本內(nèi)容的顯示方式?！巨D(zhuǎn)】01-html介紹和head標(biāo)簽主要內(nèi)容web標(biāo)準(zhǔn)瀏覽器介紹開發(fā)工具介紹HTML介紹HTML顏色介紹HTML規(guī)范HTML結(jié)構(gòu)詳解一、web標(biāo)準(zhǔn)web準(zhǔn)備介紹：w3c：萬(wàn)維網(wǎng)聯(lián)盟組織，用來(lái)制定web標(biāo)準(zhǔn)的機(jī)構(gòu)（組織）web標(biāo)準(zhǔn)：制作網(wǎng)頁(yè)遵循的規(guī)范...

番茄西紅柿 2019-04-23 11:51 評(píng)論0 收藏0
前端技術(shù)之_CSS詳解第五天

摘要：前端技術(shù)之詳解第五天一行高和字號(hào)行高中，所有的行，都有行高。微軟雅黑我們一定要將標(biāo)簽寫在前面，這些偽類寫在后面。也就是說(shuō)，標(biāo)簽涵蓋了的狀態(tài)。表示三原色紅綠藍(lán)。進(jìn)制表示法，也是兩位兩位看，看，但是沒有逗號(hào)隔開。前端技術(shù)之_CSS詳解第五天一、行高和字號(hào) 1.1 行高 CSS中，所有的行，都有行高。盒模型的padding，絕對(duì)不是直接作用在文字上的，而是作用在“行”上的...

番茄西紅柿 2019-04-23 13:44 評(píng)論0 收藏0
前端基礎(chǔ)-- CSS

摘要：語(yǔ)法每個(gè)樣式右兩部分組成選擇器和聲明。格式如下外部樣式外部樣式就是將寫在一個(gè)單獨(dú)的文件中，然后在頁(yè)面進(jìn)行引入即可。CSS知識(shí) CSS（Cascading Style Sheet，層疊樣式表）定義如何顯示HTML元素。當(dāng)瀏覽器讀到一個(gè)樣式表，它就會(huì)按照這個(gè)樣式表來(lái)對(duì)文檔進(jìn)行格式化（渲染）。Css之車更豐富的文檔外觀，Css可以為任何元素的文本和背景設(shè)置顏色；允許在任何元素外圍設(shè)置邊框；允許改...

番茄西紅柿 2019-04-23 13:16 評(píng)論0 收藏0