扫描关注公众号
公众号二维码
扫描使用 随身工具箱
随身工具箱小程序二维码

设计师必备!随身工具宝颜色转换神器

设计师的颜色困扰

作为设计师或开发者,经常需要处理颜色:

  • 格式转换:Hex转RGB、RGB转HSL
  • 配色参考:找相似颜色、补色、对比色
  • 代码生成:快速生成CSS代码
  • 颜色命名:不知道颜色叫什么

随身工具宝颜色转换工具

「随身工具宝」小程序的颜色转换工具,是设计师的好帮手:

功能特点

  1. 多种格式互转

    • Hex:#FF5733
    • RGB:rgb(255, 87, 51)
    • HSL:hsl(9, 100%, 60%)
    • CMYK:cmyk(0%, 66%, 80%, 0%)
  2. 颜色信息

    • 显示颜色名称
    • 显示亮度值
    • 显示对比度
    • 显示颜色预览
  3. 配色工具

    • 相似色推荐
    • 补色计算
    • 对比色生成
    • 渐变色预览
  4. 代码生成

    • CSS代码
    • SCSS变量
    • 十六进制值
    • RGB值

使用示例

输入 #FF5733,获得:

  • RGB:rgb(255, 87, 51)
  • HSL:hsl(9, 100%, 60%)
  • 颜色名:珊瑚红
  • CSS代码:color: #FF5733;

使用场景

"设计时经常需要转换颜色格式,用这个工具一键搞定,太方便了!" —— UI设计师小张

"前端开发时,快速获取颜色的各种格式,效率提升很多!" —— 前端开发小李

"做PPT时找配色,用这个工具找相似色,配色效果好多了!" —— 职场人士小王

设计小贴士

颜色搭配原则

  • 邻近色搭配:色轮上相邻的颜色
  • 互补色搭配:色轮上相对的颜色
  • 三色系搭配:均匀分布的三种颜色

对比度注意

  • 文字和背景要有足够对比度
  • 确保可读性
  • 参考WCAG标准

更多设计工具

「随身工具宝」还有其他设计工具:

  • 单位换算:长度、面积等单位转换
  • 进制转换:二进制、十六进制转换
  • 图片压缩:在线图片压缩

立即体验

打开微信,搜索「随身工具宝」,进入「设计工具」分类找到「颜色转换」。

随身工具宝小程序码

让颜色转换更高效!