#5387C5 · 颜色代码生成器和Picker

生成颜色代码、变化、和谐,并检查对比度。

颜色转换

#5387c5

变化

本节的目的是准确生成你所选颜色的色调(添加纯白)和阴影(添加纯黑),以10%的增量进行。

专业提示: 使用阴影用于悬停状态和阴影,使用色调用于高光和背景。

阴影

通过在基础颜色中添加黑色创建的较暗变化。

色调

通过在基础颜色中添加白色创建的较亮变化。

常见用例

  • • UI组件状态(悬停、激活、禁用)
  • • 使用阴影和高光创建深度
  • • 构建一致的颜色系统

设计系统提示

这些变化构成了一个连贯的调色板的基础。导出它们以在整个项目中保持一致性。

颜色组合

每种和谐都有其独特的氛围。使用和谐来集思广益,找到搭配良好的颜色组合。

如何使用

点击任意颜色以复制其Hex值。这些组合在数学上被证明可以创造视觉和谐。

为什么重要

颜色和谐在设计中创造平衡并唤起特定情感。

互补色

一种颜色及其在色轮上的对立面,色相相差180度。高对比度。

最佳用途: 高影响力设计、CTA、标志

分裂互补色

一种颜色及其互补色相邻的两个颜色,色相相差±30度。像直接互补色一样大胆,但更具多样性。

最佳用途: 鲜艳且平衡的布局

三色

色轮上均匀分布的三种颜色,每种颜色的色相相差120度。最好让一种颜色占主导地位,其他颜色作为强调色。

最佳用途: 活泼、有活力的设计

相似色

具有相同亮度和饱和度的三种颜色,其色相在色轮上相邻,相差30度。平滑过渡。

最佳用途: 自然灵感、平静的界面

单色

具有相同色相的三种颜色,亮度值相差±50%。微妙而精致。

最佳用途: 极简、精致的设计

四方色

两组互补色,相隔60度的色相。

最佳用途: 丰富、多样的配色方案

色彩理论原则

平衡

使用一种主色,辅以次要颜色,并谨慎使用强调色。

对比

确保足够的对比度以提高可读性和可访问性。

和谐

颜色应协同工作,创造统一的视觉体验。

颜色对比检查器

测试颜色组合以确保它们符合WCAG可访问性标准,确保文本可读性。

对比度

1.00
common.contrastFail
非常差
小文本
common.contrastFail
大文本
common.contrastFail

WCAG标准

AA:普通文本的最小对比度比为 4.5:1,大文本为 3:1。大多数网站要求达到这一标准。
AAA:普通文本的增强对比度比为 7:1,大文本为 4.5:1。建议达到最佳可访问性。
所有文本大小的对比度不足 - 不符合WCAG标准。

高级对比度检查器

使用滑块微调,多个预览等

每个人都是天才。但如果你以爬树的能力来评判一条鱼,它将一辈子都相信自己是愚蠢的。

contrastChecker.quote1Author

技术格式

探索视频制作、摄影、科学应用和色彩管理系统中使用的高级色彩空间表示和专业色彩模型。这些技术格式为专业行业和应用提供精确的颜色规范。

实用格式

将颜色转换为实际应用的格式,包括印刷模拟、LED显示、终端输出和数据编码。这些格式帮助你在不同媒体、平台和物理设备上实现颜色。

颜色分析

使用高级指标分析颜色属性,包括光谱组成、颜色纯度、同色异谱效应和感知特性。这些工具提供了对颜色行为和在不同观看条件下外观的深入见解。

色盲模拟器

检查不同类型色盲的人如何感知颜色,以创建更具可访问性的设计。了解颜色感知有助于确保你的内容对所有人都可访问。

创意方面

探索颜色的艺术和心理维度,包括季节关联、情感影响、自然现象、历史颜料和创意应用的颜色混合配方。