GitHub仓库README.md添加兼容所有颜色的颜色块实现方法

最优方案：内联HTML实现（无外部依赖，100%兼容所有色值） #

GitHub Markdown 渲染支持基础内联HTML样式，用span标签自定义色块是目前最稳定的实现方式，完全不受第三方服务API变动影响，适配所有合法色值格式。
示例代码：

<span style="display:inline-block;width:14px;height:14px;border-radius:2px;background-color:#243B55;margin-right:6px;vertical-align:middle;"></span>`#243B55`

<span style="display:inline-block;width:14px;height:14px;border-radius:2px;background-color:#f03c15;margin-right:6px;vertical-align:middle;"></span>`#f03c15`

<span style="display:inline-block;width:14px;height:14px;border-radius:2px;background-color:#f03c1580;margin-right:6px;vertical-align:middle;"></span>`#f03c1580`（带50%透明度）

这个方案的优势：

• 无任何外部服务依赖，不存在接口变更、服务下线、网络加载失败导致色块失效的问题
• 全色值兼容：支持3位短十六进制色、6位标准十六进制色、8位带透明度十六进制色，以及rgb、rgba、hsl等所有CSS支持的颜色格式
• 样式灵活可调：可以根据自己的文档风格自定义色块尺寸、圆角大小、和文字的间距、对齐位置
• 渲染性能更好，不需要发起额外的图片请求

样式参数说明 #

你可以根据自己的文档风格调整代码里的样式值：

• width:14px;height:14px：控制色块的宽高尺寸
• border-radius:2px：控制色块圆角弧度，设为0就是直角方块
• margin-right:6px：控制色块和右侧色值文字的间距
• vertical-align:middle：保证色块和相邻文字垂直居中对齐
• background-color: 后面直接替换成需要展示的目标色值即可

注意事项 #

之前用第三方占位图服务做色块出现部分颜色不生效的问题，本质是第三方接口对参数格式有严格限制（比如色值不能带#前缀、需要同时传背景色和文字色参数），但这类方案始终存在服务不稳定的风险，长期维护的文档优先选择内联HTML方案。

内容的提问来源于stack exchange，提问作者Sasanka Weerakoon