如何为10位玩家找到最佳的颜色?


293

我想给10位玩家中的每一个赋予独特的识别颜色。为此有最佳的颜色集吗?如何创建一个?

我想出的每一组都包含太相似的颜色。

更新:下面有人问我这是干什么的(公平问题)。现在,我可以告诉您-Windwardopolis和颜色效果很好。


2
红色,蓝色,绿色,紫色,棕色,橙色,黄色,黑色,白色和灰色。
路易斯·埃斯特拉达

12
底色是什么颜色?还是场景中还有其他颜色(例如,中性物体)?
Ali1S232

这可能比您计划的要雄心勃勃,但是如何为玩家提供各种选项以自定义其角色的外观,以使每个人由于数量庞大的可能组合而显得独特?
菲利普(Philipp)

在事后看来,我想我会确切地问你正在着色什么?地图上的区域?标记?3D游戏中的玩家模型?
Tim Holt

4
我有点没想到这个问题会有好的答案,哇。
2012

Answers:


337

您可以在HSV空间中生成等距的色相值:

for (int i = 0; i < 10; i++)
    colors[i] = HSV(0.1 * i, 0.5, 1.0);

尝试1

但是,您可能不会总是有10位玩家。在这种情况下,除非您为其他玩家重新生成不同的调色板,否则调色板将不会非常有效。相反,一些作者建议利用黄金比例生成调色板,并利用均分定理产生的性质:

for (int i = 0; i < 10; i++)
    colors[i] = HSV(fmod(i * 0.618033988749895, 1.0), 0.5, 1.0);

试试2

这样,即使您停在3或4或7个玩家处,您也可以获得很好的色相传播。

许多非理性的数字都可以,但是黄金分割法效果最好(已被证明)。

最后,您也可以使用两个不同的生成序列来进行调整SV。例如(编辑:我添加了sqrt更好的均值分配的电话):

for (int i = 0; i < 10; i++)
    colors[i] = HSV(fmod(i * 0.618033988749895, 1.0),
                    0.5,
                    sqrt(1.0 - fmod(i * 0.618033988749895, 0.5)));

试试3

更新:通过使用H考虑到人类视觉系统的校正曲线(类似于RGB分量的伽玛曲线),可以改善上述结果。这是我使用CIEDE2000指标计算出的色相校正曲线:

色相校正曲线

等距色相值的结果如下:

试试4

对于黄金分割率生成序列(启用和不启用V):

尝试5 尝试6

一旦找到合理的公式,我将发布曲线公式的近似值以供程序使用。


11
好答案!偏移饱和度值也可能有所帮助,这里没有棕色。根据地图样式,白色或黑色也可能是颜色。
bobobobo 2012年

21
我认为这不考虑色盲吗?仍然是一个非常有趣的答案。
AlexanderBrevig

7
@AlexanderBrevig不,不幸的是,它不是。它也没有考虑这样一个事实,即人们不相信人类会均匀地感知色调对比。我正在考虑后者,以后可能会更新我的答案。恐怕色盲问题要复杂得多。
sam hocevar

25
色盲的最佳答案就是简单不依赖色彩。理想情况下,每个玩家都应该对他所控制的任何演员都拥有独特的身影。我的意思是剪影,而不是某种象征。太多的Match 3游戏会完全错误,即使对于没有色盲的人来说,它们也很难玩,并且会引起太多的眼睛疲劳。
肖恩·米德迪奇

13
请参阅人类色彩感知图。您应该在此2D空间中绘制等距的点。用色相等距绘制即使在最短的时间内也无法适应人类的感知!
ErikE 2012年

172

星际争霸的8 种颜色是

红色,蓝色,蓝绿色,紫色,橙色,棕色(沙漠地图上为绿色),白色(冰地图上为绿色),黄色

观察 暴雪是UI天才,并且已经研究了这个问题。

他们在沙漠地图上将格林排除为布朗的换人,因此从技术上讲,那里列出了9个。

魔兽争霸3 的12种颜色是:

