Home – Colors & Fonts

Colors and Fonts是专为web开发者与数字设计师打造的色彩及排版工具资源站，聚焦色彩与排版领域提供各类实用工具、系统参考及关联资源。

颜色工具模块
提供丰富的色彩相关功能，涵盖：
生成单色调色板、浏览精选颜色组合（Color palettes）、查看精选渐变（Color gradients）、创建自定义渐变（Gradient Maker）；
转换颜色代码格式（支持RGB、Hex、HSL等多种格式互转）、检查颜色对比度（确保设计符合 accessibility 标准）、生成完整颜色系统（Color system generator）；
查询颜色名称及对应代码（Color names）、将Tailwind CSS颜色对象转为CSS变量；
支持OKLCH、RGB、RGBA、Hex、HSL、HSLA、LAB等多种颜色模式的选择器，还可查询Pantone色卡、网页安全色（Safe Colors）。

颜色系统模块
收录20+款知名品牌、框架或平台的官方颜色系统，方便直接参考复用，包括：
框架/工具类：Material、Tailwind CSS、Bootstrap、Radix UI（浅/深模式）、Ant Design；
品牌类：Uber、Atlassian、Stripe、Zendesk、Dell、Decathlon Vitamin；
系统类：iOS & iPadOS、MacOS（默认/活力模式）、tvOS、watchOS；
其他：Kromatika、Untitled UI、Primer、Pajamas、Reasonable等。

排版工具模块
围绕字体与排版提供实用功能：
本地字体预览器（Local font previewer）：预览本地字体在网页中的显示效果；
类型比例生成器（Type Scale）：生成符合排版规则的字体大小比例及对应代码；
字体配对（Font pairings）：提供Google Fonts的搭配方案，解决字体组合难题；
支持Google Fonts资源查询、字形（Glyphs）查找、生成CSS Fontface代码；
文本转换工具（Transform text）：实现文本大写/小写快速转换；
占位文本生成器（Placeholder generator）：生成各类“Lorem Ipsum”风格的填充文本。

实用工具模块
补充设计与开发中的辅助功能：
CSS剪切路径生成器（Clip Path Maker）：可视化生成剪切路径并获取对应CSS代码；
设计令牌生成器（Token Generator）：输出CSS变量、SASS、JSON格式的设计令牌，助力设计系统落地；
盒阴影生成器（Box Generator）：可视化调整盒阴影参数，直接复制CSS代码。

其他项目与资源
关联项目：提供Astro JS & Tailwind CSS模板（Lexington Themes）、Tailwind CSS组件库（OxbowUI）、定价页设计灵感（Pricing Patterns）、网格渐变资源（CSS Mesh）、SVG doodle素材（SVG Doodles）及博客内容；
资源推荐：推荐Mobbin工具（需通过指定链接访问）。

网站由Mike Andreuzza制作，采用Astro JS与Tailwind CSS技术构建，服务器位于芬兰奥兰群岛，是开发者与设计师获取色彩、排版工具及参考资源的一站式平台。