整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

为网页着色 - 面向设计师的色彩工具

CSSDA 工作人员整理

网页设计中的颜色趋势来来去去,但是好的色彩工具呢?我们认为是时候在网络上四处走动,并检查设计师色彩工具世界的运行状态了。结果呢?事实证明,有一些非常酷的新方法来体验颜色,你可能想看看。在本综述中,我们汇总了目前可用的最佳色彩工具以及一些有史以来的经典。

  • 1. 冰雹像素

    Hailpixel提供了一种精美简单的方法来查找颜色值并探索光谱。移动鼠标以浏览或使用箭头键和滚动。Hailpixel由Devin Hunt设计,Devin Hunt是一位设计师和企业家,专注于设计,技术和创业的交叉点。

  • 2. Adobe Color CC

    从最简单的颜色工具到最全面的颜色工具之一,Adobe的Color CC(以前称为Kuler)允许您浏览数千种配色方案,使用色轮创建自己的配色方案并与社区共享。

  • 3. 材料调色板

    一个材料设计调色板生成器,允许您选择自己喜欢的颜色,并生成和下载您的材料设计调色板。

  • 4. 0到255

    假设您是一个经常使用颜色的网页设计师,您需要在悬停状态下使链接变亮或使按钮的边框变暗。根据创作者肖恩·查普曼(Shaun Chapman)的说法,0to255是适合您的工具。当然,对于基本颜色,您可能会依赖内存来存储十六进制代码,但是使用0to255,您可以选择要开始的颜色,并使用针对网页设计优化的间隔接收从黑色到白色的一系列颜色。然后,只需单击要使用的变体,十六进制代码就会自动复制到剪贴板。

  • 5. 147色

    有时,掌握基础知识会有所帮助。147种颜色是Brian Maier的心血结晶,旨在帮助网页设计师和开发人员学习HTML和CSS颜色规范中定义的147种颜色。147 种颜色由 17 种标准色和 130 种颜色组成。该值是颜色的名称,而不是十六进制值或 RGB 值。单击所有颜色的网格,单击小刷新图标以全屏获取新颜色。

  • 6. 快门光谱

    Shutterstock Spectrum 根据您在屏幕顶部滑块中选择的颜色显示大小适中的图像,非常方便获得一些横向灵感。您可以添加关键字以提高主题的准确性,并按亮度和平衡过滤图像。

  • 7. 冷却器

    要使用Coolors,只需点击空格键即可生成配色方案,然后单击颜色以获取组合。一些漂亮的调整工具和易于访问的撤消和导出按钮使冷却器使用起来轻而易举。由Web/app设计师和开发人员Fabrizio Bianchi创建。

  • 8. 科尔德

    Colrd允许您通过调色板,渐变,图案和图像创建和共享颜色灵感。Colrd呈现精美且易于使用,由一组色彩科学家为您带来,他们专注于寻找在网络上体验色彩的新方法。

  • 9. 帕莱顿

    Paletton似乎永远存在(以一种好的方式),但实际上是在2002年推出的。Paletton与其他颜色生成器(如上面提到的Adobe的Color CC)共享一些功能,但是您也可以从配色方案中选择颜色,并有效地“挖掘”以找到新的颜色可能性。

  • 10. 彩色齐拉

    ColorZilla于2004年推出,是Firefox和Chrome的扩展,具有先进的吸管,颜色选择器,颜色分析器和其他好东西,而Ultimate Gradient Generator则提供了一个类似Photoshop的在线CSS渐变编辑器以及图像到CSS转换器等。

  • 11. 方格米色

    Checkmycolors 是一种工具,用于检查所有 DOM 元素的前景色和背景色组合,并确定当遇到颜色缺陷的人查看时,它们是否提供足够的对比度。

  • 12. hexu.al

    Hexu.al 以单词的形式呈现十六进制值及其含义。嗯?例如,十六进制值#abaca5变成了单词abacas,顺便说一句,这显然是来自菲律宾的大型植物。由Zach Wolf设计和开发。

  • 13. 设计种子

    如果你有一个需要柔和的大地色调的项目,Design Seeds值得一游。Design Seeds庆祝自然界中发现的颜色,于2009年推出,因此它有很多灵感。

  • 14. 色氨酸盐

    Colorotate也可作为iPad应用程序使用,是一款主要用于创建调色板的工具,此外,您还可以浏览现有调色板,然后添加,混合和共享。Colorotate与其他类似产品的不同之处在于3D风格的色轮,并允许在调色板中使用五种以上颜色。

  • 15. 颜色六

    ColorHexa 提供有关任何颜色的信息。只需在搜索字段中键入颜色值,ColorHexa就会提供详细的描述,并自动将其转换为十六进制,二进制,RGB,CMYK,HSL,HSV,CIE-Lab,Hunter-Lab,CIE-Luv,CIE-LCH,XYZ和xyY的等效值。ColorHexa还将生成匹配的配色方案,例如互补,拆分互补,类似,三色,四色和单色颜色。

  • 16. 科洛尔菲

    没有COLOURlovers,任何颜色工具综述都是不完整的,COLOURlovers是您应该已经了解的经典资源。用户创建的超过800万种颜色,370万调色板和470万种图案,您很可能会找到有用的东西。毕竟,Twitter上超过150万粉丝不会错;)

  • 17. 对比度-A

    Contrast-A是另一个“老古董但好东西”,由Annika Hamann(DasPlankton)于2009年1月创建。这个有趣的工具允许用户试验颜色组合,根据辅助功能指南检查它们并创建自定义调色板。Contrast-A 检查颜色组合的对比度是否可接受,并根据 WCAG 2.0(亮度比)以及较旧的辅助功能指南显示结果。

  • 18. 拾色器

    不喜欢复杂的工具?不用担心,拾色器可能只是你的东西。只需单击表单字段即可激活色轮,或者只需输入所需的十六进制值,拾色器就会提取免费颜色,三元组颜色和四元颜色。如果你想要一些无意识的娱乐,那么点击随机按钮,重复,重复,重复,重复;)

