免费在线颜色选择器,无需注册。支持HEX/RGB/HSL/CMYK多格式互转、色板收藏、对比度检测、渐变生成、取色器,一键复制颜色代码。 | 无需注册 · 数据绝不上传服务器
零依赖·可离线使用HEX用6位十六进制数表示颜色(如#FF5733),常用于CSS和设计软件。RGB用三个0-255的数值表示红绿蓝通道(如rgb(255,87,51)),常用于编程。两者本质相同,只是表示方式不同,本工具支持一键互转。
HSL(色相/饱和度/亮度)更直观,调整色相即可改变颜色,调整饱和度和亮度控制鲜艳度和明暗。RGB需要同时调整三个通道才能改变颜色,不够直观。设计调色时推荐用HSL,编程时常用RGB/HEX。
WCAG 2.1要求:AA级普通文本对比度≥4.5:1,大文本≥3:1;AAA级普通文本≥7:1,大文本≥4.5:1。本工具实时计算对比度并标注是否达标,帮助设计无障碍界面。
色板数据保存在浏览器localStorage中,关闭页面后仍然保留。但清除浏览器数据会删除收藏。建议使用导出功能备份色板数据。
支持。CMYK是印刷行业使用的颜色模式(青/品红/黄/黑)。本工具支持CMYK与HEX/RGB/HSL的互转。注意:屏幕显示(RGB)和印刷(CMYK)的色域不同,转换可能存在色差。
支持线性渐变(linear-gradient)和径向渐变(radial-gradient),可自定义方向、角度和多个色标。生成的CSS代码可直接复制到样式表中使用。
颜色是设计和开发中最基础的元素之一。我们的在线颜色选择器完全在浏览器本地运行,提供直观的色相/饱和度/亮度选取面板,支持HEX、RGB、HSL、CMYK四种颜色格式实时互转,内置WCAG对比度检测和CSS渐变生成器,帮助设计师和开发者快速选取、转换和管理颜色。
1. 选取颜色:在色相条上点击选择色相,然后在饱和度/亮度面板上拖拽选择具体颜色。也可以直接在HEX/RGB/HSL输入框中输入颜色值,所有格式会自动同步更新。
2. 复制颜色值:点击每个颜色值右侧的📋按钮即可复制对应格式的颜色代码到剪贴板,方便直接粘贴到CSS或代码中使用。
3. 对比度检测:输入前景色和背景色,点击「检测」按钮查看WCAG对比度比值和达标情况。确保文字在背景上有足够的可读性。
4. 渐变生成:选择起始色和结束色,选择渐变方向,工具自动生成CSS渐变代码,点击复制即可使用。
前端开发者在编写CSS时经常需要调整颜色值。使用本工具可以直观地选取颜色,一键获取HEX/RGB/HSL格式,无需在多个工具间切换。渐变生成器更是直接输出可用的CSS代码。
UI设计师在设计界面时需要确保颜色搭配和谐且满足无障碍标准。对比度检测功能帮助验证文字与背景的对比度是否达标,色板收藏功能方便管理项目配色方案。
品牌设计师需要在不同场景下使用统一的品牌色。将品牌色收藏到色板,随时获取各种格式的颜色值,确保在Web、印刷等不同媒介中颜色一致。
颜色模型对比:RGB是加色模型(光的三原色),用于屏幕显示;CMYK是减色模型(油墨三原色+黑),用于印刷;HSL将颜色分解为色相、饱和度、亮度三个维度,更符合人类直觉。HEX是RGB的十六进制简写,CSS中常用。
WCAG无障碍标准:Web内容无障碍指南(WCAG)要求文本与背景之间有足够的对比度,确保视力障碍用户也能阅读内容。AA级是最低要求,AAA级是增强要求。大文本(≥18pt或14pt粗体)的对比度要求较低。