Open Props项目新增SDR/HDR霓虹色彩属性

Open Props项目在最新版本中新增了一系列霓虹色彩相关的CSS自定义属性，为开发者提供了更加丰富的色彩选择。这些属性特别针对标准动态范围(SDR)和高动态范围(HDR)显示设备进行了优化。

色彩属性设计

项目新增了两组色彩属性：一组是基础霓虹色彩变量，另一组是带有发光效果的霓虹色彩组合。

基础霓虹色彩变量包括七种标准颜色：

• 霓虹红(--neon-red)
• 霓虹粉(--neon-pink)
• 霓虹紫(--neon-purple)
• 霓虹蓝(--neon-blue)
• 霓虹绿(--neon-green)
• 霓虹黄(--neon-yellow)
• 霓虹白(--neon-white)

发光效果霓虹色彩则每组包含两个变量：

• --neon (霓虹色本身)
• --neon-glow (发光效果颜色)

动态范围适配

项目特别考虑了不同显示设备的动态范围能力，通过CSS媒体查询为HDR设备提供了更广色域的颜色定义：

@media (dynamic-range: high) {
  :root {
    --neon-red: color(display-p3 1 0 0);
    /* 其他颜色类似定义 */
  }
}

这种设计确保了在支持Display-P3广色域的HDR设备上，颜色能够展现出更加鲜艳生动的效果，而在普通SDR设备上则回退到标准的sRGB色域定义。

技术实现细节

1. 色彩空间选择：HDR模式下使用display-p3色彩空间，提供比sRGB更广的色域范围
2. 渐进增强：通过媒体查询实现优雅降级，确保不支持HDR的设备也有良好的显示效果
3. 变量命名：采用语义化命名，便于开发者理解和使用
4. 色彩组合：为每种霓虹色提供了基础色和发光色两个变量，方便创建发光效果

实际应用价值

这些新增的色彩属性特别适合需要创建:

• 霓虹灯风格UI
• 赛博朋克主题界面
• 高对比度视觉效果
• 需要HDR支持的媒体展示

开发者可以直接使用这些预定义变量，无需自行计算色彩值，既保证了设计一致性，又能充分利用现代显示设备的色彩表现能力。

版本信息

这些新特性已在Open Props项目的2.0.0 beta版本中提供，开发者可以通过相应方式获取这些CSS资源文件。