这在我们为设计师寻找最佳色彩工具时结束。我们希望您找到一些感兴趣的东西,并记得分享它们,以帮助创作者对创建这些有用的工具并免费提供它们感到一些爱。

编辑:尘渊文化

、需求描述

人们的生活越过越丰富多彩。可是家里珍藏已久的旧相册,经过岁月的冲洗边角旮旯儿已泛黄。旧照片是对过往岁月的真实记录,爷爷奶奶年轻时的相貌,衣着、神态,遵循着过去的潮流和规范。去年,百度联合新华社献礼改革开放40周年,发起“给旧时光上色”活动,借助AI的力量,“唤醒”爷爷奶奶手中的黑白老照片,让每个人看到那个年代最真实的景象。

其实,借助百度【黑白图像上色】技术,不仅可以给老照片上色,还能给黑白水墨画等上色,让大家体验一把不一样的水墨画,也是一种新奇的感受。

当然,如果能够给一整篇的【黑白漫画】上色,输出【彩色漫画】,那这个【黑白图像上色】技术在这方面会有很大的作为的,相信会受到很多漫画爱好者的喜爱。

或者可以换个思维,对于【漫画制作】这块,应该是先画出黑白轮廓,然后给图片上色,如果合理利用百度【黑白图像上色】技术,那么在画出黑白轮廓后,参考百度【黑白图像上色】技术处理后的图片,然后再调整颜色的深浅明暗,这样可以大大降低漫画【上色】的工作量,提高漫画【上色】的效率,制作出更加精致的漫画。

另外,像儿童读物等文章都会有【插画】,可以利用【黑白图像上色】技术,给文章的【黑白插画】上色,提供更加好看的【彩色插画】。

二、使用攻略

说明:本文采用C# 语言,开发环境为.Net Core 2.1,采用在线API接口方式实现。

(1)平台接入

登陆 百度智能云-管理中心 创建 “图像处理”应用,获取 “API Key ”和 “Secret Key” :https://console.bce.baidu.com/ai/#/ai/imageprocess/overview/index

(2)接口文档

文档地址:https://ai.baidu.com/docs#/ImageProcessing-API/27271a5c

接口描述:智能识别黑白图像内容并填充色彩,使黑白图像变得鲜活。

请求说明

请求示例

HTTP 方法:POST

请求URL: https://aip.baidubce.com/rest/2.0/image-process/v1/colourize