红色,蓝色,蓝绿色,紫色,黄色,橙色,绿色,粉红色,灰色,浅蓝色,深绿色,棕色

外观如下:

在此处输入图片说明

如您所见,它们非常不同并且易于区分。深绿色实际上很容易与蓝绿色区分开,可能是因为人眼最容易区分绿色。如果您确定您的播放器将是女性四,则可以选择任何颜色。


3
如果我可以选择2个答案,我也会选择您的答案。谢谢
David Thielen

11
由于正常物体具有复杂的光谱,因此成为四色体有助于区分现实世界中的颜色。但是,由于四色镜对计​​算机游戏没有帮助,因为显示器只有三种颜色(红色,绿色,蓝色)。为了使文章中的突变使人们受益,将需要一种具有四种颜色(红色,绿色,蓝色,橙色)的新显示器。有限的RGB颜色空间也意味着,所有照片/视频对于四色镜来说都必须看起来非常不现实。

3
有部分色盲的人是另一个问题-在上面的W3屏幕截图中,粉红色和灰色在我看来几乎是相同的,直到我读到了那个并再次非常仔细地看。
f055 2012年

20
伟大的程序员偷了!我要做的第一件事也是任何现代暴雪多人游戏。
Jeff Atwood

4
我实际上是部分色盲的,因此以下颜色很难区分:橙色vs绿色,粉红色vs灰色,深绿色vs棕色
Archimedes Trajano 2012年

75

这里有些人建议在色相上的10个等距位置处划分HSV颜色空间。我认为这实际上不是一个好的解决方案。人眼无法在整个HSV光谱上均匀地感知颜色差异。例如,我们所说的橙色只占乐队的一小部分,而一个好25%的块可能就是绿色。因此,这始于一个糟糕的前提。看看这个答案的第一行颜色。两种果岭几乎无法区分。

请记住,您的用户将需要交流并参考颜色。有鉴于此,《星际争霸》 /《魔兽争霸》主题是一个很好的线索。基于简单的英语Crayola颜色列表进行选择并不是一个坏主意,因为您最终将获得熟悉的命名颜色。然后只要将这些颜色调整为粗体,柔和的颜色即可,只要您仍能识别出它们是红色,橙色,黄色,绿色,蓝色,紫色,棕色,灰色,白色,黑色即可。

编辑:语言和色彩感知之间的联系非常有趣,我只想分享这个很棒的链接:

世界的绘画技法:我们如何给颜色起名字,这让我们的大脑迷上了经验热情


2
确实有很多道理;在写我的答案时,我研究了有关人类相对对比度感知的更多信息,但没有找到任何数字。您是否有任何链接?
sam hocevar

下面是关于语言与色彩之间的关系的有趣的节目:dailymotion.com/video/...
马特M.

您是否知道将其考虑在内的色调值的非线性映射?
Anony-Mousse 2012

1
@MattMontag,您好,只是在想:不用指可能会改变的“票数最高的答案”(尽管它的确有广泛的领先优势……),值得直接链接到所讨论的答案。好的答案,+ 1
白金Azure

3
@ Anony-Mousse:实验室色彩空间旨在逼近人类视觉。它渴望感知统一。选择等距的Lab颜色并将其映射到HSV中,您将看到对应关系。这不仅是关于色调的非线性。
Janus Troelsen

29

我认为我需要将这种“符号”方法分解为一个单独的答案。

过去,我认为人们需要旗帜和东西才能轻松识别远方的军队,因此您知道是进攻还是防守(对于敌人而言),还是如释重负(对于盟友而言)。

因此,顺便说一句,这正是您要尝试执行的操作。轻松识别远处的物体。

您可以只用颜色做到这一点,但可能更好的方法是使用颜色和符号。如上所述,使用颜色和符号 的组合将帮助色盲人识别事物。

如果单位足够大,则还可以使用2-4色徽章。

在此处输入图片说明

模式是很容易辨认,而不仅仅是一种颜色。良好的纹理处理可以在每个单元的胸部或上臂上标记相当大的徽章。

