主色
mainColor
背景色
bgColor
容器色
surfaceColor
链接色
linkColor
强调色
accentColor
主色上文字色
onMainColor
文本颜色
textColor

设计逻辑关系

主色决定整体调性 背景色决定主题亮度 容器色实现明暗过渡 链接色辅助主色 强调色实现视觉增强 文本色与背景形成安全对比。

UI色谱各颜色的定义及应用场景

简单示例高级示例

  1. 01.主色(mainColor)

    • 定义:这是整个网站最核心的品牌色,需要与主题创意高度契合。
    • 应用:标题、主按钮背景、图标...
  2. 02.背景色(bgColor)

    • 定义:作为页面基底色,能够突出显示页面文本或元素。
    • 应用:网页主背景、窗口背景...
  3. 03.容器色(surfaceColor)

    • 定义:主色与背景间的过渡颜色,用于区分内容层级。

    • 应用:输入框背景,次背景色...

  4. 04.链接色(linkColor)

    • 定义:需要明显区别于文本色。并辅助主色建立色彩风格。

    • 应用:超链接、次按钮背景色...

  5. 05.强调色(accentColor)

    • 定义:比链接色饱和度更高或更深,是整套配色中最亮眼的颜色。

    • 应用:交互色,需要引起注意的文本色...

  6. 06.主色上文字色(onMainColor)

    • 定义:专为以主色为背景时,在其上显示的文字或图标的颜色。

    • 应用:按钮文字色、标题栏文字色...

  7. 07.文本颜色(textColor)

    • 定义:主要内容的阅读色,需符合WCAG对比度标准,不可定义的过于刺眼。

    • 应用:在网页主背景或容器色上的文本色...

主题概括

窗口

注意!网站由于采用了headLoader.js加速技术,并且设置了每周一开始,在您第一次打开本网站时,自动执行一次差异化更新数据,从而使网站更新到最新的版本。
色相度、饱和度、亮度各值占比
  • 色相度占比

  • 饱和度占比

  • 亮度值占比

选择按钮
常规按钮
开关按钮
翻页按钮
安全色卡

后色 mainColor

前色 onMainColor

后色 bgColor

前色1:linkColor

前色2:accentColor

前色3:textColor

后色 surfaceColor

前色1:linkColor

前色2:accentColor

前色3:textColor

后色 linkColor

前色 bgColor

后色 accentColor

前色 bgColor

后色 textColor

前色 bgColor

关于我
我是一名网站前端工程师,江湖道义称一声宇哥,追求前端技术和艺术20余载,自由职业。
UI精灵网站及技术成果全部由我研发,如果想拥有和我一样的网站,或者需要我的技术支持,欢迎与我洽谈合作。点此发送邮件
如果我的成果能够帮您节省宝贵的时间。不妨点击我的头像请我喝杯咖啡。并诚邀来github关注我的开源项目。
class Life {
  constructor() {
    this.memories = [];
    this.lessonsLearned = new Set();
    this.age = 0;
    this.happiness = 0;
    this.wisdom = 0;
  }

  // 生活是一个持续的事件循环
  async live() {
    while (true) {
      try {
        const event = await this.experienceLife();
        const lesson = this.processEvent(event);
        
        if (lesson) {
          this.learn(lesson);
          this.wisdom += 1;
        }
        
        this.age += 1;
        this.happiness = Math.min(100, this.happiness + this.wisdom / 10);
        
      } catch (error) {
        console.error('人生错误:', error.message);
        this.lessonsLearned.add(`从${error.name}中恢复`);
        this.wisdom += 2; // 我们从错误中学得更多
      } finally {
        if (this.age % 10 === 0) {
          this.reflect(); // 定期反思
        }
      }
    }
  }

  // 经历生活 - 随机事件发生器
  experienceLife() {
    return new Promise((resolve, reject) => {
      const events = [
        '成功', '失败', '爱情', '失去', '机遇', '挑战',
        '友谊', '背叛', '成长', '停滞', '创造', '破坏'
      ];
      
      const randomEvent = events[Math.floor(Math.random() * events.length)];
      const shouldFail = Math.random() > 0.8; // 20%几率失败
      
      setTimeout(() => {
        if (shouldFail) {
          reject(new Error(randomEvent));
        } else {
          resolve(randomEvent);
        }
      }, 1000); // 生活不会立即给出答案
    });
  }

  // 处理生活事件
  processEvent(event) {
    this.memories.push(event);
    
    switch(event) {
      case '成功':
        this.happiness += 15;
        return '成功是暂时的,保持谦逊';
      case '失败':
        this.happiness -= 10;
        return '失败是最好的老师';
      case '爱情':
        this.happiness += 25;
        return '爱需要付出与珍惜';
      case '失去':
        this.happiness -= 20;
        return '失去教会我们珍惜拥有';
      default:
        return '每个经历都有其意义';
    }
  }

  // 学习教训
  learn(lesson) {
    if (!this.lessonsLearned.has(lesson)) {
      this.lessonsLearned.add(lesson);
      console.log(`学到了: ${lesson}`);
    }
  }

  // 反思人生
  reflect() {
    console.log('------ 人生反思 ------');
    console.log(`年龄: ${this.age}`);
    console.log(`幸福指数: ${this.happiness}`);
    console.log(`智慧等级: ${this.wisdom}`);
    console.log('最近的记忆:', this.memories.slice(-5));
    console.log('学到的教训:', [...this.lessonsLearned].slice(-3));
    console.log('---------------------');
  }
}

// 启动人生
const myLife = new Life();
myLife.live().catch(() => {
  console.log('人生终将结束,但智慧永存');
});

LOADING...