URL参数:

参数	 值
access_token	通过API Key和Secret Key获取的access_token,参考”Access Token获取”

Header如下:

参数	 值
Content-Type	application/x-www-form-urlencoded

Body中放置请求参数,参数详情如下:

请求参数

参数	是否必选	 类型	 可选值范围	说明
image	 true	 string -	base64编码后大小不超过4M,最短边至少64px,最长边最大800px,长宽比3:1以内。注意:图片的base64编码是不包含图片头的,如(data:image/jpg;base64,)

返回说明

返回参数

字段	是否必选 类型	 说明
log_id	 是	 uint64	 唯一的log id,用于问题定位
image	 否	 string	 base64编码图片

返回示例

{
"log_id": "6876747463538438254",
"image": "处理后图片的Base64编码"
}

(3)源码共享

3.1-根据 API Key 和 Secret Key 获取 AccessToken

 /// 
 /// 获取百度access_token
 /// 
 /// API Key
 /// Secret Key
 /// 
 public static string GetAccessToken(string clientId, string clientSecret)
 {
 string authHost = "https://aip.baidubce.com/oauth/2.0/token";
 HttpClient client = new HttpClient();
 List> paraList = new List>();
 paraList.Add(new KeyValuePair("grant_type", "client_credentials"));
 paraList.Add(new KeyValuePair("client_id", clientId));
 paraList.Add(new KeyValuePair("client_secret", clientSecret));
 HttpResponseMessage response = client.PostAsync(authHost, new FormUrlEncodedContent(paraList)).Result;
 string result = response.Content.ReadAsStringAsync().Result;
 JObject jo = (JObject)JsonConvert.DeserializeObject(result);
 string token = jo["access_token"].ToString();
 return token;
 }

3.2-调用API接口获取识别结果

1、在Startup.cs 文件 的 Configure(IApplicationBuilder app, IHostingEnvironment env) 方法中开启虚拟目录映射功能:

 string webRootPath = HostingEnvironment.WebRootPath;//wwwroot目录
 app.UseStaticFiles(new StaticFileOptions
 {
 FileProvider = new PhysicalFileProvider(
 Path.Combine(webRootPath, "Uploads", "BaiduAIs")),
 RequestPath = "/BaiduAIs"
 });

2、 建立Index.cshtml文件

2.1 前台代码:

由于html代码无法原生显示,只能简单说明一下:

主要是一个form表单,需要设置属性enctype="multipart/form-data",否则无法上传图片;

form表单里面有两个控件:

一个Input:type="file",asp-for="FileUpload" ,上传图片用;

一个Input:type="submit",asp-page-handler="Colourize" ,提交并返回识别结果。

一个img:src="@Model.curPath",显示需要上色的图片。

一个img:src="@Model.imgProcessPath",显示上色后的图片。

最后显示后台 msg 字符串列表信息,如果需要输出原始Html代码,则需要使用@Html.Raw()函数。

