李四端
宣布于 中国汽车报
+关注
找颜色网站,,,常见需求无非是快速搭一组配色、盘问颜色代码、从图片取色,,,或检查文字与配景是否清晰。。。差别工具善于的偏向并不相同:有的适合系统地建设色板,,,有的适合浏览现成灵感,,,也有的专门处置惩罚古板色与比照度。。。下面先容6个各有着重的颜色网站,,,利便按设计使命挑选。。。
1. Adobe Color:建设配色关系与提取主题色
Adobe Color适合需要自动调配颜色的人。。。色轮可以凭证互补色、类似色、三角色等关系天生色板,,,调解一个主色后,,,其余颜色会随规则转变。。。它适合为品牌视觉、网页界面和海报先搭出一组有联系的基础颜色,,,而不是只凭感受逐个挑选。。。
若是手头已有摄影图、产品图或插画,,,还可以使用图片提取主题色,,,视察画面中占主导的颜色,,,再把色板带入后续设计。。。举例来说,,,一张以蓝绿色和暖黄色为主的咖啡馆照片,,,可以作为网页主色与强调色的灵感泉源。。。Adobe Color也提供与可会见性相关的颜色检查功效,,,适合在定稿前审阅文字和配景的比照关系。。。
适合:需要有纪律地天生色板、从图片获取配色灵感,,,或在设计流程中治理颜色主题的人。。。刚最先使用时,,,可以先定一个主色,,,再试互补或类似色关系,,,阻止一次加入过多抢眼颜色。。。
2. Coolors:快速天生并调解一组颜色
Coolors的特点是天生速率快,,,适合在脑中只有大致偏向、还没有确定色板时探索选择。。。天生一组颜色后,,,可以锁定喜欢的色块,,,再继续刷新其他颜色;;;;;这样既能保存已经选中的主色,,,也能一直较量新的辅助色。。。挑选历程中,,,颜色代码便于复制到设计文件或开发样式中。。。
它也适适用来构想渐变和调色计划。。。好比先锁定深蓝色作为配景,,,再实验差别的浅色、暖色作为按钮或提醒色。。。若效果显得杂乱,,,可以只保存三到五种颜色:配景、正文、主色、强调色和辅助底色各司其职,,,比一整排颜色都争抢注重力更容易落地。。。
适合:头脑风暴、快速试色和寻找网页基础色板。。。它给出的是候选计划,,,不代表颜色组合已经切合阅读与品牌要求,,,尤其是浅色文字叠在明亮配景上时,,,还要单独检查可读性。。。
3. Color Hunt:浏览整理好的配色灵感
Color Hunt以现成配色组合为主要灵感泉源,,,适合不想从空缺色轮最先、希望先看整体气质的人。。。浏览色板时,,,可以比照差别组合在清新、复古、明亮或沉稳偏向上的感受,,,再把喜欢的色调转化为自己的设计计划。。。它更像一面配色灵感墙,,,重点是发明组合,,,而非替换完整的界面设计历程。。。
使用时可以先明确项目气氛。。。例如,,,儿童运动页面可以寻找明亮、生动的颜色;;;;;阅读类网站则可以视察柔和配景与低刺激强调色的组合。。???吹胶鲜实纳搴,,,不必原样照搬,,,挑出其中一两个要害颜色,,,再凭证现实内容增补正文色和中性配景致,,,通常更容易形成统一视觉。。。
适合:寻找配色偏向、较量差别色彩情绪,,,或在设计初期建设 moodboard。。。浏览灵感时要注重色块比例:色板里并列展示的颜色,,,在现实界面中纷歧定应该平均分派面积。。。
4. Khroma:按小我私家偏好探索颜色组合
Khroma着重以颜色偏好为起点,,,资助使用者探索差别的颜色搭配。。。面临大宗色彩选择时,,,人容易重复挑到相似的颜色;;;;;这类工具的价值在于把偏好转化为可浏览的组合,,,让设计师快速发明平时不常实验的搭配偏向。。。
现实使用时,,,可以把它放在创意探索阶段:先看哪些组合切合项目气质,,,再把候选色带回详细版面测试。。。好比同样是深色配景,,,搭配亮橙会显得有攻击力,,,换成雾粉或浅青则会柔和许多。。。最后仍要连系品牌调性、图片内容和文字层级筛选,,,阻止只因单个色块悦目就忽视整体效果。。。
适合:寻找小我私家气概、跳出习用配色,,,或为创意项目拓展备选计划。。。它更适合启发而不是直接定稿,,,选出的颜色要放进真实页面检查面积、层级与阅读体验。。。
5. WebAIM Contrast Checker:检查文字与配景比照
WebAIM Contrast Checker专注于远景致和配景致之间的比照检查。。。把文字颜色与配景颜色的色值填入后,,,可以审查比照度效果,,,并判断组合是否适合常见的文字阅读场景。。。比照度检查尤其适用于按钮文字、表单提醒、页脚链接和浅色配景上的小字号文本。。。
例如,,,浅灰色文字放在白底上,,,视觉上可能显得清洁,,,但小字号阅读时容易不敷醒目;;;;;把文字加深,,,或稍微压暗配景,,,通常能改善辨识度。。。检查时不要只测试页面主问题,,,也要注重禁用状态、辅助说明和悬停状态,,,由于这些细节经常比大问题更容易被忽略。。。
适合:网页上线前检查文字可读性,,,或调解按钮、说明文字与配景的颜色组合。。。它不可替换真实设惫亓视觉检查,,,但能资助发明“看起来还行、现实不易读”的搭配。。。
6. 中国色:查找古板色名与色彩灵感
中国色适合寻找带有古板文化意味的颜色名称和色彩灵感。。。与只用冷暖、明暗来形貌颜色相比,,,古板色名能够给视觉计划增添更明确的文化遐想,,,可用于国风海报、节日运动页、文创包装以及需要中文色彩叙事的设计项目。。。
设计时可以先从色名和整体气质出发,,,再把颜色放进现代版式里磨练。。。例如,,,选择一类平静的青色作为主视觉,,,再用米白色拉开留白,,,以少量暖色突出按钮或印章元素。。。古板色适合建设主题感,,,但若是所有区域都使用高饱和色,,,画面容易显得拥挤;;;;;搭配中性色和清晰的层级,,,会更耐看。。。
适合:国风视觉、节庆主题、古板文化相关项目,,,以及想用色彩名称启发创作的人。。。现实应用时应连系屏幕显示和印刷效果调解色值,,,阻止只凭色名判断最终泛起。。。
按使命选择颜色网站
若是要从主色建设一套有逻辑的色板,,,可以先用Adobe Color;;;;;若是希望快速刷新选项,,,Coolors更直接。。。想先看现成组合、寻找气质偏向,,,可以浏览Color Hunt;;;;;希望实验不熟悉的颜色关系,,,可用Khroma拓展灵感。。。网页文字和配景定稿前,,,用WebAIM Contrast Checker检核比照度;;;;;涉及国风主题时,,,再从中国色寻找命名与文化气氛上的线索。。。
这些工具可以前后配合,,,而不必只选一个:先从灵感网站确定偏向,,,再用色轮或天生器细化色板,,,接着把颜色放进网页组件,,,最后检查文字比照和整体层级。。。好比一套精练的内容网站配色,,,可以设置深蓝为主色、浅灰白为配景、炭黑为正文,,,再用暖橙突出少量操作按钮。。。主色认真建设识别度,,,配景肩负大面积铺陈,,,强调色只用于主要行动,,,配色就更容易效劳阅读与操作。。。
挑颜色网站时,,,要害是看目今使命需要什么效果:要灵感、要色值、要文化气质,,,照旧要可读性检查。。。先确定用途,,,再选合适工具,,,通常比在多个色板间反竿迫椿更省时间。。。