运维个人技术栈
Blog Categories Tags About
运维个人技术栈

颜色选择

kentxxq  收录于  类别 Point
     约 2588 字  预计阅读 6 分钟 

想着自己的 logo, 头像, 甚至是一些网站都应该有一个颜色. 所以做一些研究挑选一下.

  • 颜色来源于 这个设计师推荐的颜色
  • 适配主题. 现代系统通常有明暗两种主题色.
    • 不要用纯白/深灰/浅灰. 容易和背景色重合. 不要用纯黑, 黑底白字难以辨认.
    • 暗色主题:
      • 选择同颜色的浅色系, 暗色主题不适合高饱和的颜色/深色系. 例如错误提示不要用纯红, 应该 +40% 透明白色, 变成类似于粉红的效果. 或者紫色的渐变图, 浅色可以选 500, 深色选 200
  • 所以只有 #57ACDC 蓝色, #57DCBE 蓝绿色, #60C689 绿色符合浅色要求
  • 其中蓝绿色在白色背景对比度不够, 淘汰.
  • 蓝色和绿色对比
    • 蓝色和青色有点接近/歧义.
    • #57ACDC 在 谷歌颜色选择器 是 400 色深, 而 #60C689 色深是 300. 在白色背景中区别不大, 但是暗色主题中个人感觉更好
    • 人眼对绿色更敏感, 更容易辨认. 比如红绿灯没有蓝灯. 因为绿色很常见, 所以人眼对绿色适应能力强, 不容易引起疲劳. 眼睛/显示器等设备有很多滤蓝光
    • 在 rgb 模型中绿色 #00FF00 的亮度值相对较高，而蓝色 #0000FF 的亮度值相对较低. 所以绿色对比度更高.
    • AI 数据也都更推荐绿色

用 gpt 做了几个界面对比效果.

  • 对比主题背景效果

    html

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SVG Viewer with Four Themes</title>
    <style>
      body {
        margin: 0;
        font-family: Arial, sans-serif;
        display: flex;
        flex-wrap: wrap;
        height: 100vh;
      }

      .section {
        flex: 1 1 50%; /* 每个区域占据一半宽度，四块 */
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
      }

      /* 四个主题的背景和字体颜色 */
      .white-theme {
        background-color: white;
        color: black;
      }

      .light-gray-theme {
        background-color: #f3f3f3; /* 浅灰色 */
        color: black;
      }

      .dark-gray-theme {
        background-color: #2e2e2e; /* 深灰色 */
        color: white;
      }

      .black-theme {
        background-color: black;
        color: white;
      }

      /* 通用样式 */
      .container {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
      }

      .svg-wrapper {
        padding: 10px;
        border-radius: 10px;
        background: inherit; /* 匹配父容器背景 */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }

      .svg-wrapper img {
        max-width: 100px;
        height: auto;
        display: block;
      }

      /* 不同主题下调整 box-shadow */
      .dark-gray-theme .svg-wrapper,
      .black-theme .svg-wrapper {
        box-shadow: 0 4px 6px rgba(255, 255, 255, 0.1);
      }
    </style>
  </head>
  <body>
    <!-- 白色主题 -->
    <div class="section white-theme">
      <div class="container">
        <div class="svg-wrapper">
          <img src="file:///D:/work/渐变白字.svg" alt="渐变白字.svg" />
        </div>
        <div class="svg-wrapper">
          <img src="file:///D:/work/渐变黑字.svg" alt="渐变黑字.svg" />
        </div>
        <div class="svg-wrapper">
          <img src="file:///D:/work/绿色黑字.svg" alt="绿色黑字.svg" />
        </div>
      </div>
    </div>

    <!-- 浅灰色主题 -->
    <div class="section light-gray-theme">
      <div class="container">
        <div class="svg-wrapper">
          <img src="file:///D:/work/渐变白字.svg" alt="渐变白字.svg" />
        </div>
        <div class="svg-wrapper">
          <img src="file:///D:/work/渐变黑字.svg" alt="渐变黑字.svg" />
        </div>
        <div class="svg-wrapper">
          <img src="file:///D:/work/绿色黑字.svg" alt="绿色黑字.svg" />
        </div>
      </div>
    </div>

    <!-- 深灰色主题 -->
    <div class="section dark-gray-theme">
      <div class="container">
        <div class="svg-wrapper">
          <img src="file:///D:/work/渐变白字.svg" alt="渐变白字.svg" />
        </div>
        <div class="svg-wrapper">
          <img src="file:///D:/work/渐变黑字.svg" alt="渐变黑字.svg" />
        </div>
        <div class="svg-wrapper">
          <img src="file:///D:/work/绿色黑字.svg" alt="绿色黑字.svg" />
        </div>
      </div>
    </div>

    <!-- 黑色主题 -->
    <div class="section black-theme">
      <div class="container">
        <div class="svg-wrapper">
          <img src="file:///D:/work/渐变白字.svg" alt="渐变白字.svg" />
        </div>
        <div class="svg-wrapper">
          <img src="file:///D:/work/渐变黑字.svg" alt="渐变黑字.svg" />
        </div>
        <div class="svg-wrapper">
          <img src="file:///D:/work/绿色黑字.svg" alt="绿色黑字.svg" />
        </div>
      </div>
    </div>
  </body>
