mikaio.dev

Random Color Generator

Tap the button for a random colour, shown as a large swatch with its HEX, RGB and HSL codes. Click the HEX code to copy it.

· ·

灵感枯竭时,给你一个全新的颜色

凭空挑一个颜色出人意料地难。面对屏幕能显示的数百万种色调,大多数人还是会一次又一次地伸手去拿那几个熟悉的蓝色和灰色。随机颜色生成器打破了这种惯性,直接给你一个你自己绝对不会主动挑中的颜色,而这往往正是一个设计需要的那点火花。点一下按钮,这个工具就会用一个随机颜色填满一大块色板,同时以HEX、RGB和HSL三种格式给出精确的色值代码,随时可以拿去用。所有处理都在浏览器里完成,一点按钮新颜色就出现,不会有任何数据被发送到任何地方。

这个工具刻意做得很简洁。一大块色板让你能以像样的尺寸真正看清这个颜色,下方是它的色值代码,再加一个按钮生成下一个。点一下HEX代码就能直接复制到剪贴板,随时粘贴进设计软件、样式表或文档里。想生成多少个颜色都可以,直到某一个抓住你的眼球为止。

HEX、RGB和HSL的含义

色板下方的三组代码,只是同一个颜色的三种不同写法,各自适用于不同场合。HEX是网页设计里随处可见的六位字符代码,前面加一个井号,比如#3A7BD5,它很简洁,是大多数网站和设计工具默认接受的格式。RGB用三个数字描述颜色——红、绿、蓝三种光的强度,各自从0到255——这正对应了屏幕实际混合这三个通道来生成颜色的方式。HSL采取更贴近人类直觉的方式,用色相(在色轮上的位置)、饱和度(有多鲜艳或多灰)和明度(有多接近白色或黑色)来描述一个颜色。当你想微调一个颜色时,HSL特别顺手,因为你可以直接提高明度得到更浅的版本,或者降低饱和度让它变得柔和,不用去猜原始数字该怎么改。

同时拥有这三种格式,意味着下一步无论需要哪种,你都能直接拿来用。网页开发者通常会复制HEX代码,做图片或插画的人可能更喜欢RGB,而在微调配色方案的设计师往往习惯用HSL思考。它们描述的其实是屏幕上完全相同的那个颜色。

随机颜色能帮上什么忙

最常见的用法就是单纯的灵感激发。当你盯着一块空白画布发呆时,一个真正出乎意料的颜色,常常能带来一个你自己小心翼翼挑色时永远想不到的方向。设计师用随机颜色作为配色方案的起点,再从那里开始调整。艺术爱好者把它当作一种有趣的创作限制——挑战自己围绕一个被随机分配的颜色搭建点什么。哪怕只是不断循环生成颜色,也能帮你发现一些你喜欢、却永远不会自己打出色值代码去找的色调。

它也有实际用途。开发者和测试人员有时需要占位颜色来填充原型图,或者在搭建布局时区分屏幕上的不同元素,一个带可复制代码的随机颜色,比打开一个完整的取色器要快得多。老师和家长可以把随机颜色当作一种有趣的提示,而任何在学习颜色代码的人,都可以用这个生成器看看同一个色调用三种不同方式写出来是什么样子,这能让人更容易理解这几种格式之间的对应关系。

把一个颜色变成一整套配色方案

一个随机颜色往往只是个开始。一旦你找到了喜欢的颜色,HSL色值就能让你很容易地手动围绕它搭建一套小型配色方案。保持色相不变,上下调整明度,就能为背景和文字做出这个颜色的浅色版和深色版。或者把色相移动一个固定的量,找到色轮上与它相邻或相对的颜色,这正是许多经典配色方案的基础。因为生成器给出的是精确的HSL数值,你手里握着的是一个精确的起点,而不只是一个模糊的印象。

这让这个工具不只是用来找一个颜色,还能用来启动一整套配色方案。一直生成,直到某个颜色感觉对了,复制它的代码,把它当作整套配色方案生长的锚点。

私密、即时且免费

不需要注册,不收费,也没有广告打扰。整个生成器是一小段运行在你自己设备上的代码,这也是它能一点就生成新颜色、断网也照常工作的原因。没有任何东西会被上传、记录或分享;你生成的颜色只存在于你的屏幕上,刷新页面就会重置这个序列。

使用时,点按钮生成一个随机颜色,看色板,再读出下方的HEX、RGB和HSL代码。找到想要的颜色后,点击HEX代码复制,粘贴到需要的地方。想生成多少次都可以——每一个颜色都是从屏幕能显示的全部色域里公正、全新抽取出来的。没有次数限制,也不收费,你可以一直探索下去,直到找到完全适合你的项目的那个颜色。

Random color FAQ

What are HEX, RGB and HSL?
They are three ways to write the same colour. HEX is the six-character code used in web design like #3A7BD5, RGB lists red, green and blue values from 0 to 255, and HSL describes hue, saturation and lightness, which is handy for adjusting a colour by feel.
How do I copy a colour?
Click the large HEX code and it is copied to your clipboard, ready to paste into a design tool, stylesheet or document.
Is the colour truly random?
Yes. Each of the red, green and blue channels is chosen independently at random, so every one of the roughly sixteen million possible colours is equally likely.