开心色怎么算，，，要害是先把它落实为可盘算的颜色值，，，再划分求明度、饱和度和配色面积比例。。。。“开心色”在这里指用于营造明快、愉悦感的颜色组合，，，并非一个牢靠色号。。。。下面以暖黄色 #FFD166 为主色，，，说明统一口径、盘算办法和现实搭配示例。。。。
先统一盘算口径：色值、明度与面积比例
色彩盘算至少要明确三件事：输入什么色值、明度接纳哪种界说、搭配比例按什么面积盘算。。。。色值可用十六进制体现，，，例如 #FFD166；；；转成 RGB 后为 R=255、G=209、B=102。。。。本文的“明度”接纳 HSL 模子中的 Lightness，，，效果用百分比体现；；；“饱和度”接纳 HSL Saturation，，，也用百分比体现。。。。配色比例则按画面中各颜色占有的可视面积盘算。。。。
差别软件可能把“亮度”用于 HSL 明度、HSV 明度或屏幕发灼烁度，，，三者不是统一指标。。。。为便于复算，，，以下明度和饱和度均按 HSL 口径盘算；；；如需判断文字与底色的易读水平，，，再单独使用相对亮度和比照度。。。。
开心色明度怎么算
将 RGB 三个通道除以 255，，，获得 0 到 1 之间的数值。。。。HSL 明度公式为：
L = (最大通道值 + 最小通道值) ÷ 2
使用 0—255 的 RGB 数值时，，，也可以写成：
L(%) = (R最大值 + R最小值) ÷ 510 × 100%
这里的“R最大值”是三个通道中的最大值，，，不是红色通道自己。。。。以 #FFD166 为例，，，RGB 为 255、209、102，，，最大值是 255，，，最小值是 102：
L = (255 + 102) ÷ 510 × 100% = 70%
以是按 HSL 口径，，，这个暖黄色的明度为 70%。。。。明度越靠近 100%，，，颜色越靠近白；；；越靠近 0%，，，颜色越靠近黑。。。。此效果只形貌色值，，，不即是屏幕在特定亮度设置下现实发出的光强。。。。
开心色饱和度怎么算
先求三个 RGB 通道的最大值、最小值和差值：
Δ = 最大通道值 ? 最小通道值
在 HSL 模子中，，，饱和度公式为：
S = Δ ÷ (1 ? |2L ? 1|) × 100%
公式中的 L 使用 0—1 小数；；；若是最大值与最小值相同，，，Δ 为 0，，，饱和度直接记为 0%。。。。对 #FFD166，，，Δ=255?102=153，，，L=0.70，，，因此：
S = 153 ÷ (1 ? |2×0.70 ? 1|) ÷ 255 × 100% = 100%
这里的盘算按归一化通道值睁开，，，效果为 100%。。。。它体现该色在 HSL 体现中处于高饱和状态，，，不代表所有人都会把它感知为同样鲜艳。。。。现实配色时，，，可以降低饱和度，，，让大面积暖黄更柔和；；；保存较高饱和度，，，则适合小面积强调。。。。
搭配比例怎么算：用画面面积分派颜色
常用的配色面积口径是主色 60%、辅助色 30%、遮掩色 10%。。。。它是一种结构分派要领，，，不是由颜色公式推导出的唯一比例。。。。盘算方法为：
某颜色面积 = 总可视面积 × 该颜色比例
例如，，，一张 1000×600 像素的横幅，，，总面积为 600,000 像素。。。。若开心色主色占 60%，，，暖黄色区域约为 360,000 像素；；；辅助色占 30%，，，约为 180,000 像素；；；遮掩色占 10%，，，约为 60,000 像素。。。。现实排版中可以按配景、卡片和按钮的可视区域估算，，，不必逐像素丈量，，，但三种颜色的面积应坚持统一统计规模。。。。
| 角色 | 示例色值 | 面积比例 | 横幅面积示例 |
|---|---|---|---|
| 主色：暖黄 | #FFD166 | 60% | 360,000 像素 |
| 辅助色：深蓝绿 | #264653 | 30% | 180,000 像素 |
| 遮掩色：珊瑚红 | #EF476F | 10% | 60,000 像素 |
这组搭配中，，，暖黄认真形成明亮的主视觉，，，深蓝绿用于问题、边框或文字区域，，，珊瑚红用于按钮、标签等小规模强调。。。。若暖黄铺满整张图，，，深色辅助区域缺乏，，，条理容易变弱；；；若珊瑚红扩展到大面积，，，它就会从遮掩色酿成第二主色，，，原有比例也随之改变。。。。
把盘算效果用于文字比照
面积比例能控制画面漫衍，，，却不可单独包管文字清晰。。。。检查文字与配景时，，，可盘算相对亮度比照度。。。。先将每个 RGB 通道归一化为 0—1 数值：小于或即是 0.04045 时除以 12.92；；；大于 0.04045 时，，，按 ((数值+0.055)÷1.055)2.4 转换为线性值。。。。再按公式求相对亮度：
Y = 0.2126R + 0.7152G + 0.0722B
比照度公式为 (较亮颜色的 Y + 0.05) ÷ (较暗颜色的 Y + 0.05)。。。。以 #FFD166 作底色时，，，白字与底色的比照度约为 1.44:1，，，视觉区分较弱；；；换成深色文字 #3A2A00，，，比照度约为 9.7:1，，，条理显着得多。。。。因此暖黄适合做大面积底色，，，文字可用深棕或深蓝绿，，，而不是直接使用白字。。。。
换色后快速复算
替换开心色时，，，先读取新色的 RGB 三通道，，，纪录最大值、最小值和差值，，，再按 HSL 公式划分求 L 与 S；；；确定页面总可视面积后，，，乘以 60%、30% 和 10%，，，获得各颜色的面积预算；；；最后检查文字与配景的比照度。。。。只要盘算口径一致，，，颜色值、明度、饱和度和搭配比例就能直接较量。。。。
以 #FFD166 为例，，，效果是 HSL 明度 70%、HSL 饱和度 100%；；；搭配面积可按暖黄 60%、深蓝绿 30%、珊瑚红 10% 分派。。。。明度和饱和度形貌单个色值，，，面积比例形貌整幅画面的漫衍，，，比照度形貌远景与配景的可读差别，，，三者划分盘算，，，组合使用才便于判断开心色是否明亮、条理是否清晰。。。。
Android版
iPhone版