tints and shades

色调和阴影生成器

地方发展

该项目使用高度静态站点生成器，并使用Shohei Ueda的GitHub动作部署到GitHub页面。

先决条件：node.js 14+

1. 克隆这个项目。
2. 导航到您的终端中的项目。
3. 安装依赖项： npm install 。
4. 启动服务器： npm run start 。
5. 导航到localhost:8080在您的浏览器中。

什么是色调和阴影发生器？

该工具的目的是以10％的增量精确生产给定六角颜色的色调（纯白色）和阴影（纯黑色添加）。

为什么这个工具是独一无二的？

它认真对待数学。根据我的经验，类似的工具由于四舍五入错误，创建者的喜好或其他不一致而导致的计算错误。

测试表明，该输出与Chrome DevTools的计算方法以及通过SASS得出色调和阴影的一些已建立的流行方法相匹配。

我什么时候可以使用？

当您已经具有一些基本颜色时，它最好使用它，但要为渐变，边界，背景，阴影或其他元素提供免费颜色。

这对于可能与在构建中使用Sass或Postcs的开发人员传达颜色的设计师很有用。这也是快速预览您可能要考虑的基本颜色的色彩和阴影的可靠方法。

我还听说这对教师，数据专业人士和演讲的人很有用。

计算方法

给定的十六进制颜色首先转换为RGB。然后，RGB颜色的每个组件分别在其上执行以下计算。

• 色调： New value = current value + ((255 - current value) x tint factor)
• 阴影： New value = current value x shade factor

如有必要，新值将四舍五入，然后转换回十六进制以进行显示。

示例计算

假设我们想要丽贝卡紫色的色彩和阴影，＃663399。

10％色调

1. ＃663399转换为102、51、153的RGB
2. R： 102 + ((255 - 102) x .1) = 117.3 ，四舍五入为117
3. G： 51 + ((255 - 51) x .1) = 71.4 ，四舍五入到71
4. B： 153 + ((255 - 153) x .1) = 163.2 ，四舍五入至163
5. RGB 117，71，163转换为＃7547A3的十六进制

10％阴影

1. ＃663399转换为102、51、153的RGB
2. R： 102 x .9 = 91.8 ，四舍五入到92
3. G： 51 x .9 = 45.9 ，四舍五入到46
4. B： 153 x .9 = 137.7 ，四舍五入至138
5. RGB 92、46、138转换为＃5C2E8A的十六进制

反馈和贡献

这个项目是开源的，我希望您的帮助！

如果您注意到一个错误或想要添加的功能，请在Github上提交问题。如果您没有帐户，请给我发送详细信息。

如果您是开发人员并想帮助该项目，请对开放问题发表评论或创建新问题并传达您的意图。一旦我们同意前进的道路，您就可以提出拉动请求并将其带到终点线。

支持这个项目

色调和阴影生成器将始终是免费的，但您的支持非常感谢。

• 给我买咖啡
• Venmo
• 现金应用
• 贝宝

学分

迈克尔·埃德斯通（Michael Edelstone）在尼克·翼（Nick Wing）的彩色计算中，在尼克·翼（Nick Wing）的大型帮助下设计和组织了该项目。

我们在整个项目中使用这些惊人的开源库：

• 锚点
• 剪贴板
• 变暗
• 高度

非常感谢Joel Carr，Sebastian Gutierrez，Tim Scalzo，Aman Agarwal，Aleksandr Hovhannisyan，Shubhendu Sen和Luis Escarrilla的宝贵贡献。

其他细节

• 排版：Wei Huang的工作
• 颜色：＃000000，#FFFFFF，＃E96443和＃CA228E
• 喜欢Google的材料设计？尝试我做的另一件事。