香港地铁站点主题色的配色

本文已被阅读过 Posted by Liao Can on 2019-02-12

基于香港地铁站点的主题色的配色

介绍

香港地铁的每个站点都有自己的主题色,比较好看,可以作为配色的参考。
所有颜色的汇总:

总共87个颜色

配色色表

有人将它做成 CSS 色表,http://metrocolor.live/index.html

我这里把所有颜色代码值整理成为一个数组,可以直接复制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/**
* 产生随机颜色
*/
function randomColor() {

var colorArray = [ '#b51921','#b2103e','#c41832','#ef342a','#a84d18','#f68f26','#faca07'
,'#07594a','#4ba946','#5fc0a7','#0376c2','#c41832','#c41832','#be3223','#f45f7c','#d16f20','#ffd00d','#076750','#7abf45'
,'#75c7b9','#077cb0','#29409a','#ee1e4f','#d2174a','#f79d8b','#ce7020','#e9a519','#fddf55','#076a66','#a7c299','#098ec4'
,'#89d2e3','#7572a7','#f7b1bf','#f67e2a','#f57125','#fbaf37','#fde14e','#076c53','#b2d68c','#8fd1cd','#0798c7','#9597ca'
,'#69686d','#f47a25','#fcba5d','#f8d29d','#ffe285','#077e7a','#d0e4a9','#81cdc1','#22b6ed','#b4d6f2','#c077af','#bbbfc2'
,'#fed7a6','#fcae62','#ffe901','#078e82','#d7df3f','#89d3de','#22b6ed','#b295c5','#c5c4c9','#d1d5d8','#f2f1f6' ,'#efe946'
,'#fff455','#ffe901','#4c7020','#c4e0e1','#79bce7','#b7e1fa','#c7a7d2','#e5e4e9','#f2f1f6','#f2f2f6','#1fb27f','#b5a87f'
,'#07b195','#d7df3f','#6dade2','#4dc7ec','#a8b7d8','#b8a1a9','#f8c9cb','#f2f1f6']

//console.log(colorArray.length+"颜色个数")
var number = random(0, 87);
var color = colorArray[number]
return color;
}

随机产生颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array
("有趣", "运动", "坚持", "冥想", "自律","谦逊","自信");
var $i = $("<span/>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
var color = randomColor();
//console.log(color+'color')
$i.css({
"z-index": 5,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": color
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
3000,
function() {
$i.remove();
});
});
setTimeout('delay()', 2000);
});

function delay() {
$(".buryit").removeAttr("onclick");
}



/**
* 产生随机整数,包含下限值,但不包括上限值
* @param {Number} lower 下限
* @param {Number} upper 上限
* @return {Number} 返回在下限到上限之间的一个随机整数
*/
function random(lower, upper) {
return Math.floor(Math.random() * (upper - lower)) + lower;
}

使用效果

网站点击产生随机颜色的文字,如下图效果,可以直接点击网站体验


支付宝打赏 微信打赏

赞赏一下