色彩

Ucs Design 的设计团队采用 Arco 色彩模型进行设计，该模型更便于设计师在调整色彩时对于颜色有明确的心理预期，同时也方便团队间的沟通。

主题色

主题

primary

#604CFC

primary-1

#EFE8FF

primary-2

#D6C9FE

primary-3

#BCA9FE

primary-4

#9F8AFD

primary-5

#816BFD

primary-6

#604CFC

primary-7

#3C2FD0

primary-8

#2019A4

primary-9

#0B0978

primary-10

#00014D

辅助色

成功

success

#07C160

success-1

#E8FFEF

success-2

#B2F3C9

success-3

#81E6A8

success-4

#54DA8C

success-5

#2BCD74

success-6

#07C160

success-7

#04A457

success-8

#02874B

success-9

#016A3E

success-10

#004D2F

警告

warning

#EDA20C

warning-1

#FFFBE8

warning-2

#FBEEBA

warning-3

#F8DF8C

warning-4

#F4CD60

warning-5

#F1B836

warning-6

#EDA20C

warning-7

#C57F07

warning-8

#9D6004

warning-9

#754301

warning-10

#4D2900

危险

danger

#D9514C

danger-1

#FFEDE8

danger-2

#F7CEC5

danger-3

#F0AFA5

danger-4

#E88F85

danger-5

#E17068

danger-6

#D9514C

danger-7

#B63030

danger-8

#931A1E

danger-9

#700A11

danger-10

#4D0008

中性色

中性灰

grey

#a9aeb8

grey-1

#ffffff

grey-2

#f7f8fa

grey-3

#f2f3f5

grey-4

#e5e6eb

grey-5

#c9cdd4

grey-6

#a9aeb8

grey-7

#86909c

grey-8

#6b7785

grey-9

#4e5969

grey-10

#272e3b

grey-11

#1d2129

grey-12

#141414

内置色彩

Red / 浪漫红

red

#F53F3F

red-1

#FFECE8

red-2

#FDCDC5

red-3

#FBACA3

red-4

#F98981

red-5

#F76560

red-6

#F53F3F

red-7

#CB272D

red-8

#A1151E

red-9

#770813

red-10

#4D000A

Orange Red / 晚秋红

orangered

#F77234

orangered-1

#FFF3E8

orangered-2

#FDDDC3

orangered-3

#FCC59F

orangered-4

#FAAC7B

orangered-5

#F99057

orangered-6

#F77234

orangered-7

#CC5120

orangered-8

#A23511

orangered-9

#771F06

orangered-10

#4D0E00

Orange / 活力橙

orange

#FF7D00

orange-1

#FFF7E8

orange-2

#FFE4BA

orange-3

#FFCF8B

orange-4

#FFB65D

orange-5

#FF9A2E

orange-6

#FF7D00

orange-7

#D25F00

orange-8

#A64500

orange-9

#792E00

orange-10

#4D1B00

Gold / 黄昏

gold

#F7BA1E

gold-1

#FFFCE8

gold-2

#FDF4BF

gold-3

#FCE996

gold-4

#FADC6D

gold-5

#F9CC45

gold-6

#F7BA1E

gold-7

#CC9213

gold-8

#A26D0A

gold-9

#774B04

gold-10

#4D2D00

Yellow / 柠檬黄

yellow

#FADC19

yellow-1

#FEFFE8

yellow-2

#FEFEBE

yellow-3

#FDFA94

yellow-4

#FCF26B

yellow-5

#FBE842

yellow-6

#FADC19

yellow-7

#CFAF0F

yellow-8

#A38408

yellow-9

#785D03

yellow-10

#4D3800

Lime / 新生绿

lime

#9FDB1D

lime-1

#FCFFE8

lime-2

#EDF8BB

lime-3

#DCF190

lime-4

#C9E968

lime-5

#B5E241

lime-6

#9FDB1D

lime-7

#7EB712

lime-8

#5F940A

lime-9

#437004

lime-10

#2A4D00

Green / 仙野绿

green

#00B42A

green-1

#E8FFEA

green-2

#AFF0B5

green-3

#7BE188

green-4

#4CD263

green-5

#23C343

green-6

#00B42A

green-7

#009A29

green-8

#008026

green-9

#006622

green-10

#004D1C

Cyan / 碧涛青

cyan

#14C9C9

cyan-1

#E8FFFB