2.2 后台代码:

 [BindProperty]
 public IFormFile FileUpload { get; set; }
 private readonly IHostingEnvironment HostingEnvironment;
 public List msg = new List();
 public string curPath { get; set; }
 public string imgProcessPath { get; set; }
 public BodySearchModel(IHostingEnvironment hostingEnvironment)
 {
 HostingEnvironment = hostingEnvironment;
 }
 public async Task OnPostColourizeAsync()
 {
 if (FileUpload is null)
 {
 ModelState.AddModelError(string.Empty, "本地图片!");
 }
 if (!ModelState.IsValid)
 {
 return Page();
 }
 msg = new List();
 string webRootPath = HostingEnvironment.WebRootPath;//wwwroot目录
 string fileDir = Path.Combine(webRootPath, "Uploads//BaiduAIs//");
 string imgName = await UploadFile(FileUpload, fileDir);
 string fileName = Path.Combine(fileDir, imgName);
 string imgBase64 = GetFileBase64(fileName);
 curPath = Path.Combine("/BaiduAIs/", imgName);//需在Startup.cs 文件 的 Configure(IApplicationBuilder app, IHostingEnvironment env)方法中开启虚拟目录映射功能
 string result = GetImageProcessJson(imgBase64, “你的API KEY”, “你的SECRET KEY”);
 JObject jo =(JObject)JsonConvert.DeserializeObject(result);
 try
 {
 string imageProcessBase64 = jo["image"].ToString();
 msg.Add("log_id:" + jo["log_id"].ToString());
 string processImgName = Guid.NewGuid().ToString("N") + ".png";
 string imgSavedPath = Path.Combine(webRootPath, "Uploads//BaiduAIs//", processImgName);
 imgProcessPath = Path.Combine("/BaiduAIs/", processImgName);
 await GetFileFromBase64(imageProcessBase64, imgSavedPath);
 }
 catch(Exception e1)
 {
 msg.Add(result);
 }
 return Page();
 }
 /// 
 /// 上传文件,返回文件名
 /// 
 /// 文件上传控件
 /// 文件绝对路径
 /// 
 public static async Task UploadFile(IFormFile formFile, string fileDir)
 {
 if (!Directory.Exists(fileDir))
 {
 Directory.CreateDirectory(fileDir);
 }
 string extension = Path.GetExtension(formFile.FileName);
 string imgName = Guid.NewGuid().ToString("N") + extension;
 var filePath = Path.Combine(fileDir, imgName);
 using (var fileStream = new FileStream(filePath, FileMode.Create, FileAccess.Write))
 {
 await formFile.CopyToAsync(fileStream);
 }
 return imgName;
 }
 
 /// 
 /// 返回图片的base64编码
 /// 
 /// 文件绝对路径名称
 /// 
 public static String GetFileBase64(string fileName)
 {
 FileStream filestream = new FileStream(fileName, FileMode.Open);
 byte[] arr = new byte[filestream.Length];
 filestream.Read(arr, 0, (int)filestream.Length);
 string baser64 = Convert.ToBase64String(arr);
 filestream.Close();
 return baser64;
 }
 /// 
 /// 文件base64解码
 /// 
 /// 文件base64编码
 /// 生成文件路径
 public static async Task GetFileFromBase64(string base64Str, string outPath)
 {
 var contents = Convert.FromBase64String(base64Str);
 using (var fs = new FileStream(outPath, FileMode.Create, FileAccess.Write))
 {
 fs.Write(contents, 0, contents.Length);
 fs.Flush();
 }
 }
 /// 
 /// 图像处理Json字符串
 /// 
 /// 图片base64编码
 /// API Key
 /// Secret Key
 /// 
 public static string GetImageProcessJson(string strbaser64, string clientId, string clientSecret)
 {
 string token = GetAccessToken(clientId, clientSecret);
 string host = "https://aip.baidubce.com/rest/2.0/image-process/v1/colourize?access_token=" + token;
 Encoding encoding = Encoding.Default;
 HttpWebRequest request = (HttpWebRequest)WebRequest.Create(host);
 request.Method = "post";
 request.KeepAlive = true;
 string str = "image=" + HttpUtility.UrlEncode(strbaser64);
 byte[] buffer = encoding.GetBytes(str);
 request.ContentLength = buffer.Length;
 request.GetRequestStream().Write(buffer, 0, buffer.Length);
 HttpWebResponse response = (HttpWebResponse)request.GetResponse();
 StreamReader reader = new StreamReader(response.GetResponseStream(), Encoding.Default);
 string result = reader.ReadToEnd();
 return result;
 }

三、效果测试

1、页面:

2、识别结果:

2.1

2.2

2.3

2.4

2.5

四、产品建议

1、试了好几张黑白图片,发现百度的【黑白图片上色】技能给山水、建筑物等实物上色会比较鲜艳,结果也比较满意,而对于纯植物、人物素描等黑白图片则喜欢涂上【红色】,变化不是很大,这方面可能需要再改进一下。

2、如果能够降低对输入图片的大小、长宽的限制,就更好了。

3、如果能给【黑白图像】涂上不同的颜色,然后让用户选择自己喜欢的那张,那就更加好了,毕竟每个人的审美观念不同,喜欢的图片颜色也不一样的。

4、若【黑白图像上色】可以输出多个不同颜色的结果,那么就可以应用到【漫画制作】中去,在漫画完成【线稿】后,可以利用百度【黑白图像上色】技术,提供不用颜色的【上色图】,为漫画【上色】这一步骤提供参考,大大降低【上色】的难度,提高【上色】效率,最终制作出更加精致的【漫画】。

