主色
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

前色1 bgColor

前色2 onMainColor

后色 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...