[{"data":1,"prerenderedAt":562},["ShallowReactive",2],{"blog-color-tools-complete-guide":3},{"id":4,"title":5,"author":6,"body":7,"category":542,"description":543,"extension":544,"image":545,"keywords":546,"meta":555,"navigation":556,"path":557,"publishedAt":558,"readingTime":409,"seo":559,"stem":560,"updatedAt":558,"__hash__":561},"blog\u002Fblog\u002Fcolor-tools-complete-guide.md","在线颜色工具完全指南：免费HEX\u002FRGB\u002FHSL\u002FHSV\u002FCMYK颜色代码转换与拾色器","91AI工具团队",{"type":8,"value":9,"toc":516},"minimark",[10,14,18,22,74,77,80,84,87,91,105,109,112,116,119,123,126,201,205,208,211,214,218,221,247,250,254,257,261,273,276,279,413,417,420,437,441,444,447,474,477,480,506,509,512],[11,12,13],"h2",{"id":13},"为什么需要在线颜色工具",[15,16,17],"p",{},"颜色是设计的基础元素。无论是网页开发、UI设计、平面设计还是数据可视化，选择合适的颜色并准确传递其数值都至关重要。然而，不同场景使用不同的颜色格式——Web开发用HEX，CSS用RGB\u002FHSL，印刷用CMYK——格式互转成为日常高频需求。",[19,20,21],"h3",{"id":21},"常见颜色格式及应用场景",[23,24,25,38,47,56,65],"ul",{},[26,27,28,32,33,37],"li",{},[29,30,31],"strong",{},"HEX（十六进制）","：如 ",[34,35,36],"code",{},"#3498db","，Web开发最常用的颜色格式，简洁直观",[26,39,40,32,43,46],{},[29,41,42],{},"RGB",[34,44,45],{},"rgb(52, 152, 219)","，CSS中广泛使用，每个通道0-255",[26,48,49,32,52,55],{},[29,50,51],{},"HSL",[34,53,54],{},"hsl(204, 70%, 53%)","，更符合人类对颜色的直觉认知（色相、饱和度、亮度）",[26,57,58,32,61,64],{},[29,59,60],{},"HSV\u002FHSB",[34,62,63],{},"hsv(204, 66%, 86%)","，图形软件中常用，适合颜色选择",[26,66,67,32,70,73],{},[29,68,69],{},"CMYK",[34,71,72],{},"cmyk(66%, 35%, 0%, 14%)","，印刷行业标准格式",[11,75,76],{"id":76},"在线颜色工具的核心功能",[15,78,79],{},"91AI工具平台提供的在线颜色工具无需下载安装，纯前端本地处理，支持以下功能：",[19,81,83],{"id":82},"_1-颜色选择器拾色器","1. 颜色选择器（拾色器）",[15,85,86],{},"内置原生颜色选择器，点击即可从可视化面板中选取任意颜色。鼠标点击瞬间即可获得目标颜色的所有格式表示。",[19,88,90],{"id":89},"_2-hex颜色输入","2. HEX颜色输入",[15,92,93,94,97,98,101,102,104],{},"支持3位简写（如 ",[34,95,96],{},"#349"," 自动扩展为 ",[34,99,100],{},"#334499","）和6位标准格式（如 ",[34,103,36],{},"）。输入即自动同步到RGB、HSL等其他格式。",[19,106,108],{"id":107},"_3-rgb数值调节","3. RGB数值调节",[15,110,111],{},"分别调整R（红色）、G（绿色）、B（蓝色）三个通道，每个通道范围为0-255。滑动输入或直接键入数值，所有颜色格式实时联动更新。",[19,113,115],{"id":114},"_4-实时颜色预览","4. 实时颜色预览",[15,117,118],{},"所选颜色以大幅色块的形式实时展示，所见即所得。无论调整哪个输入通道，预览色块都会即时变化。",[19,120,122],{"id":121},"_5-hslhsvcmyk自动转换","5. HSL\u002FHSV\u002FCMYK自动转换",[15,124,125],{},"所有颜色格式自动同步计算：",[127,128,129,145],"table",{},[130,131,132],"thead",{},[133,134,135,139,142],"tr",{},[136,137,138],"th",{},"输入格式",[136,140,141],{},"自动输出格式",[136,143,144],{},"适用场景",[146,147,148,160,170,180,191],"tbody",{},[133,149,150,154,157],{},[151,152,153],"td",{},"HEX",[151,155,156],{},"RGB、HSL、HSV、CMYK",[151,158,159],{},"网页开发、UI设计",[133,161,162,164,167],{},[151,163,42],{},[151,165,166],{},"HEX、HSL、HSV、CMYK",[151,168,169],{},"CSS编码、前端开发",[133,171,172,174,177],{},[151,173,51],{},[151,175,176],{},"HEX、RGB、HSV、CMYK",[151,178,179],{},"配色方案设计",[133,181,182,185,188],{},[151,183,184],{},"HSV",[151,186,187],{},"HEX、RGB、HSL、CMYK",[151,189,190],{},"图形软件（Photoshop等）",[133,192,193,195,198],{},[151,194,69],{},[151,196,197],{},"HEX、RGB、HSL、HSV",[151,199,200],{},"印刷品设计",[19,202,204],{"id":203},"_6-一键复制颜色值","6. 一键复制颜色值",[15,206,207],{},"每个颜色格式旁都配有\"复制\"按钮，点击即可将对应颜色值复制到剪贴板。无需手动选中、复制，极大提升工作效率。",[11,209,210],{"id":210},"颜色格式换算原理",[15,212,213],{},"了解颜色格式的换算原理，有助于更精准地使用颜色工具。",[19,215,217],{"id":216},"hex与rgb互转","HEX与RGB互转",[15,219,220],{},"HEX本质上是RGB的十六进制表示：",[23,222,223,229,242],{},[26,224,225,226],{},"将HEX拆分为R、G、B三组：",[34,227,228],{},"#34 98 db",[26,230,231,232,235,236,235,239],{},"每组转换为十进制：",[34,233,234],{},"0x34 = 52","、",[34,237,238],{},"0x98 = 152",[34,240,241],{},"0xdb = 219",[26,243,244,245],{},"得到RGB：",[34,246,45],{},[15,248,249],{},"反向转换同理：将RGB各通道值转为两位十六进制即可。",[19,251,253],{"id":252},"rgb与hsl互转","RGB与HSL互转",[15,255,256],{},"HSL的色相（Hue）指色彩在色环上的位置（0-360度），饱和度（Saturation）指色彩的鲜艳程度（0%-100%），亮度（Lightness）指色彩的明暗程度（0%-100%）。换算涉及归一化RGB值、计算最大\u002F最小通道差值等数学运算，在线工具可快速完成这些计算。",[19,258,260],{"id":259},"rgb与cmyk互转","RGB与CMYK互转",[15,262,263,264,268,269,272],{},"CMYK是减色模式，用于印刷。转换将RGB归一化到",[265,266,267],"span",{},"0,1","区间后，通过公式 ",[34,270,271],{},"C=1-R, M=1-G, Y=1-B, K=min(C,M,Y)"," 计算。在线工具让设计师专注于创意，而非繁琐的计算。",[11,274,275],{"id":275},"实际应用场景",[19,277,278],{"id":278},"网页开发中的颜色使用",[280,281,286],"pre",{"className":282,"code":283,"language":284,"meta":285,"style":285},"language-css shiki shiki-themes github-light github-dark","\u002F* 从设计稿获取HEX颜色 #2ecc71，转换为CSS各格式 *\u002F\n.button {\n  background-color: #2ecc71;        \u002F* HEX *\u002F\n  color: rgb(46, 204, 113);         \u002F* RGB *\u002F\n  border: 1px solid hsl(145, 63%, 49%); \u002F* HSL *\u002F\n}\n","css","",[34,287,288,296,307,326,360,407],{"__ignoreMap":285},[265,289,292],{"class":290,"line":291},"line",1,[265,293,295],{"class":294},"sJ8bj","\u002F* 从设计稿获取HEX颜色 #2ecc71，转换为CSS各格式 *\u002F\n",[265,297,299,303],{"class":290,"line":298},2,[265,300,302],{"class":301},"sScJk",".button",[265,304,306],{"class":305},"sVt8B"," {\n",[265,308,310,314,317,320,323],{"class":290,"line":309},3,[265,311,313],{"class":312},"sj4cs","  background-color",[265,315,316],{"class":305},": ",[265,318,319],{"class":312},"#2ecc71",[265,321,322],{"class":305},";        ",[265,324,325],{"class":294},"\u002F* HEX *\u002F\n",[265,327,329,332,334,337,340,343,346,349,351,354,357],{"class":290,"line":328},4,[265,330,331],{"class":312},"  color",[265,333,316],{"class":305},[265,335,336],{"class":312},"rgb",[265,338,339],{"class":305},"(",[265,341,342],{"class":312},"46",[265,344,345],{"class":305},", ",[265,347,348],{"class":312},"204",[265,350,345],{"class":305},[265,352,353],{"class":312},"113",[265,355,356],{"class":305},");         ",[265,358,359],{"class":294},"\u002F* RGB *\u002F\n",[265,361,363,366,368,371,375,378,381,383,386,388,391,394,396,399,401,404],{"class":290,"line":362},5,[265,364,365],{"class":312},"  border",[265,367,316],{"class":305},[265,369,370],{"class":312},"1",[265,372,374],{"class":373},"szBVR","px",[265,376,377],{"class":312}," solid",[265,379,380],{"class":312}," hsl",[265,382,339],{"class":305},[265,384,385],{"class":312},"145",[265,387,345],{"class":305},[265,389,390],{"class":312},"63",[265,392,393],{"class":373},"%",[265,395,345],{"class":305},[265,397,398],{"class":312},"49",[265,400,393],{"class":373},[265,402,403],{"class":305},"); ",[265,405,406],{"class":294},"\u002F* HSL *\u002F\n",[265,408,410],{"class":290,"line":409},6,[265,411,412],{"class":305},"}\n",[19,414,416],{"id":415},"ui设计中的配色方案","UI设计中的配色方案",[15,418,419],{},"使用颜色工具的HSL模式可轻松调整配色：",[23,421,422,428,431,434],{},[26,423,424,425,427],{},"主色：",[34,426,54],{},"（蓝色）",[26,429,430],{},"浅色变体：降低饱和度或增加亮度",[26,432,433],{},"深色变体：降低亮度",[26,435,436],{},"互补色：色相偏移180度",[19,438,440],{"id":439},"印刷品设计的cmyk转换","印刷品设计的CMYK转换",[15,442,443],{},"为印刷准备的素材需使用CMYK格式。设计时用RGB\u002FHEX创作，输出前通过颜色工具转换为CMYK，确保印刷色彩准确。",[11,445,446],{"id":446},"使用技巧",[448,449,450,456,462,468],"ol",{},[26,451,452,455],{},[29,453,454],{},"从品牌色出发","：先确定品牌主色的HEX值，再利用HSL模式快速生成同色系配色（保持色相不变，调整饱和度和亮度）",[26,457,458,461],{},[29,459,460],{},"利用互补色","：在颜色工具中查看当前色相的补色（色相+180度），用于创建视觉对比",[26,463,464,467],{},[29,465,466],{},"检查颜色差异","：前景色和背景色之间需要足够对比度，确保可读性",[26,469,470,473],{},[29,471,472],{},"保存常用色板","：将常用颜色的各格式值记录下来，形成个人色板库",[11,475,476],{"id":476},"为什么选择纯前端颜色工具",[15,478,479],{},"91AI工具平台的在线颜色工具完全在浏览器本地运行：",[23,481,482,488,494,500],{},[26,483,484,487],{},[29,485,486],{},"零上传","：颜色数据无需发送到服务器，保护设计隐私",[26,489,490,493],{},[29,491,492],{},"即时响应","：所有计算在本地完成，无网络延迟",[26,495,496,499],{},[29,497,498],{},"无需注册","：打开即用，无需登录账号",[26,501,502,505],{},[29,503,504],{},"免费使用","：无次数限制，无隐藏付费",[11,507,508],{"id":508},"总结",[15,510,511],{},"在线颜色工具是设计师和开发者不可或缺的效率工具。无论是常见的HEX\u002FRGB互转，还是印刷所需的CMYK转换，亦或是灵活的色彩搭配设计，一款好用的颜色工具都能让工作事半功倍。立即体验在线颜色工具，让颜色选择不再困扰。",[513,514,515],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":285,"searchDepth":298,"depth":298,"links":517},[518,521,529,534,539,540,541],{"id":13,"depth":298,"text":13,"children":519},[520],{"id":21,"depth":309,"text":21},{"id":76,"depth":298,"text":76,"children":522},[523,524,525,526,527,528],{"id":82,"depth":309,"text":83},{"id":89,"depth":309,"text":90},{"id":107,"depth":309,"text":108},{"id":114,"depth":309,"text":115},{"id":121,"depth":309,"text":122},{"id":203,"depth":309,"text":204},{"id":210,"depth":298,"text":210,"children":530},[531,532,533],{"id":216,"depth":309,"text":217},{"id":252,"depth":309,"text":253},{"id":259,"depth":309,"text":260},{"id":275,"depth":298,"text":275,"children":535},[536,537,538],{"id":278,"depth":309,"text":278},{"id":415,"depth":309,"text":416},{"id":439,"depth":309,"text":440},{"id":446,"depth":298,"text":446},{"id":476,"depth":298,"text":476},{"id":508,"depth":298,"text":508},"image-processing","设计师和开发者必备的在线颜色工具，支持颜色选择器、HEX RGB HSL HSV CMYK格式互转、实时颜色预览和一键复制颜色值。纯前端处理，无需上传，保护您的隐私。","md","\u002Fog-image.png",[547,548,549,550,551,552,553,554],"颜色工具","颜色选择器","在线拾色器","HEX转RGB","颜色代码转换","HSL HSV CMYK","调色板在线","十六进制颜色码",{},true,"\u002Fblog\u002Fcolor-tools-complete-guide","2026-06-18",{"title":5,"description":543},"blog\u002Fcolor-tools-complete-guide","xib-EWII56VQwkljgFufOGqgXkhfHCVZiNo5WdKSqi0",1781756946952]