</html>

  • 假设是聊天场景的头像

    html

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Chat-Like SVG Viewer</title>
    <style>
      body {
        margin: 0;
        font-family: Arial, sans-serif;
        display: flex;
        flex-wrap: wrap;
        height: 100vh;
      }

      .section {
        flex: 1 1 50%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding: 20px;
      }

      /* 四个主题的背景和字体颜色 */
      .white-theme {
        background-color: white;
        color: black;
      }

      .light-gray-theme {
        background-color: #f3f3f3; /* 浅灰色 */
        color: black;
      }

      .dark-gray-theme {
        background-color: #2e2e2e; /* 深灰色 */
        color: white;
      }

      .black-theme {
        background-color: black;
        color: white;
      }

      /* 聊天气泡样式 */
      .chat {
        display: flex;
        align-items: center;
        margin: 10px 0;
        gap: 10px;
        width: 100%;
      }

      .chat-left {
        justify-content: flex-start;
      }

      .chat-right {
        justify-content: flex-end;
      }

      .chat-bubble {
        max-width: 60%;
        padding: 10px 15px;
        border-radius: 20px;
        position: relative;
        font-size: 14px;
      }

      .chat-left .chat-bubble {
        background-color: #e0e0e0;
        color: black;
      }

      .chat-right .chat-bubble {
        background-color: #007aff;
        color: white;
      }

      .chat-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .chat-avatar img {
        width: 100%;
        height: auto;
      }

      /* 在深色主题调整聊天气泡 */
      .dark-gray-theme .chat-left .chat-bubble,
      .black-theme .chat-left .chat-bubble {
        background-color: #555;
        color: white;
      }

      .dark-gray-theme .chat-right .chat-bubble,
      .black-theme .chat-right .chat-bubble {
        background-color: #1a73e8;
        color: white;
      }
    </style>
  </head>
  <body>
    <!-- 白色主题 -->
    <div class="section white-theme">
      <div class="chat chat-left">
        <div class="chat-avatar">
          <img src="file:///D:/work/渐变白字.svg" alt="User Avatar 1" />
        </div>
        <div class="chat-bubble">Message with Avatar 1</div>
      </div>
      <div class="chat chat-left">
        <div class="chat-avatar">
          <img src="file:///D:/work/渐变黑字.svg" alt="User Avatar 2" />
        </div>
        <div class="chat-bubble">Message with Avatar 2</div>
      </div>
      <div class="chat chat-left">
        <div class="chat-avatar">
          <img src="file:///D:/work/绿色黑字.svg" alt="User Avatar 3" />
        </div>
        <div class="chat-bubble">Message with Avatar 3</div>
      </div>
    </div>

    <!-- 浅灰色主题 -->
    <div class="section light-gray-theme">
      <div class="chat chat-right">
        <div class="chat-bubble">Message with Avatar 1</div>
        <div class="chat-avatar">
          <img src="file:///D:/work/渐变白字.svg" alt="User Avatar 1" />
        </div>
      </div>
      <div class="chat chat-right">
        <div class="chat-bubble">Message with Avatar 2</div>
        <div class="chat-avatar">
          <img src="file:///D:/work/渐变黑字.svg" alt="User Avatar 2" />
        </div>
      </div>
      <div class="chat chat-right">
        <div class="chat-bubble">Message with Avatar 3</div>
        <div class="chat-avatar">
          <img src="file:///D:/work/绿色黑字.svg" alt="User Avatar 3" />
        </div>
      </div>
    </div>

    <!-- 深灰色主题 -->
    <div class="section dark-gray-theme">
      <div class="chat chat-left">
        <div class="chat-avatar">
          <img src="file:///D:/work/渐变白字.svg" alt="User Avatar 1" />
        </div>
        <div class="chat-bubble">Message with Avatar 1</div>
      </div>
      <div class="chat chat-left">
        <div class="chat-avatar">
          <img src="file:///D:/work/渐变黑字.svg" alt="User Avatar 2" />
        </div>
        <div class="chat-bubble">Message with Avatar 2</div>
      </div>
      <div class="chat chat-left">
        <div class="chat-avatar">
          <img src="file:///D:/work/绿色黑字.svg" alt="User Avatar 3" />
        </div>
        <div class="chat-bubble">Message with Avatar 3</div>
      </div>
    </div>

    <!-- 黑色主题 -->
    <div class="section black-theme">
      <div class="chat chat-right">
        <div class="chat-bubble">Message with Avatar 1</div>
        <div class="chat-avatar">
          <img src="file:///D:/work/渐变白字.svg" alt="User Avatar 1" />
        </div>
      </div>
      <div class="chat chat-right">
        <div class="chat-bubble">Message with Avatar 2</div>
        <div class="chat-avatar">
          <img src="file:///D:/work/渐变黑字.svg" alt="User Avatar 2" />
        </div>
      </div>
      <div class="chat chat-right">
        <div class="chat-bubble">Message with Avatar 3</div>
        <div class="chat-avatar">
          <img src="file:///D:/work/绿色黑字.svg" alt="User Avatar 3" />
        </div>
      </div>
    </div>
  </body>
</html>
  • 选择了绿底黑字.
  • 渐变白字的字母在黑色背景下有点刺眼, 白色背景又不够突出
  • 渐变黑字的背景色类似青色, 沟通中会有歧义.
  • 一些文字编辑的界面，白色或者浅色背景才能让人产生「在纸张上书写」的感觉
更新于 2024-12-19
 Point
 | 主页