cyan-2

#B7F4EC

cyan-3

#89E9E0

cyan-4

#5EDFD6

cyan-5

#37D4CF

cyan-6

#14C9C9

cyan-7

#0DA5AA

cyan-8

#07828B

cyan-9

#03616C

cyan-10

#00424D

Blue / 海蔚蓝

blue

#3491FA

blue-1

#E8F7FF

blue-2

#C3E7FE

blue-3

#9FD4FD

blue-4

#7BC0FC

blue-5

#57A9FB

blue-6

#3491FA

blue-7

#206CCF

blue-8

#114BA3

blue-9

#063078

blue-10

#001A4D

Arco Blue / 极致蓝

arcoblue

#165DFF

arcoblue-1

#E8F3FF

arcoblue-2

#BEDAFF

arcoblue-3

#94BFFF

arcoblue-4

#6AA1FF

arcoblue-5

#4080FF

arcoblue-6

#165DFF

arcoblue-7

#0E42D2

arcoblue-8

#072CA6

arcoblue-9

#031A79

arcoblue-10

#000D4D

Purple / 暗夜紫

purple

#722ED1

purple-1

#F5E8FF

purple-2

#DDBEF6

purple-3

#C396ED

purple-4

#A871E3

purple-5

#8D4EDA

purple-6

#722ED1

purple-7

#551DB0

purple-8

#3C108F

purple-9

#27066E

purple-10

#16004D

Pink Purple / 青春紫

pinkpurple

#D91AD9

pinkpurple-1

#FFE8FB

pinkpurple-2

#F7BAEF

pinkpurple-3

#F08EE6

pinkpurple-4

#E865DF

pinkpurple-5

#E13EDB

pinkpurple-6

#D91AD9

pinkpurple-7

#B010B6

pinkpurple-8

#8A0993

pinkpurple-9

#650370

pinkpurple-10

#42004D

Magenta / 品红

magenta

#F5319D

magenta-1

#FFE8F1

magenta-2

#FDC2DB

magenta-3

#FB9DC7

magenta-4

#F979B7

magenta-5

#F754A8

magenta-6

#F5319D

magenta-7

#CB1E83

magenta-8

#A11069

magenta-9

#77064F

magenta-10

#4D0034

获取色彩API

温馨提示

使用 UCS 色彩变量，切换暗黑模式时则自动变更为深色颜色值。

getOsColor(options)

获取 Ucs Design 色彩模型内置色彩

options

参数名称	类型	必填	可选值	描述
color	string	是	-	`UCS 色彩变量` 或 `hex颜色值`

使用演示

script中使用template中使用

<script setup>
	import { getOsColor } from "@/uni_modules/ucs-config"; 
	/**
	 * 使用 UCS 色彩变量
	 * 浅色模式下获取值为：#604CFC
	 * 深色模式下获取值为：#8772FD
	 */
	console.log(getOsColor("primary")) 
	
	/**
	 * 使用 hex 颜色值
	 * 获取值为：#1890ff
	 */
	console.log(getOsColor("#1890ff")) 
</script>

vue

<template>
	<view>
	<!-- 使用内置色彩变量 -->
	<!-- 浅色模式下获取值为：#604CFC -->
	<!-- 深色模式下获取值为：#8772FD -->
	{{getOsColor("primary")}}
</view>
</template>

<script setup>
	import { getOsColor } from "@/uni_modules/ucs-config"; 
</script>

getOsTextColor(options)

获取文本颜色

options

参数名称	类型	必填	可选值	描述
color	string	是	色彩	`UCS 色彩变量` 或 `Hex 颜色值`

UCS 色彩变量Hex 颜色值

vue

<template>
	<text :style="[getOsTextColor('primary')]">
		欢迎使用 ucs-design 设计
	</text>
</template>

<script setup>
	import { getOsTextColor } from "@/uni_modules/ucs-config"; 
</script>

<style>
	
</style>

vue

<template>
	<text :style="[getOsTextColor('#604CFC')]">
		欢迎使用 ucs-design 设计
	</text>
</template>

<script setup>
	import { getOsTextColor } from "@/uni_modules/ucs-config"; 
</script>

<style>
	
</style>

getOsBackground(options)

获取背景颜色

options

参数名称	类型	必填	可选值	描述
color	string	是	色彩	`UCS 色彩变量` 或 `Hex 颜色值`

