16位调色板和32位调色板
Sometimes the hue muse fails to strike; sometimes all you’re provided for the look and feel of a site is a web page the client likes, or a photograph, perhaps just a painting.
有时,色雷斯无法击中; 有时,为您提供的网站外观和感觉只是客户喜欢的网页,照片或图片。
Moments like that make it difficult to come up with one of the defining characteristics of a site design: a strong, cohesive color theme. Using PhotoShop’s Eyedropper tool to extract image colors isn’t always helpful, as attempts to pick pixels are often stymied by artifacts and shading effects (although there are a few tricks that can help, discussed below). In such situations, a color extraction tool can open up many creative possibilities:
这样的时刻使得很难提出网站设计的定义特征之一:强烈,凝聚力的色彩主题。 使用PhotoShop的吸管工具提取图像颜色并不总是很有帮助,因为选择像素的尝试通常会因伪影和阴影效果而受阻(尽管有一些技巧会有所帮助,如下所述)。 在这种情况下,颜色提取工具可以开辟许多创造性的可能性:
The DeGraeve color palette generator is the simplest and most straightforward of these: provided with an image URL, it generates pairs of extracted colors in hexadecimal, divided into “dull” and “vibrant” hues. colr.org works in a similar fashion, but pulls sampled colors one at a time from an image.
DeGraeve调色板生成器是其中最简单,最直接的:带有图像URL,它以十六进制生成成对提取的颜色对,分为“暗淡”和“鲜艳”色调。 colr.org以类似的方式工作,但是一次从图像中提取一种采样的颜色。
The CSS Drive Color Palette generator is another, more fully featured option: it can work from either a URL or an uploaded image, generates a wider range of extracted colors grouped in different ways, and can save the results as a CSS stylesheet or a PhotoShop swatches file.
CSS Drive Color Palette生成器是另一个功能更全面的选项:它可以从URL或上载的图像工作,生成以不同方式分组的更广泛的提取颜色,并且可以将结果保存为CSS样式表或PhotoShop色板文件。
-
If you’re an Adobe subscriber,Adobe Color CC (previously known as Kuler) offers a similar feature, extracting colors from images based on “mood”; click on the camera icon at the top right of the Create screen to start the process.
Adobe Color CC (以前称为Kuler)提供了类似的功能,即根据“心情”从图像中提取颜色。 单击“创建”屏幕右上方的相机图标以开始该过程。
Movies can be deeply inspirational for color, although the inexperienced eye often has a harder time spotting frame palettes (with the possible exception of the infamous “orange and teal” trend of the last few years). Thankfully there are some sites that make the work easier for you:
尽管经验不足的眼睛通常很难发现帧调色板(尽管最近几年臭名昭著的“橙色和青绿色”趋势可能除外),但电影可能会深深激发色彩的灵感。 值得庆幸的是,有些站点使您的工作更轻松:
-
电影调色板从流行电影的静止帧中提取颜色,以使您欣赏愉快。
Designer Hyo Taek Kim made an awesome palette study of Studio Miyazaki, Disney and Pixar films; they’re also available as prints from society6
设计师Hyo Taek Kim对宫崎骏工作室,迪士尼和皮克斯电影进行了令人敬畏的调色板研究; 它们也可以从社会获得印刷品6
There’s a Tumblr specifically devoted to palettes from Wes Anderson movies, because of course there is.
当然有一个专门针对Wes Anderson电影中的调色板的Tumblr。
Design firm Stuff and Nonsense have a lovely breakdown of how they extracted colors from the Martin Scorsese film “Hugo” using Adobe Color CC to come up with the palette for a project.
设计公司Stuff和Nonsense对如何使用Adobe Color CC从马丁·斯科塞斯电影《雨果》中提取颜色的方法进行了细致的分解,以提出项目的调色板。
Ryan McGuire has drawn color inspiration from the world’s greatest artists for the excellent ColorLisa, which extracts web palettes from famous paintings.
Ryan McGuire凭借出色的ColorLisa从世界上最伟大的艺术家那里汲取了色彩灵感,它从著名的绘画作品中提取了网络调色板。
You might also want to run a color extraction service locally, or as part of your own site. In that case, Vibrant.js and Color Palette Toolkit are your friends: while the former extracts colors from images withJavaScript, the Tooklit can also pull colors from ACO files, generates human names for them (a trend I’m a fan of) and creates lighter and darker shades if required. Live demos of both Color Palette Tookit and Vibrant.js are available.
您可能还希望在本地或您自己的站点中运行颜色提取服务。 在这种情况下, Vibrant.js和“ 调色板工具包”是您的朋友:前者使用JavaScript从图像中提取颜色,而Tooklit也可以从ACO文件中提取颜色,为它们生成人名( 我很喜欢这种趋势 ),并且如果需要,可创建较浅和较深的阴影。 可以使用调色板Tookit和Vibrant.js的实时演示。
小费 (Tip)
Extracting colors from images manually is entirely worthwhile, but using the PhotoShop Eyedropper tool to do so can lead to misleading and confusing colors; by default, the eyedropper samples only the exact pixel under the tip of the tool. Paradoxically, for more exact color extractions you must average the colors being sampled. The option to do so is inside the Eyedropper’s Option panel: I usually opt for a 5 × 5 sample average, but you may need a larger value depending on the resolution of the image being sampled.
手动从图像中提取颜色是完全值得的,但是使用PhotoShop吸管工具可能会导致颜色产生误导和混乱; 默认情况下,吸管仅对工具提示下的确切像素进行采样。 矛盾的是,要进行更精确的颜色提取,必须对采样的颜色求平均 。 这样做的选项在“吸管”的“选项”面板内部:我通常选择5×5的样本平均值,但是您可能需要更大的值,具体取决于所采样图像的分辨率。
Finally, ColorHunt is a curated collection of beautiful colors, updated daily… and because there probably isn’t enough Queen Bey in everyone’s life, a Tumblr of Beyoncé palettes.
最后, ColorHunt是精选的美丽色彩的集合,每天都会更新……而且由于每个人的生活中可能没有足够的Queen Bey,所以使用了Beyoncé的Tumblr调色板 。
翻译自: https://thenewcode.com/1055/12-Palette-Extractors-and-Resources-for-Site-Color-Inspiration
16位调色板和32位调色板