[设计] 香港地铁站点主题色的配色

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

介绍

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

总共87个颜色

配色色表

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

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

/*** 产生随机颜色*/
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;
}

随机产生颜色


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;
}

使用效果

网站点击产生随机颜色的文字，如下图效果，可以直接点击网站(https://liaocan.top)体验

[设计] 香港地铁站点主题色的配色相关推荐

html积极向上的主题设计,css/less 实现动态更换主题色
固定主题色的切换思路:访问网页 => js读取缓存(判断是否有主题色的值,没有就默认皮肤,有则使用指定皮肤) => 用户点击换肤 => js切换对应的css样式文件即可 => ...
透明色的rgb值是多少_一文掌握PPT主题色原理及使用技巧
做PPT颜色该如何搭配?毋庸置疑,这是PPT设计中的难点问题!对色彩的使用的确让很多人头疼和纠结,但难的事情找到了规律也就不怕了. 5 如何设置元素的色彩? 我们如何在PPT中设置元素的色彩呢?概况起 ...
C#/.Net Core/WPF框架初建(国际化、主题色)
English | 简体中文作为 TerminalMACS 的一个子进程模块 - WPF管理端,目前搭建框架部分功能:本地化.国际化.主题色修改等. 导航目录 1.框架已添加功能说明 1.1. 国际 ...
Asp.net Ajax Control Toolkit设计编程备忘录（色眼窥观版）——第5回(错不了专辑)
色即设--设计,从网页设计师的角度出发.因为自己的的特殊性(本身是软件工程师,但是对网页设计却有浓厚的兴趣),所以我的此系列文章不仅仅从编程角度出发,还将从设计的角度出发来细数AjaxControlT ...
c# contains方法_C#/.Net Core/WPF框架初建(国际化、主题色)
C#/.Net Core/WPF框架初建(国际化.主题色) English | 简体中文作为 TerminalMACS 的一个子进程模块 - WPF管理端,目前搭建框架部分功能:本地化.国际化.主题 ...
Asp.net Ajax Control Toolkit设计编程备忘录（色眼窥观版）——第3回(UE专辑)
前言: 色即设--设计,从网页设计的角度出发.因为自己的的特殊性(本身是软件工程师,但是对网页设计却有浓厚的兴趣),所以此系列文章不仅仅从编程角度出发,还将从设计的角度出发来细数AjaxControl ...
博客相关 | 如何获取图片主题色并修改字体颜色
今天在写博客的时候,做了一个封面图,然后hexo cl && hexo g && gulp && hexo s一键生成,点开后却发现这个标题的字体颜色亮 ...
Android材料设计之材料主题
Android材料设计之材料主题 Android Material Design Theme Android 主题前言在上一篇文章<Android材料设计>一文中,对Android材料 ...
react 修改antd主题色
antd的主题色默认是蓝色的,但是看到官网上有很多配色很好看,所以想换个颜色试试,官网提供的色系: 安装antd less less-loader babel依赖 npm i antd less le ...

[设计] 香港地铁站点主题色的配色

介绍

配色色表

随机产生颜色

使用效果

[设计] 香港地铁站点主题色的配色相关推荐

最新文章

热门文章