[{"data":1,"prerenderedAt":958},["ShallowReactive",2],{"guide-color-code-formats":3},{"id":4,"title":5,"body":6,"date":949,"description":950,"extension":951,"meta":952,"navigation":242,"path":953,"readingTime":954,"seo":955,"stem":956,"__hash__":957},"guides\u002Fguides\u002Fcolor-code-formats.md","Color Code Formats",{"type":7,"value":8,"toc":917},"minimark",[9,14,18,21,25,33,38,48,71,81,103,107,118,174,192,196,207,211,218,221,287,297,301,312,451,455,458,462,517,520,562,566,569,598,602,613,617,620,623,685,689,692,696,707,711,783,787,790,794,797,803,807,825,828,832,845,848,852,869,873,876,893,897,913],[10,11,13],"h2",{"id":12},"why-color-formats-matter","Why Color Formats Matter",[15,16,17],"p",{},"Every pixel on your screen renders color as a mix of red, green, and blue light. But developers and designers express that same color in different notations—HEX, RGB, HSL, or CMYK—depending on the context.",[15,19,20],{},"Using the wrong format creates friction. A designer hands you HSL values; your CSS framework expects HEX. A print vendor requests CMYK; your file uses RGB. Understanding what each format encodes and how to switch between them eliminates that friction entirely.",[10,22,24],{"id":23},"hex-format-explained","HEX Format Explained",[15,26,27,28,32],{},"HEX (hexadecimal) is the most compact way to write an RGB color for the web. A six-character code prefixed with ",[29,30,31],"code",{},"#"," encodes three bytes—one for each channel.",[34,35,37],"h3",{"id":36},"syntax","Syntax",[39,40,45],"pre",{"className":41,"code":43,"language":44},[42],"language-text","#RRGGBB\n","text",[29,46,43],{"__ignoreMap":47},"",[15,49,50,51,54,55,58,59,62,63,66,67,70],{},"Each pair uses base-16 digits: ",[29,52,53],{},"0–9"," and ",[29,56,57],{},"A–F",". The range ",[29,60,61],{},"00","–",[29,64,65],{},"FF"," maps to ",[29,68,69],{},"0–255"," in decimal.",[15,72,73,77,78],{},[74,75,76],"strong",{},"Example:"," ",[29,79,80],{},"#2563EB",[82,83,84,91,97],"ul",{},[85,86,87,90],"li",{},[29,88,89],{},"25"," → Red = 37",[85,92,93,96],{},[29,94,95],{},"63"," → Green = 99",[85,98,99,102],{},[29,100,101],{},"EB"," → Blue = 235",[34,104,106],{"id":105},"three-digit-shorthand","Three-Digit Shorthand",[15,108,109,110,113,114,117],{},"When both digits in a pair match, CSS lets you collapse ",[29,111,112],{},"#RRGGBB"," to ",[29,115,116],{},"#RGB",":",[119,120,121,134],"table",{},[122,123,124],"thead",{},[125,126,127,131],"tr",{},[128,129,130],"th",{},"Long Form",[128,132,133],{},"Shorthand",[135,136,137,150,162],"tbody",{},[125,138,139,145],{},[140,141,142],"td",{},[29,143,144],{},"#FF0000",[140,146,147],{},[29,148,149],{},"#F00",[125,151,152,157],{},[140,153,154],{},[29,155,156],{},"#336699",[140,158,159],{},[29,160,161],{},"#369",[125,163,164,169],{},[140,165,166],{},[29,167,168],{},"#AABBCC",[140,170,171],{},[29,172,173],{},"#ABC",[15,175,176,177,180,181,184,185,77,188,191],{},"Keep in mind: ",[29,178,179],{},"#F80"," becomes ",[29,182,183],{},"#FF8800",", ",[74,186,187],{},"not",[29,189,190],{},"#F8F808",". Each digit duplicates itself.",[34,193,195],{"id":194},"when-to-use-hex","When to Use HEX",[82,197,198,201,204],{},[85,199,200],{},"Writing CSS properties directly",[85,202,203],{},"Copying values from design tools (Figma, Sketch export HEX by default)",[85,205,206],{},"Keeping stylesheets compact and easy to scan",[10,208,210],{"id":209},"rgb-format-explained","RGB Format Explained",[15,212,213,214,217],{},"RGB writes each channel as a decimal number from 0 to 255 inside the ",[29,215,216],{},"rgb()"," function. It's the most explicit way to represent additive color.",[34,219,37],{"id":220},"syntax-1",[39,222,226],{"className":223,"code":224,"language":225,"meta":47,"style":47},"language-css shiki shiki-themes github-light github-dark","rgb(37, 99, 235)\n\n\u002F* Modern space-separated syntax (CSS Color Level 4) *\u002F\nrgb(37 99 235)\n\n\u002F* With alpha transparency *\u002F\nrgb(37 99 235 \u002F 0.8)\nrgb(37 99 235 \u002F 80%)\n","css",[29,227,228,237,244,251,257,262,268,281],{"__ignoreMap":47},[229,230,233],"span",{"class":231,"line":232},"line",1,[229,234,236],{"class":235},"sVt8B","rgb(37, 99, 235)\n",[229,238,240],{"class":231,"line":239},2,[229,241,243],{"emptyLinePlaceholder":242},true,"\n",[229,245,247],{"class":231,"line":246},3,[229,248,250],{"class":249},"sJ8bj","\u002F* Modern space-separated syntax (CSS Color Level 4) *\u002F\n",[229,252,254],{"class":231,"line":253},4,[229,255,256],{"class":235},"rgb(37 99 235)\n",[229,258,260],{"class":231,"line":259},5,[229,261,243],{"emptyLinePlaceholder":242},[229,263,265],{"class":231,"line":264},6,[229,266,267],{"class":249},"\u002F* With alpha transparency *\u002F\n",[229,269,271,274,278],{"class":231,"line":270},7,[229,272,273],{"class":235},"rgb(37 99 235 \u002F 0",[229,275,277],{"class":276},"sScJk",".8",[229,279,280],{"class":235},")\n",[229,282,284],{"class":231,"line":283},8,[229,285,286],{"class":235},"rgb(37 99 235 \u002F 80%)\n",[15,288,289,290,293,294,296],{},"The legacy ",[29,291,292],{},"rgba()"," function still works, but modern CSS treats alpha as part of ",[29,295,216],{}," directly—no separate function needed.",[34,298,300],{"id":299},"when-to-use-rgb","When to Use RGB",[82,302,303,306,309],{},[85,304,305],{},"Adding transparency (alpha channel)",[85,307,308],{},"Generatingcolors programmatically in JavaScript",[85,310,311],{},"Working with APIs or libraries that return channel arrays",[39,313,317],{"className":314,"code":315,"language":316,"meta":47,"style":47},"language-javascript shiki shiki-themes github-light github-dark","\u002F\u002F Dynamic color generation is straightforward with RGB\nfunction shiftColor(r, g, b, offset) {\n  return `rgb(${Math.min(r + offset, 255)}, ${Math.min(g + offset, 255)}, ${Math.min(b + offset, 255)})`;\n}\n","javascript",[29,318,319,324,358,446],{"__ignoreMap":47},[229,320,321],{"class":231,"line":232},[229,322,323],{"class":249},"\u002F\u002F Dynamic color generation is straightforward with RGB\n",[229,325,326,330,333,336,340,342,345,347,350,352,355],{"class":231,"line":239},[229,327,329],{"class":328},"szBVR","function",[229,331,332],{"class":276}," shiftColor",[229,334,335],{"class":235},"(",[229,337,339],{"class":338},"s4XuR","r",[229,341,184],{"class":235},[229,343,344],{"class":338},"g",[229,346,184],{"class":235},[229,348,349],{"class":338},"b",[229,351,184],{"class":235},[229,353,354],{"class":338},"offset",[229,356,357],{"class":235},") {\n",[229,359,360,363,367,370,373,376,378,380,383,386,388,392,395,398,400,402,404,406,408,410,412,414,416,418,420,422,424,426,428,430,432,434,436,438,440,443],{"class":231,"line":246},[229,361,362],{"class":328},"  return",[229,364,366],{"class":365},"sZZnC"," `rgb(${",[229,368,369],{"class":235},"Math",[229,371,372],{"class":365},".",[229,374,375],{"class":276},"min",[229,377,335],{"class":365},[229,379,339],{"class":235},[229,381,382],{"class":328}," +",[229,384,385],{"class":235}," offset",[229,387,184],{"class":365},[229,389,391],{"class":390},"sj4cs","255",[229,393,394],{"class":365},")",[229,396,397],{"class":365},"}, ${",[229,399,369],{"class":235},[229,401,372],{"class":365},[229,403,375],{"class":276},[229,405,335],{"class":365},[229,407,344],{"class":235},[229,409,382],{"class":328},[229,411,385],{"class":235},[229,413,184],{"class":365},[229,415,391],{"class":390},[229,417,394],{"class":365},[229,419,397],{"class":365},[229,421,369],{"class":235},[229,423,372],{"class":365},[229,425,375],{"class":276},[229,427,335],{"class":365},[229,429,349],{"class":235},[229,431,382],{"class":328},[229,433,385],{"class":235},[229,435,184],{"class":365},[229,437,391],{"class":390},[229,439,394],{"class":365},[229,441,442],{"class":365},"})`",[229,444,445],{"class":235},";\n",[229,447,448],{"class":231,"line":253},[229,449,450],{"class":235},"}\n",[10,452,454],{"id":453},"hsl-format-explained","HSL Format Explained",[15,456,457],{},"HSL (Hue, Saturation, Lightness) separates a color into three perceptual dimensions. It matches how designers think about color: \"I want a blue that's vivid and medium-bright.\"",[34,459,461],{"id":460},"components","Components",[119,463,464,477],{},[122,465,466],{},[125,467,468,471,474],{},[128,469,470],{},"Component",[128,472,473],{},"Range",[128,475,476],{},"Meaning",[135,478,479,492,505],{},[125,480,481,486,489],{},[140,482,483],{},[74,484,485],{},"Hue",[140,487,488],{},"0°–360°",[140,490,491],{},"Position on the color wheel (0=red, 120=green, 240=blue)",[125,493,494,499,502],{},[140,495,496],{},[74,497,498],{},"Saturation",[140,500,501],{},"0%–100%",[140,503,504],{},"Color intensity (0%=gray, 100%=full chroma)",[125,506,507,512,514],{},[140,508,509],{},[74,510,511],{},"Lightness",[140,513,501],{},[140,515,516],{},"Brightness (0%=black, 50%=pure color, 100%=white)",[34,518,37],{"id":519},"syntax-2",[39,521,523],{"className":223,"code":522,"language":225,"meta":47,"style":47},"hsl(221, 83%, 53%)\n\n\u002F* Modern syntax (space-separated, no commas) *\u002F\nhsl(221 83% 53%)\n\n\u002F* With alpha *\u002F\nhsl(221 83% 53% \u002F 0.8)\n",[29,524,525,530,534,539,544,548,553],{"__ignoreMap":47},[229,526,527],{"class":231,"line":232},[229,528,529],{"class":235},"hsl(221, 83%, 53%)\n",[229,531,532],{"class":231,"line":239},[229,533,243],{"emptyLinePlaceholder":242},[229,535,536],{"class":231,"line":246},[229,537,538],{"class":249},"\u002F* Modern syntax (space-separated, no commas) *\u002F\n",[229,540,541],{"class":231,"line":253},[229,542,543],{"class":235},"hsl(221 83% 53%)\n",[229,545,546],{"class":231,"line":259},[229,547,243],{"emptyLinePlaceholder":242},[229,549,550],{"class":231,"line":264},[229,551,552],{"class":249},"\u002F* With alpha *\u002F\n",[229,554,555,558,560],{"class":231,"line":270},[229,556,557],{"class":235},"hsl(221 83% 53% \u002F 0",[229,559,277],{"class":276},[229,561,280],{"class":235},[34,563,565],{"id":564},"why-designers-prefer-hsl","Why Designers Prefer HSL",[15,567,568],{},"HSL makes palette generation intuitive. To create lighter and darker variants, you adjust only the lightness value—hue and saturation stay unchanged.",[39,570,572],{"className":223,"code":571,"language":225,"meta":47,"style":47},"--brand-300: hsl(221 83% 70%);  \u002F* Light *\u002F\n--brand-500: hsl(221 83% 53%);  \u002F* Base *\u002F\n--brand-700: hsl(221 83% 35%);  \u002F* Dark *\u002F\n",[29,573,574,582,590],{"__ignoreMap":47},[229,575,576,579],{"class":231,"line":232},[229,577,578],{"class":235},"--brand-300: hsl(221 83% 70%);  ",[229,580,581],{"class":249},"\u002F* Light *\u002F\n",[229,583,584,587],{"class":231,"line":239},[229,585,586],{"class":235},"--brand-500: hsl(221 83% 53%);  ",[229,588,589],{"class":249},"\u002F* Base *\u002F\n",[229,591,592,595],{"class":231,"line":246},[229,593,594],{"class":235},"--brand-700: hsl(221 83% 35%);  ",[229,596,597],{"class":249},"\u002F* Dark *\u002F\n",[34,599,601],{"id":600},"when-to-use-hsl","When to Use HSL",[82,603,604,607,610],{},[85,605,606],{},"Building design systems and theme variables",[85,608,609],{},"Creating accessible color scales with consistent lightness steps",[85,611,612],{},"Implementing dark mode (shift lightness without changing hue)",[10,614,616],{"id":615},"cmyk-format-explained","CMYK Format Explained",[15,618,619],{},"CMYK (Cyan, Magenta, Yellow, Key\u002FBlack) is a subtractive color model used in print. Unlike RGB, which adds light, CMYK subtracts light from white paper using ink.",[34,621,461],{"id":622},"components-1",[119,624,625,635],{},[122,626,627],{},[125,628,629,631,633],{},[128,630,470],{},[128,632,473],{},[128,634,476],{},[135,636,637,649,661,673],{},[125,638,639,644,646],{},[140,640,641],{},[74,642,643],{},"Cyan",[140,645,501],{},[140,647,648],{},"Cyan ink coverage",[125,650,651,656,658],{},[140,652,653],{},[74,654,655],{},"Magenta",[140,657,501],{},[140,659,660],{},"Magenta ink coverage",[125,662,663,668,670],{},[140,664,665],{},[74,666,667],{},"Yellow",[140,669,501],{},[140,671,672],{},"Yellow ink coverage",[125,674,675,680,682],{},[140,676,677],{},[74,678,679],{},"Key (Black)",[140,681,501],{},[140,683,684],{},"Black ink coverage",[34,686,688],{"id":687},"rgb-to-cmyk-conversion-challenges","RGB-to-CMYK Conversion Challenges",[15,690,691],{},"RGB and CMYK cover different color spaces (gamuts). Vivid blues and greens on screen often cannot be reproduced exactly in print. A conversion tool gives approximate CMYK values, but always verify with a printed proof.",[34,693,695],{"id":694},"when-to-use-cmyk","When to Use CMYK",[82,697,698,701,704],{},[85,699,700],{},"Preparing assets for commercial printing",[85,702,703],{},"Working with brand guidelines that specify print-safe colors",[85,705,706],{},"Communicating with print vendors",[10,708,710],{"id":709},"when-to-use-each-format","When to Use Each Format",[119,712,713,726],{},[122,714,715],{},[125,716,717,720,723],{},[128,718,719],{},"Scenario",[128,721,722],{},"Best Format",[128,724,725],{},"Reason",[135,727,728,739,750,761,772],{},[125,729,730,733,736],{},[140,731,732],{},"CSS stylesheets",[140,734,735],{},"HEX or HSL",[140,737,738],{},"Compact (HEX) or intuitive scales (HSL)",[125,740,741,744,747],{},[140,742,743],{},"JavaScript color logic",[140,745,746],{},"RGB",[140,748,749],{},"Direct channel access for math",[125,751,752,755,758],{},[140,753,754],{},"Design systems \u002F themes",[140,756,757],{},"HSL",[140,759,760],{},"Easy lightness and saturation adjustments",[125,762,763,766,769],{},[140,764,765],{},"Adding transparency",[140,767,768],{},"RGB or HSL with alpha",[140,770,771],{},"HEX alpha notation has poorer support",[125,773,774,777,780],{},[140,775,776],{},"Print production",[140,778,779],{},"CMYK",[140,781,782],{},"Matches subtractive ink mixing",[10,784,786],{"id":785},"conversion-overview","Conversion Overview",[15,788,789],{},"Every format represents the same underlying color data (except CMYK, which shifts gamut). Here's how the main conversions work:",[34,791,793],{"id":792},"hex-rgb","HEX ↔ RGB",[15,795,796],{},"Split the HEX into three pairs and convert each pair from base-16 to base-10 (or reverse).",[39,798,801],{"className":799,"code":800,"language":44},[42],"#2563EB → rgb(37, 99, 235)\n\nR = parseInt(\"25\", 16) = 37\nG = parseInt(\"63\", 16) = 99\nB = parseInt(\"EB\", 16) = 235\n",[29,802,800],{"__ignoreMap":47},[34,804,806],{"id":805},"rgb-hsl","RGB → HSL",[808,809,810,813,816,819,822],"ol",{},[85,811,812],{},"Normalize R, G, B to 0–1",[85,814,815],{},"Find max and min values",[85,817,818],{},"Lightness = (max + min) \u002F 2",[85,820,821],{},"If max = min, saturation = 0 (achromatic)",[85,823,824],{},"Otherwise, saturation and hue are computed from the difference between max and min",[15,826,827],{},"The full formula involves conditional branching based on which channel is the maximum—too long to memorize, which is why tools exist.",[34,829,831],{"id":830},"rgb-cmyk","RGB → CMYK",[808,833,834,836,839,842],{},[85,835,812],{},[85,837,838],{},"K = 1 − max(R, G, B)",[85,840,841],{},"If K = 1, then C = M = Y = 0 (pure black)",[85,843,844],{},"Otherwise: C = (1 − R − K) \u002F (1 − K), and similarly for M and Y",[15,846,847],{},"For precise conversions without manual math, use an automated tool.",[10,849,851],{"id":850},"key-takeaways","Key Takeaways",[82,853,854,857,860,863,866],{},[85,855,856],{},"HEX and RGB encode identical data in different notations—base-16 shorthand vs. decimal function",[85,858,859],{},"HSL aligns with human perception and is ideal for design systems",[85,861,862],{},"CMYK is for print only; screen colors may not reproduce exactly in ink",[85,864,865],{},"RGB is best for programmatic color manipulation in JavaScript",[85,867,868],{},"Always verify CMYK conversions with a physical proof—the gamuts differ",[10,870,872],{"id":871},"try-it-yourself","Try It Yourself",[15,874,875],{},"Convert between every format instantly with our free tools:",[82,877,878,886],{},[85,879,880,885],{},[881,882,884],"a",{"href":883},"\u002Ftools\u002Fcolor-converter","Color Converter"," — HEX, RGB, HSL, and CMYK in one place",[85,887,888,892],{},[881,889,891],{"href":890},"\u002Ftools\u002Fhex-to-rgb","HEX to RGB Converter"," — fast, focused HEX ↔ RGB translation",[10,894,896],{"id":895},"related-guides","Related Guides",[82,898,899,906],{},[85,900,901,905],{},[881,902,904],{"href":903},"\u002Fguides\u002Fcolor-picker-guide","Color Picker Guide"," — choose colors visually and get codes in every format",[85,907,908,912],{},[881,909,911],{"href":910},"\u002Fguides\u002Fdesign-color-fundamentals","Design Color Fundamentals"," — the color wheel, harmony types, and building palettes",[914,915,916],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}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 .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);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":47,"searchDepth":239,"depth":239,"links":918},[919,920,925,929,935,940,941,946,947,948],{"id":12,"depth":239,"text":13},{"id":23,"depth":239,"text":24,"children":921},[922,923,924],{"id":36,"depth":246,"text":37},{"id":105,"depth":246,"text":106},{"id":194,"depth":246,"text":195},{"id":209,"depth":239,"text":210,"children":926},[927,928],{"id":220,"depth":246,"text":37},{"id":299,"depth":246,"text":300},{"id":453,"depth":239,"text":454,"children":930},[931,932,933,934],{"id":460,"depth":246,"text":461},{"id":519,"depth":246,"text":37},{"id":564,"depth":246,"text":565},{"id":600,"depth":246,"text":601},{"id":615,"depth":239,"text":616,"children":936},[937,938,939],{"id":622,"depth":246,"text":461},{"id":687,"depth":246,"text":688},{"id":694,"depth":246,"text":695},{"id":709,"depth":239,"text":710},{"id":785,"depth":239,"text":786,"children":942},[943,944,945],{"id":792,"depth":246,"text":793},{"id":805,"depth":246,"text":806},{"id":830,"depth":246,"text":831},{"id":850,"depth":239,"text":851},{"id":871,"depth":239,"text":872},{"id":895,"depth":239,"text":896},"2026-05-28","HEX, RGB, HSL, and CMYK explained — how each color format works, when to use it, and how to convert between them.","md",{"immutable":242},"\u002Fguides\u002Fcolor-code-formats",9,{"title":5,"description":950},"guides\u002Fcolor-code-formats","Qx3fNZaPmBARfVAOIwl4aYyZItmdFfIodKORmfMFkmA",1780401330820]