色彩系统
色彩设计理念
数字海南色彩系统遵循 “感知均匀、过渡自然、层级清晰、无障碍兼容” 原则，采用0–9十级渐变色阶，通过科学的明度、饱和度梯度设计，保证色相不偏移、过渡无断层，满足中后台系统、数据大屏、移动端、官网等全场景视觉统一。严格遵循WCAG 2.1 AA级无障碍标准，兼顾红绿色盲识别友好性，避免仅依靠色相区分关键状态；更核心的是，整套色彩与数字海南官方 Logo 主色调一脉相承，实现“品牌基因延续、设计系统升级”的双重目标，既保留标识的唯一性，又满足企业级产品的全场景应用需求。
色彩来源与演变逻辑
本套色彩系统以数字海南官方Logo为核心根基，所有色彩均源自Logo原生视觉资产，通过“提取—优化—扩展—标准化”的科学流程，实现从单一标识色到企业级设计系统色的演变；我们以Logo主体科技蓝为基础校准优化出自贸蓝作为品牌主色，从Logo辅助色延伸出贴合海南海洋、生态、人文特质的蓝青、绿色、暖色系，并遵循色相过渡规律补充紫色系，形成调性统一、适配全场景的色彩体系，既坚守品牌基因统一性，又兼顾地域表达、科技属性与实用需求。
色彩结构
系统分为四大类，各类色彩分工明确、层级清晰，形成完整的视觉体系。
- 品牌色：核心识别色，聚焦品牌传播与核心视觉强调，仅保留自贸蓝一款，强化品牌唯一性；
- 功能色：状态反馈色，遵循用户通用认知，用于界面成功、警告、错误、信息等状态提示，全系统统一；
- 扩展色：多场景应用色，共12色，覆盖全色域，用于数据可视化、专题场景、运营模块、分类标识等；
- 中性色：基础辅助色，用于文本、背景、边框、布局等，保证界面层级清晰、可读性强。
品牌色
品牌色 #075AED（自贸蓝 blue-5）由数字海南 Logo 主体蓝色演变而来，色相偏正蓝，具备强烈科技感、信任感与国际化气质，契合自贸港"开放互联、数字赋能"的定位。
用于主按钮、导航高亮、品牌标题、核心入口、重点强调，是品牌识别的核心锚点。
功能色
功能色用于界面状态反馈，遵循用户通用认知，全系统统一。每个功能色可扩展 10 级色阶，覆盖产品设计中各需求场景。
| 功能类型 | 色板 | 色值 | 应用场景 |
|---|---|---|---|
| 品牌色 | 自贸蓝 | blue-5 #075AED | 强调、选中态 |
| 错误色 | 丹黎红 | red-5 #E23F3F | 待办、提醒、风险提示、中期状态 |
| 告警色 | 落日橙 | sunset-5 #F78B3C | 删除、驳回、高危操作、错误提示 |
| 成功色 | 雨林绿 | green-5 #17B864 | 操作完成、审核通过、合规 |
扩展色
扩展色板共12色，涵盖红、橙、黄、绿、青、蓝、紫七大色系，源于海南自然风貌、民族文化、自贸港定位与科技创新四大维度。色板按功能分为四组：暖色组用于强调、价值表达与数据高亮；绿色组传递生态、健康与动态感；蓝色组承担品牌主色与辅助色职能；紫色组用于科技创新与高端场景。每色扩展10级色阶，满足背景、hover、主色、强调等全场景需求。所有色彩均通过WCAG 2.1 AA无障碍标准校验，确保文字与背景对比度达标，支持色盲友好设计。
扩展色板
色阶参考表
| 色板/色阶 | 0 | 1 | 2 | 3 | 4 | 5（主色） | 6 | 7 | 8 | 9 |
|---|---|---|---|---|---|---|---|---|---|---|
| 丹黎红/red | #FFF6F6 | #FFE8E8 | #FFCFCF | #FFB3B3 | #F47A7A | #E23F3F | #B81B1B | #901111 | #660A0A | #3D0404 |
| 熔礁橙/coral | #FFF7F2 | #FFEADF | #FFD4BF | #FFB99F | #FF8A66 | #E65C3C | #CC4A2E | #A33822 | #7A2616 | #51140A |
| 落日橙/sunset | #FFF9F0 | #FFF0DC | #FFE1B9 | #FFD296 | #FFB35C | #F78B3C | #E67728 | #CC6218 | #A34D08 | #7A3800 |
| 自贸金/gold | #FFFBEB | #FFF3CD | #FFE79C | #FFDB6B | #FFC81A | #F5B800 | #D9A000 | #BF8800 | #A37000 | #875800 |
| 清柠黄绿/lime | #FEFFEE | #F9FFD7 | #F3FFAF | #EDF987 | #D9E947 | #C8E02F | #B0C822 | #98B015 | #809808 | #688000 |
| 雨林绿/green | #F2FFF7 | #D9F9E8 | #AFF0D0 | #86E7B8 | #4FD693 | #17B864 | #129E54 | #0D8444 | #086A34 | #035024 |
| 潮汐青/cyan | #F0FFFB | #CFF9F0 | #9FF0E1 | #6FE7D2 | #1FD4B8 | #00C2A8 | #00A892 | #008E7C | #007466 | #005A50 |
| 海岛蓝/sky | #F0FCFF | #C7F2FF | #9FE8FF | #77DEFF | #4FC9ED | #00B4D8 | #009AB9 | #00809A | #00667B | #004C5C |
| 自贸蓝/blue | #F2F7FF | #E0ECFF | #B9D5FF | #84B8FF | #3A8AFF | #075AED | #064ED0 | #0542B3 | #043696 | #032A79 |
| 琼韵蓝/legacy | #F3F6FF | #E3EBFF | #CCDCFF | #ACBFFF | #667FFF | #334BE4 | #2A3FC8 | #2233A6 | #1A2980 | #121F59 |
| 科创紫/purple | #F8F5FF | #EDE4FF | #D3C2FF | #B9A0FF | #8D6AE7 | #6B46D1 | #5A39B8 | #492C9F | #311870 | #23105A |
| 云境紫/magenta | #FDF5FF | #F9E4FF | #F3C3FF | #EDA2FF | #DC73F6 | #B74FD1 | #A03FB8 | #892F9F | #621A73 | #500E5D |
色板生成工具
中性色
人眼在不同亮度区域的敏感度不同，所以确立了"背景细腻分层、文字大步进拉开、完全避免纯黑"的取色规则，最终达到了背景柔和、文字清晰、视觉舒适的效果。
| 色板/色阶 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
|---|---|---|---|---|---|---|---|---|---|---|
| 礁石灰/grey | #FFFFFF | #F7F7F7 | #F2F2F2 | #EBEBEB | #E0E0E0 | #CCCCCC | #A6A6A6 | #858585 | #525252 | #1A1A1A |
| 黑色不透明度 | #000000 0% | #000000 3% | #000000 5% | #000000 8% | #000000 12% | #000000 20% | #000000 35% | #000000 48% | #000000 68% | #000000 90% |