UCS 色彩变量Hex 颜色值

vue

<template>
	<view class="box" :style="[getOsBackground('primary')]">

	</view>
</template>

<script setup>
	import { getOsBackground } from "@/uni_modules/ucs-config"; 
</script>

<style>
	.box {
		width: 100%;
		height: 123px;
	}
</style>

vue

<template>
	<view class="box" :style="[getOsBackground('#604CFC')]">

	</view>
</template>

<script setup>
	import { getOsBackground } from "@/uni_modules/ucs-config"; 
</script>

<style>
	.box {
		width: 100%;
		height: 123px;
	}
</style>

getOsGradient(options)

获取渐变背景颜色

options

参数名称	类型	必填	可选值	描述
direction	string	是	direction 渐变方向	渐变方向
colorStart	string	是	色彩	`UCS 色彩变量` 或 `Hex 颜色值`
colorStop	string	是	色彩	`UCS 色彩变量` 或 `Hex 颜色值`

direction 渐变方向

参数值	描述
to right	从左向右渐变
to left	从右向左渐变
to bottom	从上到下渐变
to top	从下到上渐变
to bottom left	从右上角到左下角（3.99开始支持）
to bottom right	从左上角到右下角
to top left	从右下角到左上角
to top right	从左下角到右上角（3.99开始支持）

UCS 色彩变量Hex 颜色值

vue

<template>
	<view class="box" :style="[getOsGradient('to right','primary','success')]">

	</view>
</template>

<script setup>
	import { getOsGradient } from "@/uni_modules/ucs-config"; 
</script>

<style>
	.box {
		width: 100%;
		height: 123px;
	}
</style>

vue

<template>
	<view class="box" :style="[getOsGradient('to right','#604CFC','#07C160')]">

	</view>
</template>

<script setup>
	import { getOsGradient } from "@/uni_modules/ucs-config"; 
</script>

<style>
	.box {
		width: 100%;
		height: 123px;
	}
</style>

getOsBorder(options)

获取右边框属性

options 参数

参数名称	类型	必填	可选值	描述
direction	string	是	direction 边框方向	边框方向
width	string	是	-	边框宽度
style	string	是	solid、dashed、dotted	边框样式
color	string	是	色彩	`UCS 色彩变量` 或 `Hex 颜色值`

direction 边框方向

参数值	描述
all	全边框（四边）
top	上边框
bottom	下边框
left	左边框
right	右边框

边框样式

参数值	描述
none	和关键字 hidden 类似，不显示边框。在这种情况下，如果没有设定背景图片，border-width 计算后的值将是 0，即使先前已经指定过它的值。在单元格边框重叠情况下，none 值优先级最低，意味着如果存在其他的重叠边框，则会显示为那个边框。
solid	显示为一条实线
dashed	显示为一系列短的方形虚线。标准中没有定义线段的长度和大小，视不同实现而定
dotted	显示为一系列圆点。标准中没有定义两点之间的间隔大小，视不同实现而定。圆点半径是 border-width 计算值的一半

UCS 色彩变量Hex 颜色值

vue

<template>
	<view class="box" :style="[getOsBorder('all','2px','dotted','primary')]">

	</view>
</template>

<script setup>
	import { getOsBorder } from "@/uni_modules/ucs-config"; 
</script>

<style>
	.box {
		width: 123px;
		height: 123px;
	}
</style>

vue

<template>
	<view class="box" :style="[getOsBorder('all','2px','dotted','#604CFC')]">

	</view>
</template>

<script setup>
	import { getOsBorder } from "@/uni_modules/ucs-config"; 
</script>

<style>
	.box {
		width: 123px;
		height: 123px;
	}
</style>

色彩 ​

主题色 ​

辅助色 ​

中性色 ​

内置色彩 ​

获取色彩API ​

getOsColor(options) ​

options ​

使用演示 ​

getOsTextColor(options) ​

options ​

getOsBackground(options) ​

options ​

getOsGradient(options) ​

options ​

direction 渐变方向 ​

getOsBorder(options) ​

options 参数 ​

direction 边框方向 ​

边框样式 ​

色彩

主题色

辅助色

中性色

内置色彩

获取色彩API

getOsColor(options)

options

使用演示

getOsTextColor(options)

options

getOsBackground(options)

options

getOsGradient(options)

options

direction 渐变方向

getOsBorder(options)

options 参数

direction 边框方向

边框样式