UI前端常用的15个超赞的配色网站

中国风配色

zhongguose.com

超美的中国风配色,网站号称收集了最全的中国色,还有中英文互译,非常贴心,五星好评。

日本传统配色

nipponcolors.com

日本传统色彩,无需多说,文艺又古风,值得收藏。

Colrd

colrd.com

用户可以自己上传图片与配色方案。看到喜欢的配色,就可以保存下来。

就连图片的来源都有标注,非常方便。

Adobe Color CC

color.adobe.com

超全的配色方案。还能自己通过色轮,搭配配色方案。

uiGradients

uigradients.com

做渐变配色专用的网站,色值什么的非常全。每个颜色还有一个超美的名字,来来感受一波~

WebGradients

webgradients.com

这个网站也是以渐变色彩出名,只不过整体风格偏柔和,看起来很干净。

Colorexplorer

colorexplorer.com

一款可以上传图片,自动检测色值的线上工具,亲测好用。

Colorfavs

www.colorfavs.com

跟Colorexplorer同类型的网站,就是这个Colorfavs,可以上传图片来分析配色。

Palettable

www.palettable.io

可以自己随意搭配色彩方案的网站。

€€

在进入网页时,会随机推荐颜色,用户只需要选择喜欢or不喜欢,直到搭配出想要的色板。

reeoo.com

通过颜色搜索,为用户提供APP,网页设计,平面设计,书籍设计,ICON等精彩案例。

比如说点击紫色,页面会跳出主色调为紫色的网站、APP设计。

ColorSupply

colorsupplyyy.com

这个网站非常适合扁平化配色方案,先来感受一波颜色。

Paletton

paletton.com

用户通过设定一个颜色,通过网站的选项和微调参数,生成一套配色方案。

Color Hunt

www.colorhunt.co

网站实时更新不同的配色方案,并会按照受欢迎程度排列。

LOL Colors

lolcolors.com

非常可爱的多彩配色网站,鼠标移动到不同颜色的水滴上会有色彩代码(Hex Code)的颜色值。

colourco/colordot

www.colourco.de

网页区域内随意滑动鼠标,可以产生不同的色彩。确定一个色彩,再随意滑动产生下一个色彩,直到找到自己满意的配色。

  • 9
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
好的,我们来写一个简单的前端网站页面,使用的是 Vue.js 和 Element UI 组件库。 首先,我们需要在 HTML 文件中引入 Vue.js 和 Element UI 的 CSS 和 JavaScript 文件: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Element UI Example</title> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body> <div id="app"></div> </body> </html> ``` 接下来,我们来编写 Vue.js 的代码,将 Element UI 的组件添加到页面中。这里我们创建一个简单的表格,并使用 Element UI 的 Table 组件。 ```html <div id="app"> <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="gender" label="性别"></el-table-column> </el-table> </div> ``` ```javascript var app = new Vue({ el: '#app', data: { tableData: [ { name: '张三', age: 18, gender: '男' }, { name: '李四', age: 20, gender: '女' }, { name: '王五', age: 22, gender: '男' } ] } }); ``` 以上代码定义了一个 Vue 实例,并在该实例中定义了一个名为 tableData 的数组,用于存储表格数据。然后,我们将这个数组传递给 Table 组件的 data 属性。 现在,我们可以在浏览器中查看这个页面,看到一个简单的表格。这就是使用 Vue.js 和 Element UI 组件库创建的前端网站页面。 完整代码如下: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Element UI Example</title> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body> <div id="app"> <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="gender" label="性别"></el-table-column> </el-table> </div> <script> var app = new Vue({ el: '#app', data: { tableData: [ { name: '张三', age: 18, gender: '男' }, { name: '李四', age: 20, gender: '女' }, { name: '王五', age: 22, gender: '男' } ] } }); </script> </body> </html> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

代码讲故事

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值