Color 颜色定义

数据大屏颜色定义规范。所有颜色变量已定义在 vars.css 和 vars.js 中。

CSS样式

全部 color 样式代码：

查看代码

vars.csscolor.css

css

/* 大屏组件全局 CSS 变量 */

:root {
  /* ==================== 主题色 ==================== */
  --hn-color-primary: #439FFF;              /* 品牌色 */

  /* ==================== 辅助色 ==================== */
  --hn-color-auxiliary-blue: #00EEFF;       /* 海天蓝 */
  --hn-color-auxiliary-cyan: #00FFB7;       /* 炫丽青 */
  --hn-color-auxiliary-purple: #AA00FF;     /* 神秘紫 */

  /* ==================== 文字颜色 ==================== */
  --hn-color-text-white: #FFFFFF;           /* 闪亮白 */
  --hn-color-text-gray: #A3C0E5;            /* 朦胧灰 */

  /* ==================== 告警颜色 ==================== */
  --hn-color-success: #00FF4D;              /* 成功绿 */
  --hn-color-link: #247BFF;                 /* 超链蓝 */
  --hn-color-warning: #FFC300;              /* 警告黄 */
  --hn-color-danger: #FF1F47;               /* 危险红 */

  /* ==================== 渐变色 ==================== */
  /* 品牌色渐变01 */
  --hn-gradient-brand-start: #A1CFFF;
  --hn-gradient-brand-end: #439FFF;
  --hn-gradient-brand: linear-gradient(90deg, #A1CFFF 0%, #439FFF 100%);

  /* 蓝色渐变02 */
  --hn-gradient-blue-start: #7FB2FF;
  --hn-gradient-blue-end: #0066FF;
  --hn-gradient-blue: linear-gradient(90deg, #7FB2FF 0%, #0066FF 100%);

  /* 红色渐变03 */
  --hn-gradient-red-start: #E98197;
  --hn-gradient-red-end: #E98197;
  --hn-gradient-red: linear-gradient(90deg, #E98197 0%, #E98197 100%);

  /* 蓝青色渐变04 */
  --hn-gradient-cyan-start: #00D4FF;
  --hn-gradient-cyan-end: #00FFB7;
  --hn-gradient-cyan: linear-gradient(90deg, #00D4FF 0%, #00FFB7 100%);

  /* 警告渐变05 */
  --hn-gradient-warning-start: #FFE799;
  --hn-gradient-warning-end: #FFC300;
  --hn-gradient-warning: linear-gradient(90deg, #FFE799 0%, #FFC300 100%);

  /* 绿色渐变06 */
  --hn-gradient-green-start: #8CF7B7;
  --hn-gradient-green-end: #00FF4D;
  --hn-gradient-green: linear-gradient(90deg, #8CF7B7 0%, #00FF4D 100%);

  /* 白色渐变07 */
  --hn-gradient-white-start: #FFFFFF;
  --hn-gradient-white-end: #A3C0E5;
  --hn-gradient-white: linear-gradient(90deg, #FFFFFF 0%, #A3C0E5 100%);

  /* 紫色渐变08 */
  --hn-gradient-purple-start: #D47FFF;
  --hn-gradient-purple-end: #AA00FF;
  --hn-gradient-purple: linear-gradient(90deg, #D47FFF 0%, #AA00FF 100%);

  /* ==================== 背景色 ==================== */
  --hn-bg-center: #072652;                  /* 径向渐变中心 */
  --hn-bg-edge: #00102A;                    /* 径向渐变边缘 */
  --hn-bg-radial: radial-gradient(60% 60% at 50% 50%, #072652 0%, #00102A 100%), #D8D8D8;
  --hn-bg-radial-center: linear-gradient(0deg, #072652, #072652), #D8D8D8;;
  --hn-bg-radial-edge: linear-gradient(0deg, #00102A, #00102A), #D8D8D8;

  /* ==================== 品牌梯度色 ==================== */
  --hn-brand-level-1: #72B7FF;
  --hn-brand-level-2: #439FFF;
  --hn-brand-level-3: #1377FF;
  --hn-brand-level-4: #133EF1;
  --hn-brand-level-5: #000BDA;

  /* ==================== 白色梯度色（文字） ==================== */
  --hn-text-level-1: #FFFFFF;
  --hn-text-level-2: #D8E4F4;
  --hn-text-level-3: #A3C0E5;
  --hn-text-level-4: #759DCF;
  --hn-text-level-5: #426FA9;

  /* ==================== 字体家族 ==================== */
  --hn-font-family-title: 'DouYuZhuiGuangTi', sans-serif;   /* 斗鱼追光体 - 头部标题 */
  --hn-font-family-cn: 'Source Han Sans CN', 'Noto Sans SC', sans-serif;  /* 思源黑体 - 中文 */
  --hn-font-family-num: 'D-DIN', 'DIN Alternate', sans-serif;  /* D-DIN - 数值/英文 */

  /* ==================== 字号 ==================== */
  --hn-font-size-h1: 28px;       /* 头部标题栏 */
  --hn-font-size-h2: 16px;       /* 标题 */
  --hn-font-size-h3: 14px;       /* 小标题、按钮文字 */
  --hn-font-size-body: 14px;     /* 正文 */
  --hn-font-size-caption: 12px;  /* 辅助文字 */
  --hn-font-size-num-lg: 32px;   /* 大数值 */
  --hn-font-size-num-md: 16px;   /* 中数值 */
  --hn-font-size-num-sm: 14px;   /* 小数值 */
  --hn-font-size-num-xs: 12px;   /* 超小数值 */

  /* ==================== 字重 ==================== */
  --hn-font-weight-regular: 400;
  --hn-font-weight-medium: 500;
  --hn-font-weight-bold: 700;
}

css

/* 颜色网格 */
.color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 24px;
}

/* 颜色项 */
.color-item {
  position: relative;
  width: 120px;
  height: 56px;
}

.color-ring {
  width: 56px;
  height: 56px;
}

.color-info {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  left: 40px;
  top: -16px;
}

.color-name {
  color: var(--hn-color-text-white);
  font-size: 14px;
}

.color-value {
  font-size: 12px;
  font-family: var(--hn-font-family-num), 'Courier New', monospace;
}

/* 渐变网格 */
.gradient-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 48px;
}

.gradient-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gradient-name {
  color: var(--hn-text-level-3);
  font-size: 14px;
}

.gradient-bar {
  width: 100%;
  height: 12px;
  border-radius: 12px;
}

.gradient-values {
  display: flex;
  justify-content: space-between;
}

.gradient-value {
  font-size: 12px;
  font-family: var(--hn-font-family-num), 'Courier New', monospace;
}

/* 梯度色 - 纵向排列 */
.level-wrapper {
  display: flex;
  gap: 48px;
}

.level-column {
  display: flex;
  flex-direction: column;
}

.level-stack {
  display: flex;
  flex-direction: column;
}

.level-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.level-bar {
  width: 80px;
  height: 36px;
}

.level-value {
  font-size: 14px;
  font-family: var(--hn-font-family-num), 'Courier New', monospace;
}

/* 背景色展示 */
.bg-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 200px;
}

.bg-preview {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bg-radial-box {
  width: 160px;
  height: 100px;
  background: var(--hn-bg-radial);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg-label {
  color: var(--hn-text-level-3);
  font-size: 14px;
}

.bg-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bg-info-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bg-info-label {
  color: var(--hn-text-level-3);
  font-size: 14px;
}

.bg-info-value {
  font-size: 14px;
  font-family: var(--hn-font-family-num), 'Courier New', monospace;
}

.bg-color-block {
  display: flex;
}
.bg-color-block-center {
  width: 80px;
  height: 36px;
  background: var(--hn-bg-radial-center);
}
.bg-color-block-edge {
  width: 80px;
  height: 36px;
  background: var(--hn-bg-radial-edge);
}

主题色、辅助色、文字颜色和告警颜色

定义了品牌主色、三种辅助色、两种文字颜色和四种告警颜色。

主题色

品牌色

#439FFF

辅助色

海天蓝

#00EEFF

炫丽青

#00FFB7

神秘紫

#AA00FF

文字颜色

闪亮白

#FFFFFF

朦胧灰

#A3C0E5

告警颜色

成功绿

#00FF4D

超链蓝

#247BFF

警告黄

#FFC300

危险红

#FF1F47

查看代码

主题色辅助色文字颜色告警颜色

html

<!-- 主题色 -->
<div class="color-grid">
  <div v-for="item in themeColors" :key="item.color" class="color-item">
    <svg class="color-ring" viewBox="0 0 60 60" :style="{ filter: `drop-shadow(0 0 12px ${item.color})` }">
      <circle
        cx="30"
        cy="30"
        r="22"
        fill="none"
        :stroke="item.color"
        stroke-width="8"
        stroke-linecap="butt"
        stroke-dasharray="104 35"
        stroke-dashoffset="0"
      />
    </svg>
    <div class="color-info">
      <div class="color-name">{{ item.name }}</div>
      <div class="color-value" :style="{ color: item.color }">{{ item.color }}</div>
    </div>
  </div>
</div>

html

<!-- 辅助色 -->
<div class="color-grid">
  <div v-for="item in auxiliaryColors" :key="item.color" class="color-item">
    <svg class="color-ring" viewBox="0 0 60 60" :style="{ filter: `drop-shadow(0 0 12px ${item.color})` }">
      <circle
        cx="30"
        cy="30"
        r="22"
        fill="none"
        :stroke="item.color"
        stroke-width="8"
        stroke-linecap="butt"
        stroke-dasharray="104 35"
        stroke-dashoffset="0"
      />
    </svg>
    <div class="color-info">
      <div class="color-name">{{ item.name }}</div>
      <div class="color-value" :style="{ color: item.color }">{{ item.color }}</div>
    </div>
  </div>
</div>

html

<!-- 文字颜色 -->
<div class="color-grid">
  <div v-for="item in textColors" :key="item.color" class="color-item">
    <svg class="color-ring" viewBox="0 0 60 60" :style="{ filter: `drop-shadow(0 0 12px ${item.color})` }">
      <circle
        cx="30"
        cy="30"
        r="22"
        fill="none"
        :stroke="item.color"
        stroke-width="8"
        stroke-linecap="butt"
        stroke-dasharray="104 35"
        stroke-dashoffset="0"
      />
    </svg>
    <div class="color-info">
      <div class="color-name">{{ item.name }}</div>
      <div class="color-value" :style="{ color: item.color }">{{ item.color }}</div>
    </div>
  </div>
</div>

html

<!-- 告警颜色 -->
<div class="color-grid">
  <div v-for="item in alertColors" :key="item.color" class="color-item">
    <svg class="color-ring" viewBox="0 0 60 60" :style="{ filter: `drop-shadow(0 0 12px ${item.color})` }">
      <circle
        cx="30"
        cy="30"
        r="22"
        fill="none"
        :stroke="item.color"
        stroke-width="8"
        stroke-linecap="butt"
        stroke-dasharray="104 35"
        stroke-dashoffset="0"
      />
    </svg>
    <div class="color-info">
      <div class="color-name">{{ item.name }}</div>
      <div class="color-value" :style="{ color: item.color }">{{ item.color }}</div>
    </div>
  </div>
</div>

渐变色

8 种预定义渐变色，适用于各类数据可视化场景。

品牌色渐变01

#A1CFFF#439FFF

蓝色渐变02

#7FB2FF#0066FF

红色渐变03

#E98197#E98197

蓝青色渐变04

#00D4FF#00FFB7

警告渐变05

#FFE799#FFC300

绿色渐变06

#8CF7B7#00FF4D

白色渐变07

#FFFFFF#A3C0E5

紫色渐变08

#D47FFF#AA00FF

查看代码

模板

html

<div class="gradient-grid">
  <div v-for="item in gradients" :key="item.name" class="gradient-item">
    <div class="gradient-name">{{ item.name }}</div>
    <div
      class="gradient-bar"
      :style="{ background: `linear-gradient(90deg, ${item.from} 0%, ${item.to} 100%)` }"
    ></div>
    <div class="gradient-values">
      <span class="gradient-value" :style="{ color: item.from }">{{ item.from }}</span>
      <span class="gradient-value" :style="{ color: item.to }">{{ item.to }}</span>
    </div>
  </div>
</div>

品牌梯度色与文字梯度色

品牌梯度色和文字梯度色各提供 5 个层级，用于不同强调程度的视觉表达。 1-3中梯度颜色追求对比度可以跳格用色。

品牌梯度色

#72B7FF

#439FFF

#1377FF

#133EF1

#000BDA

白色梯度色（文字）

#FFFFFF

#D8E4F4

#A3C0E5

#759DCF

#426FA9

查看代码

品牌梯度色文字梯度色

html

<!-- 品牌梯度色 -->
<div class="level-column">
  <div class="level-stack">
    <div v-for="item in brandLevels" :key="item.level" class="level-row">
      <div class="level-bar" :style="{ backgroundColor: item.color }"></div>
      <div class="level-value" :style="{ color: item.color }">{{ item.color }}</div>
    </div>
  </div>
</div>

html

<!-- 白色梯度色（文字） -->
<div class="level-column">
  <div class="level-stack">
    <div v-for="item in textLevels" :key="item.level" class="level-row">
      <div class="level-bar" :style="{ backgroundColor: item.color }"></div>
      <div class="level-value" :style="{ color: item.color }">{{ item.color }}</div>
    </div>
  </div>
</div>

背景色

径向渐变背景色，从中心到边缘逐渐变暗，营造沉浸式大屏视觉效果。

径向渐变

中心：#072652

边缘：#00102A

查看代码

模板

html

<div class="bg-container">
  <!-- 径向渐变预览 -->
  <div class="bg-preview">
    <span class="bg-label">径向渐变</span>
    <div class="bg-radial-box"></div>
    <div class="bg-info">
      <div class="bg-info-row">
        <span class="bg-info-label">中心：{{ centerColor }}</span>
      </div>
      <div class="bg-info-row">
        <span class="bg-info-label">边缘：{{ edgeColor }}</span>
      </div>
    </div>
  </div>
  <!-- 边缘色块 -->
  <div class="bg-color-block">
    <div class="bg-color-block-center"></div>
    <div class="bg-color-block-edge"></div>
  </div>
</div>

Color 颜色定义 ​

CSS样式 ​

主题色、辅助色、文字颜色和告警颜色 ​

渐变色 ​

品牌梯度色与文字梯度色 ​

背景色 ​

Color 颜色定义

CSS样式

主题色、辅助色、文字颜色和告警颜色

渐变色

品牌梯度色与文字梯度色

背景色