SCSS SASS Color 顏色函式用法

2022-07-04 08:57:13 字數 994 閱讀 5868

最近做乙個沒有設計師參與的專案,發現 scss 內建的顏色函式還挺好用。記錄分享下

能省掉手工轉換 hex 到 rgb 格式的工作,如以下 scss **

$linkcolor: #20a0ff;

.box

生成的 css **

.box
還可以通過 opacify 增加,通過 transparentize 來減少透明度值,如:

>> opacify(rgba(125,125,125, 0.6), 0.2

)rgba(

125,125,125, 0.8

)>> transparentize(green, 0.5

)rgba(

0, 255, 0, 0.5)

lighten / darken 是基於 hsl 明度變換,這個比較適合 button 按鈕的 normal 態和 hover 態變換,

saturate / desaturate 是基於 hsl 飽和度 變換,

然而生成的顏色很醜,不實用。

阿里的 ant design 早期版本使用了 tint / shade 色彩演算法,通過增加 白色(tint) 和 黑色(shade) 的佔比來生成系列色。

這個在專案中會更加實用,不過要注意新生成的顏色與文字對比度需滿足 wcag 2.0 對比度要求。

在色彩理論中,如果一種顏色與另一種顏色混合後,呈現中性的灰黑色,那麼這兩種顏色就互為補色。

好萊塢電影比較常用補色後期手法,強烈的互補色對比,能渲染出比較衝擊的視覺系氛圍。如下圖《天使愛美麗》海報的紅綠互補。

不過現在還沒用到這個函式,怕有點 hold 不住:)

顏色空間及顏色空間轉換

1.1 顏色空間介紹 rgb 顏色空間是大家最熟悉的顏色空間,即三基色空間,任何一種顏色都可以由該三種 顏色混合而成。然而一般對顏色空間的影象進行有效處理都是在 hsv 空間進行的,hsv 色 調 hue,飽和度 saturation,亮度 value 是根據顏色的直觀特性建立的一種顏色空間,也稱六...

python顏色指代 python 顏色定義

1.顏色定義說明 格式 033 顯示方式 前景色 背景色m 前景色 背景色 顏色 30 40 黑色 31 41 紅色 32 42 綠色 33 43 黃色 34 44 藍色 35 45 紫紅色 36 46 青藍色 37 47 白色 顯示方式 意義 0 終端預設設定 1 高亮顯示 4 使用下劃線 5 閃...

sass RGB顏色函式 RGB 顏色函式

在 sass 的官方文件中,列出了 sass 的顏色函式清單,從大的方面主要分為 rgb hsl 和 opacity 三大函式,當然其還包括一些其他的顏色函式,比如說 adjust color 和 change color 等。在這章節中,將主要和大家一起 sass 顏色函式中常見的 rgb hsl...