在上图中,不同单位的头盔具有不同的几何形状以及盾牌标志。

您可能会发现日语Mon的想法也很有趣,它们看起来很简单。

日本星期一

现在,您基本上是在用现代“品牌”为您的单位打上品牌了。《星际争霸2》通过“贴图”做了一些操作,

在此处输入图片说明

但是这些在游戏中几乎看不到

在此处输入图片说明

并且不像颜色那样用于识别单位。

我还会考虑标记的灵感,尤其是那些没有使用3条条纹品牌图案的标记(这些标记变得有些混乱)。考虑:

  • 瑞士: 瑞士国旗
  • 索莫里亚: 索莫里亚的旗帜
  • 韩国: 韩国国旗

这些都有一些非常简单但又与众不同的标志。

还要检查美国政府用来识别国防人员的符号。这些是单色图像(可以完全以黑白完成),因此这实际上可能是一个很好的解决方案,不会排除色盲人员(基本上使用符号来标识团队,而不是颜色)

在此处输入图片说明

 


将其分为两个答案已破坏了某些图像。
马克·托马斯

徽章看上去很酷,但是在真实的游戏玩法中,恕我直言,它们太复杂了,难以辨认。至少没有原色。
David C. Bishop

3
您知道的是“索马里”,而不是“索莫里”。
2013年

21

为什么要重新发明轮子?甚至有一套十六种颜色的标准,您可以选择十种颜色。这是ANSI设置的http://en.wikipedia.org/wiki/ANSI_escape_code#Colors

在此处输入图片说明

ANSI颜色均匀分布在RGB多维数据集上,我认为比HSV空间更适合此问题。

当采用RGB立方体的极值时,您会获得熟悉的颜色,例如红色,蓝色,青色等。在八个角点之后,您将获得边缘之间的所有点。


2
实际上考虑色盲的人,如果您消除一些颜色,这将非常接近色盲友好型
Archimedes Trajano 2012年

20

制作10种可以区分的颜色将非常困难。在为许多值创建图形或图表时,这是一个非常普遍的问题,这就是为什么它们经常使用颜色和形状或颜色和哈希图案组合的原因。

如果需要显示标记,则可以使用4种基本颜色(例如红色,蓝色,橙色,黑色)和4种基本形状(正方形,圆形,三角形,菱形),并获得16种非常容易区分的标记。

如果要在区域中着色,请使用相同的想法,但要用黑色或白色线条(而不是形状)将颜色与阴影图案组合在一起。

要考虑的另一件事是不要使用颜色作为告诉侧面的唯一方法。将鼠标悬停在某个区域上可能会高亮显示该区域,并给出明确提示玩家名称的工具提示。或者,可以将10个玩家的列表悬停在上面,然后当一个鼠标悬停在一个玩家名称上时,将显示该玩家在地图上的所有区域。

另外,在选择颜色时,请记住色盲。例如,绿色和红色可能无法区分。看看http://jfly.iam.u-tokyo.ac.jp/color/#select,了解一组建议的颜色,对于盲人来说这不是问题。其他资源是http://www.usability.gov/articles/newsletter/pubs/022010new.html#ColorsthatWorktheBest


4
+1提及图案和色盲!没有足够的游戏开发人员考虑此问题。
特雷弗·鲍威尔

7

即使您可以获得一个人可以轻松区分的10种独特颜色,另一个人仍然可能会发现这种颜色很难区分。

考虑将自己限制为较小的颜色集,并添加可区分的功能,例如黑色条纹。对于这组颜色,最好不要偏离大多数人容易分辨的颜色:ROYGBIV。ROYGBIV上的简单条纹/无条纹可让您识别14个游戏作品。

您也不必将自己限制在黑色条纹上。请考虑以下解决方案,用于连接25对电缆线(可以很容易地用条纹而不是电缆线对):http : //en.wikipedia.org/wiki/25-pair_color_code