5、可以尝试开发【批量黑白图像】处理功能的应用,比如对一个压缩包、对一个文件夹内的所有图片进行【上色】处理,然后批量输出结果,这样就可以对【黑白漫画】进行【上色】处理,“制作”出【彩色漫画】了。

6、一般像儿童读物等文章都会有【插画】,可以利用【黑白图像上色】技术,给文章的【黑白插画】上色,提供更加好看的【彩色插画】。

原文链接:https://ai.baidu.com/forum/topic/show/953084

变文字h1{
background-image: linear-gradient(to right,
#c6ffdd, #fbd786, #f7797d);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}

修改 media defaults

编写css重置时,添加这些属性以改善媒体默认值。

img, picture, video, svg {
  max-width: 100%;
  object-fit: contain;  /* preserve a nice aspect-ratio */
}

column count

使用列属性为文本元素制作漂亮的列布局。

p{
  column-count: 3;
  column-gap: 5rem;          
  column-rule: 1px solid salmon; /* border between columns */
}

使用 position 居中元素div{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
逗号分隔的列表li:not(:last-child)::after{
content:
',';
}

平滑的滚动 html {
scroll-behavior: smooth;
}

hyphens

hyphens 告知浏览器在换行时如何使用连字符连接单词。可以完全阻止使用连字符,也可以控制浏览器什么时候使用,或者让浏览器决定什么时候使用。

first letter

避免不必要的 span ,并使用伪元素来设计你的内容,同样第一个字母的伪元素,我们还有第一行的伪元素。

 h1::first-letter{
   color:#ff8A00;
}

accent-color

accent-color 属性能够使用自定义颜色值重新着色浏览器默认样式提供的表单控件的强调颜色。

Image filled texth1{
background-image: url(
'illustration.webp');
background-clip: text;
color: transparent;
}

placeholder 伪元素

使用 placeholder 伪元素来改变 placeholder 样式:

input::placeholder{
  font-size:1.5em;
  letter-spacing:2px;
  color:green;
  text-shadow:1px 1px 1px black;
}

colors 动画

使用颜色旋转滤镜改变元素颜色。

button{
  animation: colors 1s linear infinite;
}

@keyframes colors {
  0%{
    filter: hue-rotate(0deg);
  }
  100%{
    filter: hue-rotate(360deg);
  }
}

clamp() 函数

clamp() 函数的作用是把一个值限制在一个上限和下限之间,当这个值超过最小值和最大值的范围时,在最小值和最大值之间选择一个值使用。它接收三个参数:最小值、首选值、最大值。

h1{
  font-size: clamp(5.25rem,8vw,8rem);
}

selection 伪类

设置选中元素的样式。

::selection{
  color:coral;
}

decimal leading zero

将列表样式类型设置为十进制前导零。

li{
  list-style-type:decimal-leading-zero;
}

自定义光标html{
cursor:url(
'no.png'), auto;
}

caret-color

caret-color 属性用来定义插入光标(caret)的颜色,这里说的插入光标,就是那个在网页的可编辑器区域内,用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 | 的东西。

only-child

CSS伪类 :only-child 匹配没有任何兄弟元素的元素。等效的选择器还可以写成 :first-child:last-child 或者 :nth-child(1):nth-last-child(1) ,当然,前者的权重会低一点.

使用 grid 居中元素

.parent{
  display: grid;
  place-items: center;
}

text-indent

text-indent 属性能定义一个块元素首行文本内容之前的缩进量。

p{
  text-indent:5.275rem;
}

list style type

CSS 属性 list-style-type 可以设置列表元素的 marker(比如圆点、符号、或者自定义计数器样式)。

li{
  list-style-type:'';
}

作者:knaagar 译者:前端小智 来源:dev 原文:https://dev.to/devsyedmohsin/css-tips-ad-tricks-you-will-add-to-cart-163p

欢迎长按图片加刷碗智为好友,我会第一时间和你分享前端行业趋势,学习途径,搞怪趣事,生活中的另一面幽默等等。新的一年我们一起洗刷刷!!!!!!