{{item}}
8 |
10 |
12 | 13 | {{author}} 14 |
15 |17 | {{email}} 18 |
19 |20 | Designed By Coding 21 |
22 |CSS 颜色值
Web 安全色
Gray 灰度值
{{item.hex}}
6 |{{item.name}}
6 |{{item.hex}}
7 |{{item.name}}
6 |{{item.hex}}
7 |{{item.name}}
7 | 8 |Color
4 |颜值
5 |配色广场
8 |颜色转换
9 |色彩工具
10 |Web颜色
11 |关于颜值
12 |{{item.name}}
12 |{{item.name}}
12 |Surprise Me
14 |{{item}}
8 |13 | {{author}} 14 |
15 |17 | {{email}} 18 |
19 |20 | Designed By Coding 21 |
22 |{{name}}
4 |R: {{item.rgb[0]}}
9 |H: {{item.hsb[0]}}
10 |G: {{item.rgb[1]}}
13 |S: {{item.hsb[1]}}%
14 |B: {{item.rgb[2]}}
17 |B: {{item.hsb[2]}}%
18 |收藏
24 |复制
25 |复制
30 |编辑
31 |删除
32 |{{color1}}
7 |{{color2}}
11 |{{color3}}
15 |{{color4}}
19 |{{color5}}
23 |命名：
27 | 28 |1、配色名称仅支持中文、英文和数字。
31 |2、配色名称限定20个字符以内。
32 |3、相同名称的配色方案会被覆盖。
33 |保存
35 |Web标准的网络安全色一共有216种，是当计算机运行 256 色调色板时能够正确地显示颜色。
6 |256色里有40种颜色在Mac和Windows显示效果不同，所以安全色只有216色。
7 |{{color_array[item]}}
16 |{{color_array[item + 1]}}
20 |{{color_array[item + 2]}}
24 |
48 |
--------------------------------------------------------------------------------
/pages/web/webcolor/webcolor.js:
--------------------------------------------------------------------------------
1 | // Web安全色
2 | const { preventDoubleClick, onShare, range } = require('../../../utils/functions.js');
3 |
4 | Page({
5 |
6 | /**
7 | * 页面的初始数据
8 | */
9 | data: {
10 | color_array: new Array(),
11 | index_array: new Array()
12 | },
13 |
14 | onShow: function () {
15 | let array = new Array;
16 | for (let i = 0; i <= 255; i += 51) {
17 | let red = new Number(i);
18 | red = red.toString(16);
19 | red = this.numberFix(red);
20 |
21 | for (let j = 0; j <= 255; j += 51) {
22 | let green = new Number(j);
23 | green = green.toString(16);
24 | green = this.numberFix(green);
25 |
26 | for (let k = 0; k <= 255; k += 51) {
27 | let blue = new Number(k);
28 | blue = blue.toString(16);
29 | blue = this.numberFix(blue);
30 |
31 | let color = "#" + red + green + blue;
32 | array.push(color);
33 | }
34 | }
35 | }
36 |
37 | this.setData({
38 | color_array: array,
39 | index_array: range(72)
40 | });
41 | },
42 |
43 | numberFix: function (a) {
44 | if (a.length == 1) {
45 | return "0" + a;
46 | }
47 | return a;
48 | },
49 |
50 | click: function (e) {
51 | if (!this.data.buttonClicked) {
52 | preventDoubleClick(this);
53 | const color = e.currentTarget.dataset.color;
54 | wx.navigateTo({
55 | url: '/pages/web/colordetail?color=' + color,
56 | });
57 | }
58 | },
59 |
60 | onShareAppMessage: function (res) {
61 | return onShare("Web安全色参考");
62 | }
63 | })
--------------------------------------------------------------------------------
/pages/plaza/myfav.js:
--------------------------------------------------------------------------------
1 | // pages/plaza/myfav.js
2 |
3 | const { httpPost, httpGet, preventDoubleClick } = require('../../utils/functions.js');
4 | const { GET_USER_COLORS } = require('../../utils/constant.js');
5 |
6 | Page({
7 |
8 | /**
9 | * 页面的初始数据
10 | */
11 | data: {
12 | width: 0,
13 | colors: new Array
14 | },
15 |
16 | /**
17 | * 生命周期函数--监听页面加载
18 | */
19 | onLoad: function (options) {
20 | const res = wx.getSystemInfoSync();
21 | this.setData({
22 | width: (res.windowWidth - 30) / 5
23 | });
24 | },
25 |
26 | onShow: function () {
27 | const cust_id = wx.getStorageSync('cust_id');
28 | const openid = wx.getStorageSync('openid');
29 | const url = GET_USER_COLORS + '?cust_id=' + cust_id + '&openid=' + openid;
30 | const that = this;
31 | httpGet(url).then(data => {
32 | if (data.code == 0) {
33 | that.setData({
34 | colors: data['data']
35 | });
36 | }
37 | });
38 | },
39 |
40 | detail: function (event) {
41 | if (!this.data.buttonClicked) {
42 | preventDoubleClick(this);
43 | const index = event.currentTarget.dataset.index;
44 | const name = this.data.colors[index].name;
45 | const id = this.data.colors[index].id;
46 | const color1 = this.data.colors[index].color1;
47 | const color2 = this.data.colors[index].color2;
48 | const color3 = this.data.colors[index].color3;
49 | const color4 = this.data.colors[index].color4;
50 | const color5 = this.data.colors[index].color5;
51 | wx.navigateTo({
52 | url: '/pages/plaza/detail?source=my&id=' + id + '&name=' + name + '&color1=' + color1 + '&color2=' + color2 + '&color3=' + color3 + '&color4=' + color4 + '&color5=' + color5
53 | });
54 | }
55 | }
56 | })
--------------------------------------------------------------------------------
/pages/web/colordetail.js:
--------------------------------------------------------------------------------
1 | // 颜色详情
2 | // pages/common/colordetail.js
3 | const colors = require('../../utils/colors.js');
4 | const { onShare } = require('../../utils/functions.js');
5 |
6 | Page({
7 |
8 | /**
9 | * 页面的初始数据
10 | */
11 | data: {
12 | name: 0,
13 | hex: 0,
14 | },
15 |
16 | /**
17 | * 生命周期函数--监听页面加载
18 | */
19 | onLoad: function (options) {
20 | if (options.color == undefined) {
21 | wx.navigateBack({
22 | delta: 1
23 | });
24 | }
25 |
26 | const hex = options.color;
27 | const name = options.name == undefined ? '色彩分量' : options.name;
28 | const rgb = colors.hex2rgb(hex);
29 | const hsb = colors.rgb2hsb(rgb[0], rgb[1], rgb[2]);
30 | const lab = colors.rgb2lab(rgb[0], rgb[1], rgb[2]);
31 | const cmyk = colors.rgb2cmyk(rgb[0], rgb[1], rgb[2]);
32 |
33 | this.setData({
34 | hex: hex,
35 | name: name,
36 | red: rgb[0],
37 | green: rgb[1],
38 | blue: rgb[2],
39 | hue: hsb[0],
40 | saturation: hsb[1],
41 | brightness: hsb[2],
42 | luminosity: lab[0],
43 | a: lab[1],
44 | b: lab[2],
45 | cyan: cmyk[0],
46 | magenta: cmyk[1],
47 | yellow: cmyk[2],
48 | black: cmyk[3],
49 | });
50 | },
51 |
52 | onReady: function () {
53 | wx.setNavigationBarTitle({
54 | title: this.data.name
55 | });
56 | },
57 |
58 | copy: function () {
59 | wx.setClipboardData({
60 | data: this.data.name + ', HEX: ' + this.data.hex,
61 | success: function (res) {
62 | wx.showToast({
63 | title: '复制HEX值成功',
64 | });
65 | }
66 | })
67 | },
68 |
69 | onShareAppMessage: function () {
70 | return onShare(this.data.name + '的各颜色分量');
71 | }
72 | })
--------------------------------------------------------------------------------
/pages/web/csscolor/csscolor.wxml:
--------------------------------------------------------------------------------
1 |
2 | HTML 和 CSS 颜色规范中定义了 147 中颜色名（17 种标准颜色加 130 种其他颜色）。下面的表格中列出了所有这些颜色，以及它们的十六进制值。
6 |点击来查看相应颜色的详细分量值。
7 || 颜色名 | 14 |HEX值 | 15 |预览 | 16 |
| {{item.name}} | 20 |{{item.hex}} | 21 |22 | |
| 颜色名 | 31 |HEX值 | 32 |预览 | 33 |
| {{item.name}} | 37 |{{item.hex}} | 38 |39 | |
{{item.hex}}
8 |R:
20 |G:
24 |B:
28 |饱和度
32 |亮度
36 |命名：
5 | 6 |{{item.hex}}
13 |R:
25 |G:
29 |B:
33 |饱和度
37 |亮度
41 |保存
45 |R:
6 |G:
10 |B:
14 |饱和度
18 |亮度
22 |基准色
27 | 28 |{{hex}}
29 |32 | 配比色组 33 |
34 |R:
6 |G:
10 |B:
14 |调整
18 |比例
25 |基准色
30 | 31 |{{hex}}
32 |35 | 渐变色组 36 |
37 |R:
6 |G:
10 |B:
14 |基准色
19 | 20 |{{hex}}
21 |24 | 分裂补色 25 |
26 |42 | 调整补色 43 |
44 |饱和度
46 |亮度
50 |R:
6 |G:
10 |B:
14 |基准色
19 | 20 |{{hex}}
21 |24 | 单色组 25 |
26 |42 | 调整单色 43 |
44 |饱和度
46 |亮度
50 |R:
6 |G:
10 |B:
14 |基准色
19 | 20 |{{hex}}
21 |24 | 辅色 + 补色组 25 |
26 |42 | 调整补色 43 |
44 |饱和度
46 |亮度
50 |R:
6 |G:
10 |B:
14 |角度:
18 |基准色
23 | 24 |{{hex}}
25 |28 | 类比色组 29 |
30 |46 | 调整类比色 47 |
48 |饱和度
50 |亮度
54 |{{hex}}
6 |RGB分量
11 |R:
G:
B:
CMYK分量
28 |C:
M:
Y:
K:
Lab分量
51 |L:
a:
b:
HSB分量
68 |H:
S:
B:
模式选择
5 |7 | {{mode[index]}} 8 | 9 |
10 |R:
15 |G:
20 |B:
25 |C:
32 |M:
37 |Y:
42 |K:
47 |L:
54 |a:
59 |b:
64 |H:
71 |S:
76 |B:
81 |#
88 | 89 |预览
94 | 95 |{{hex}}
96 |RGB分量
103 |R:
106 |{{red}}
G:
112 |{{green}}
B:
118 |{{blue}}
CMYK分量
126 |C:
129 |{{cyan}}%
M:
135 |{{magenta}}%
Y:
141 |{{yellow}}%
K:
147 |{{black}}%
Lab分量
157 |L:
160 |{{luminosity}}
a:
166 |{{a}}
b:
172 |{{b}}
HSB分量
180 |H:
183 |{{hue}}%
S:
189 |{{saturation}}%
B:
195 |{{brightness}}%