说到特色,我建议您尝试回顾1993年世嘉土星的10人炸弹人游戏i.imgur.com/mCVmk.png
Archimedes Trajano

删除“ I”,因为通常很难区分B <-I和I->V。您仍然有12个颜色ID。
ocodo 2012

也许我很难区分“我”。但是,我怀疑可以找到较亮的“ B”和较暗的“ I”,使其与7(带条纹的14)一起使用。但是,有关添加条纹或其他区别特征的要点是站立。
Christopher


3

布伦特·柏林(Brent Berlin)和保罗·凯(Paul Kay)指出,色彩空间可以划分为几种基本色彩,但是取决于您的文化,为色彩起个名字可以使色彩更具特色。

在英语中,有11种基本颜色:白色,黑色,红色,绿色,黄色,蓝色,棕色,紫色,粉红色,橙色和灰色。

我不喜欢出于与马特·蒙塔格(Matt Montag)所说的原因相同的原因选择车轮周围的色调的想法


+1这是事实。有文化偏见。但是,还有色彩学,除非感觉设备出现故障(例如色盲),否则不能否认谐波谐波。
工程师


3

做的不只是色彩-具有视觉上的表现,这会增加知识,艺术风格和色彩表现。

例如,《五环传奇》使用一种令人难以置信的方式来区分“一组颜色”。

一个最美丽的例子之一。请注意他们区分氏族的数百种方式。它不仅是原色,而且还包括第二色甚至第三色。颜色甚至包括在发型,衣服类型,字符类型,附加的符号,标志,横幅,背面的迷你标志,个性中。

我从中得到的最大好处是多种颜色的组合。这不是简单的:蓝色,红色,紫色,棕色,黄色,绿色,蓝绿色。

它是两种颜色的组合,两种颜色都很明显。这可以允许大量额外的玩家。

每个氏族都将具有原色和一组副色。

“螃蟹主要被识别为蓝灰色,再加上黑色,红色和棕色。”

它之所以美丽,是因为无论这个人长什么样(大,虚弱,武士,巫师,农民),您总能分辨出他们来自哪个氏族。对于蝎子,这不仅是“红色”,而且是深红色和黑色。凤凰城有森伯斯特的颜色:红色,橙色,黄色。

即使它们的颜色相似并且它们都使用了很多红色,也永远不会使蝎子与凤凰混淆。


3

尝试使用以下混色器:w3schools.com HTML混色器

这就是我要做的:为第一个选项选择一种颜色。然后,为第二个选项选择一个,以使第二个颜色相对于第一个处于完全相反的位置。因此,位置1行1单元格的颜色与之相反:最后一行,最后一个单元格。

这样,您每次都在混合的末端得到两种非常不同的颜色。重复此5次,始终选择与上次选择相距较远的颜色。


2
我尝试了。我发现这是容易,只需选择对方喜欢隔开的颜色。效果很好。
MichaelHouse

1

这个问题有很多答案,但我想进一步谈谈可访问性。

如果我处于您的情况下(需要为游戏中的所有事物选择颜色,所有参与该游戏的玩家都应将其视为独特),那么我的主要关注点将不仅是色盲玩家的适应,还要低视力。

据我所知,解决此问题的唯一方法是VALUE CONTRAST。某些人只能看到黑白(来源:艺术学院的一位朋友讲授色彩理论课的故事,但由于激光眼科手术失败而根本无法感知任何色彩)。有些人视力低下或部分/法律上失明。你需要的灰色深浅分明为出发点,让你的颜色DO选择是可见的和独特的每个人

为了完成所有这些操作并获得看起来不错的颜色,请考虑以下图像,该图像是通过在垂直黑白渐变之上的颜色混合模式下分层水平彩虹渐变而获得的(可以自己尝试,也可以使用自定义颜色彩虹以外的渐变!):

重建上述图像的过程

从最暗到最亮:黑色,蓝色,红色,洋红色,绿色,青色,黄色,白色。

