uView colorSwitch color conversion

RGB to hexadecimal Hex

#rgbToHex(rgb)

This function can convert an RGB color value into a Hex hexadecimal color value

  • rgb <String> RGB color value, such asrgb(230, 231, 233)
export default{
	data() {
		return {
			rgb: 'rgb(13, 145, 20)'
		}
	},
	onLoad() {
		console.log(uni.$u.rgbToHex(this.rgb));
	}
}

copy

#Hex Hex to RGB

#hexToRgb(hex)

This function can convert a Hex hexadecimal color value into an RGB color value

  • hex <String> HEx color value, such as#0afdce
export default{
	data() {
		return {
			hex: '#0afdce'
		}
	},
	onLoad() {
		console.log(uni.$u.hexToRgb(this.hex));
	}
}

copy

#colorgradient _

#colorGradient(startColor, endColor, step)

This function implements equal division between two color values ​​and returns an array. The elements are color values ​​in hexadecimal form, and the length of the array is stepthe value. For example: colorGradient('rgb(250, 250, 250)', 'rgb(252, 252, 252)', 3), the result is ["#fafafa", "#fafafa", "#fbfbfb"]

  • startColor <String> Start color value, which can be HEX or RGB color value, such as #0afdceorrgb(120, 130, 150)
  • endColor <String> End color value, which can be HEX or RGB color value, such as #0afdceorrgb(120, 130, 150)
  • step <Number> Average value, how many equal parts the start value and the end value are divided into
export default{
	onLoad() {
		console.log(uni.$u.colorGradient('rgb(250,250,250)', 'rgb(252,252,252)', 3));
		// 结果为:["#fafafa", "#fafafa", "#fbfbfb"]
	}
}

copy

#colortransparency _

#colorToRgba(color, opacity = 0.3)

This function can accept a color value of one 十六进制or rgbmore formats (named color formats cannot be accepted, for example ), and returns the format value whiteof this color , as follows:rgba

  • color <String> Color value, only hexor rgbaformat
  • opacity <Number> Opacity value, the value is between 0-1
uni.$u.colorToRgba('#000000', 0.35);
// 结果为 rgba(0, 0, 0, 0.35)

uni.$u.colorToRgba('rgb(255, 180, 0)', 0.4);
// 结果为 rgba(255, 180, 0, 0.4)

Guess you like

Origin blog.csdn.net/m0_72196169/article/details/135464385