您能看到淡淡的“纯色”之字形吗?这就是所说明颜色的自然价值。即使使用纯色,蓝色最暗,黄色最亮。利用这一信息来选择颜色既适合游戏玩家为之色盲和/或低视力的价值要求具有美感的人谁能够理解你所选择的色调的充满威严。

希望这可以帮助!:-)



附言:我想确保您也看到了此评论!

色盲的最佳答案就是简单不依赖色彩。理想情况下,每个玩家都应该对他所控制的任何演员都拥有独特的身影。我的意思是剪影,而不是某种象征。太多的Match 3游戏会完全错误,即使对于没有色盲的人来说,它们也很难玩,并且会引起太多的眼睛疲劳。–肖恩·米德迪奇(Sean Middleditch)2012年12月30日5:08


0

确保为可变数量的玩家(不考虑色盲)提供可区分颜色的最佳设置的一种方法是从HSL(色相,饱和度和亮度)颜色模型中进行选择。

您可以根据自己的选择选择恒定的亮度和饱和度。然后,将颜色的色调移动360 / playerCount,如下面的伪代码所示:

saturation = 200;
lightness = 128;
hueDelta = 360 / PLAYER_COUNT;

for (int i = 0; i < PLAYER_COUNT; i++)
    color[i] = Color.FromHSL(hueDelta * i, saturation, lightness);

0

我想提出一个替代的配色方案:

16色

这些是带有建议名称的RGB颜色(相同顺序):

#eeeeee - white
#efef00 - yellow
#00e1da - cyan
#bfbf00 - olive
#12c055 - light green
#e21e80 - pink
#777777 - gray
#c10008 - red
#8900ae - light purple
#7c3900 - light brown
#0029b9 - blue
#400086 - dark purple
#4b1c00 - dark brown
#003004 - dark green
#07004b - dark blue
#111111 - black

注意:我没有使用纯黑色和白色,以为它们可能用作背景或轮廓。

方法:在色块的饱和面上选择12种颜色(认为我会满意12种颜色),将它们分开,然后-使用工具模拟色盲-开始tweeking。之后,我添加了近白色,近黑色和灰色,因为我可以。那给了我15种颜色。我想要16种颜色,因为它是2的幂,并且我可以使开发人员更轻松。最终,我找到了一种添加第16种颜色的方法,为此我不得不移动其他颜色。然后...使用色盲模拟工具再次检查,修复并重复。

以下是不同的色盲情况:

正常: 16色

百老汇: 百老汇

十点近视: 十眼

Tritanopia: Tritanopia

原发性: 蛋白质异常

申命记: 申命记

Tritanomaly: 三角虫

色盲: 色盲

消色差 消色差


在使用色盲模拟工具一段时间后,我不得不说,对比度至关重要。

例如,考虑第5(浅绿色),第7(灰色)和第9(浅紫色)颜色。在某些情况下,它们看起来很相似,尤其是小尺寸并由另一种颜色隔开。但是,将它们并排放置,您可以将它们区分开。增加颜色覆盖的面积,您可以更轻松地将它们分开。所以...为色盲而设计不仅是挑选颜色。

值得注意的是...如果您选择两种颜色的组合而不是一种颜色来代表派系,这将有很长的路要走。

这些颜色是通过非常经验的方法挑选的。我注意到非常重要的一点是要确保它们的亮度都不同。我还注意到大多数“颜色”出现两次(有两个绿色,两个紫色,两个棕色,等等。。。)。实际上,第四种颜色(橄榄色)是我添加的最后一种,我决定它会是一种类似黄色的颜色,因为没有像黄色这样的颜色。我想这可以成为更系统地选择颜色的基础。

回顾一下,我可能应该使第二种类似黄色的颜色(橄榄色)变深,并使用该亮点作为一种粉红色(请参见第7种颜色)。为什么?因为它会给您更多的阴影来玩。恩...这已经足够好了,获取所有图片是一件麻烦事。

附录:我没有考虑的是,如果您超出首选的角度范围,LCD屏幕的色彩会如何变形。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.