[{"data":1,"prerenderedAt":1125},["ShallowReactive",2],{"guide-hex-rgb-hsl-explained":3},{"id":4,"title":5,"body":6,"date":1116,"description":1117,"extension":1118,"meta":1119,"navigation":864,"path":1120,"readingTime":1121,"seo":1122,"stem":1123,"__hash__":1124},"guides\u002Fguides\u002Fhex-rgb-hsl-explained.md","HEX, RGB, and HSL Color Formats Explained",{"type":7,"value":8,"toc":1080},"minimark",[9,14,18,21,25,28,33,36,47,50,54,155,159,195,199,222,226,229,233,271,275,278,298,301,305,331,335,355,359,362,366,392,396,459,463,479,483,509,513,533,537,540,544,555,561,567,584,588,593,599,607,611,614,689,693,697,711,715,729,733,750,754,757,972,976,979,1053,1057,1060,1063,1067,1076],[10,11,13],"h2",{"id":12},"introduction-to-color-formats-in-web-design","Introduction to Color Formats in Web Design",[15,16,17],"p",{},"When working with colors in web development, you'll encounter three primary color notation formats: HEX, RGB, and HSL. Each format represents colors differently and serves distinct purposes in modern web design. Understanding these formats is essential for any web developer or designer who wants precise control over their color palette.",[15,19,20],{},"Colors on the web are typically represented using the sRGB (standard Red Green Blue) color space, which can display approximately 16.7 million different colors. While this might seem limiting compared to modern display technologies, it remains the standard for web content and works consistently across all browsers and devices.",[10,22,24],{"id":23},"hex-color-format","HEX Color Format",[15,26,27],{},"HEX (hexadecimal) is perhaps the most recognizable color format for web developers. It uses a base-16 numbering system to represent colors as a six-digit code preceded by a hash symbol (#).",[29,30,32],"h3",{"id":31},"hex-syntax","HEX Syntax",[15,34,35],{},"A HEX color code consists of three pairs of hexadecimal digits:",[37,38,43],"pre",{"className":39,"code":41,"language":42},[40],"language-text","#RRGGBB\n","text",[44,45,41],"code",{"__ignoreMap":46},"",[15,48,49],{},"Each pair represents the intensity of red, green, and blue respectively, with values ranging from 00 to FF (0 to 255 in decimal).",[29,51,53],{"id":52},"common-hex-examples","Common HEX Examples",[55,56,57,73],"table",{},[58,59,60],"thead",{},[61,62,63,67,70],"tr",{},[64,65,66],"th",{},"HEX Code",[64,68,69],{},"Color",[64,71,72],{},"Description",[74,75,76,90,103,116,129,142],"tbody",{},[61,77,78,84,87],{},[79,80,81],"td",{},[44,82,83],{},"#FF0000",[79,85,86],{},"Red",[79,88,89],{},"Maximum red, no green or blue",[61,91,92,97,100],{},[79,93,94],{},[44,95,96],{},"#00FF00",[79,98,99],{},"Green",[79,101,102],{},"Maximum green, no red or blue",[61,104,105,110,113],{},[79,106,107],{},[44,108,109],{},"#0000FF",[79,111,112],{},"Blue",[79,114,115],{},"Maximum blue, no red or green",[61,117,118,123,126],{},[79,119,120],{},[44,121,122],{},"#FFFFFF",[79,124,125],{},"White",[79,127,128],{},"Maximum of all three colors",[61,130,131,136,139],{},[79,132,133],{},[44,134,135],{},"#000000",[79,137,138],{},"Black",[79,140,141],{},"No color intensity",[61,143,144,149,152],{},[79,145,146],{},[44,147,148],{},"#808080",[79,150,151],{},"Gray",[79,153,154],{},"Equal mid-intensity values",[29,156,158],{"id":157},"advantages-of-hex","Advantages of HEX",[160,161,162,170,176,182],"ul",{},[163,164,165,169],"li",{},[166,167,168],"strong",{},"Compact notation",": Short and easy to copy-paste",[163,171,172,175],{},[166,173,174],{},"Widely supported",": Works in all browsers since the early days of the web",[163,177,178,181],{},[166,179,180],{},"Familiar to developers",": Most web developers learn HEX first",[163,183,184,187,188,191,192,194],{},[166,185,186],{},"Shorthand available",": Three-digit shorthand for some colors (e.g., ",[44,189,190],{},"#F00"," for ",[44,193,83],{},")",[29,196,198],{"id":197},"disadvantages-of-hex","Disadvantages of HEX",[160,200,201,207,213],{},[163,202,203,206],{},[166,204,205],{},"Not intuitive",": Difficult to adjust brightness or saturation mentally",[163,208,209,212],{},[166,210,211],{},"No direct relationship to color properties",": Hard to create variations of a color",[163,214,215,218,219,194],{},[166,216,217],{},"Limited transparency support",": Requires separate alpha channel format (",[44,220,221],{},"#RRGGBBAA",[10,223,225],{"id":224},"rgb-color-format","RGB Color Format",[15,227,228],{},"RGB (Red, Green, Blue) represents colors by specifying the intensity of each primary color component. Unlike HEX, RGB uses decimal values from 0 to 255 for each channel.",[29,230,232],{"id":231},"rgb-syntax","RGB Syntax",[37,234,238],{"className":235,"code":236,"language":237,"meta":46,"style":46},"language-css shiki shiki-themes github-light github-dark","rgb(255, 0, 0)  \u002F* Pure red *\u002F\nrgb(0, 255, 0)  \u002F* Pure green *\u002F\nrgb(0, 0, 255)  \u002F* Pure blue *\u002F\n","css",[44,239,240,253,262],{"__ignoreMap":46},[241,242,245,249],"span",{"class":243,"line":244},"line",1,[241,246,248],{"class":247},"sVt8B","rgb(255, 0, 0)  ",[241,250,252],{"class":251},"sJ8bj","\u002F* Pure red *\u002F\n",[241,254,256,259],{"class":243,"line":255},2,[241,257,258],{"class":247},"rgb(0, 255, 0)  ",[241,260,261],{"class":251},"\u002F* Pure green *\u002F\n",[241,263,265,268],{"class":243,"line":264},3,[241,266,267],{"class":247},"rgb(0, 0, 255)  ",[241,269,270],{"class":251},"\u002F* Pure blue *\u002F\n",[29,272,274],{"id":273},"rgb-with-alpha-transparency","RGB with Alpha Transparency",[15,276,277],{},"Modern CSS also supports RGBA, which adds an alpha channel for transparency:",[37,279,281],{"className":235,"code":280,"language":237,"meta":46,"style":46},"rgba(255, 0, 0, 0.5)  \u002F* Semi-transparent red *\u002F\n",[44,282,283],{"__ignoreMap":46},[241,284,285,288,292,295],{"class":243,"line":244},[241,286,287],{"class":247},"rgba(255, 0, 0, 0",[241,289,291],{"class":290},"sScJk",".5",[241,293,294],{"class":247},")  ",[241,296,297],{"class":251},"\u002F* Semi-transparent red *\u002F\n",[15,299,300],{},"The alpha value ranges from 0 (completely transparent) to 1 (completely opaque).",[29,302,304],{"id":303},"advantages-of-rgb","Advantages of RGB",[160,306,307,313,319,325],{},[163,308,309,312],{},[166,310,311],{},"Explicit channel values",": Clear what each number represents",[163,314,315,318],{},[166,316,317],{},"Built-in transparency support",": RGBA handles alpha without separate format",[163,320,321,324],{},[166,322,323],{},"Easy to generate programmatically",": Simple to work with in JavaScript",[163,326,327,330],{},[166,328,329],{},"Familiar to programmers",": Similar to how computer screens actually work",[29,332,334],{"id":333},"disadvantages-of-rgb","Disadvantages of RGB",[160,336,337,343,349],{},[163,338,339,342],{},[166,340,341],{},"Verbose syntax",": More characters than HEX",[163,344,345,348],{},[166,346,347],{},"Still not intuitive for design",": Adjusting hue or saturation requires changing multiple values",[163,350,351,354],{},[166,352,353],{},"Less common in design tools",": Many designers prefer HSL for adjustments",[10,356,358],{"id":357},"hsl-color-format","HSL Color Format",[15,360,361],{},"HSL (Hue, Saturation, Lightness) represents colors in a way that aligns more closely with human perception of color. It separates color properties into three distinct dimensions.",[29,363,365],{"id":364},"hsl-syntax","HSL Syntax",[37,367,369],{"className":235,"code":368,"language":237,"meta":46,"style":46},"hsl(0, 100%, 50%)    \u002F* Pure red *\u002F\nhsl(120, 100%, 50%)  \u002F* Pure green *\u002F\nhsl(240, 100%, 50%)  \u002F* Pure blue *\u002F\n",[44,370,371,378,385],{"__ignoreMap":46},[241,372,373,376],{"class":243,"line":244},[241,374,375],{"class":247},"hsl(0, 100%, 50%)    ",[241,377,252],{"class":251},[241,379,380,383],{"class":243,"line":255},[241,381,382],{"class":247},"hsl(120, 100%, 50%)  ",[241,384,261],{"class":251},[241,386,387,390],{"class":243,"line":264},[241,388,389],{"class":247},"hsl(240, 100%, 50%)  ",[241,391,270],{"class":251},[29,393,395],{"id":394},"hsl-components-explained","HSL Components Explained",[397,398,399,425,442],"ol",{},[163,400,401,404,405],{},[166,402,403],{},"Hue (0-360)",": Represents the color type, measured in degrees on a color wheel",[160,406,407,410,413,416,419,422],{},[163,408,409],{},"0° or 360° = Red",[163,411,412],{},"60° = Yellow",[163,414,415],{},"120° = Green",[163,417,418],{},"180° = Cyan",[163,420,421],{},"240° = Blue",[163,423,424],{},"300° = Magenta",[163,426,427,430,431],{},[166,428,429],{},"Saturation (0-100%)",": The intensity or purity of the color",[160,432,433,436,439],{},[163,434,435],{},"100% = Full color",[163,437,438],{},"50% = Muted color",[163,440,441],{},"0% = Gray (no color)",[163,443,444,447,448],{},[166,445,446],{},"Lightness (0-100%)",": How light or dark the color is",[160,449,450,453,456],{},[163,451,452],{},"100% = White",[163,454,455],{},"50% = Pure color",[163,457,458],{},"0% = Black",[29,460,462],{"id":461},"hsl-with-alpha-transparency","HSL with Alpha Transparency",[37,464,466],{"className":235,"code":465,"language":237,"meta":46,"style":46},"hsla(0, 100%, 50%, 0.5)  \u002F* Semi-transparent red *\u002F\n",[44,467,468],{"__ignoreMap":46},[241,469,470,473,475,477],{"class":243,"line":244},[241,471,472],{"class":247},"hsla(0, 100%, 50%, 0",[241,474,291],{"class":290},[241,476,294],{"class":247},[241,478,297],{"class":251},[29,480,482],{"id":481},"advantages-of-hsl","Advantages of HSL",[160,484,485,491,497,503],{},[163,486,487,490],{},[166,488,489],{},"Intuitive for humans",": Matches how we perceive and describe colors",[163,492,493,496],{},[166,494,495],{},"Easy color manipulation",": Adjust lightness to create lighter\u002Fdarker variants",[163,498,499,502],{},[166,500,501],{},"Perfect for theming",": Simple to generate color palettes programmatically",[163,504,505,508],{},[166,506,507],{},"Designer-friendly",": Aligns with color theory principles",[29,510,512],{"id":511},"disadvantages-of-hsl","Disadvantages of HSL",[160,514,515,521,527],{},[163,516,517,520],{},[166,518,519],{},"Newer format",": Not as universally known among developers",[163,522,523,526],{},[166,524,525],{},"Less compact",": More verbose than HEX",[163,528,529,532],{},[166,530,531],{},"Browser support",": Requires modern browsers (though now widely supported)",[10,534,536],{"id":535},"color-format-conversion-formulas","Color Format Conversion Formulas",[15,538,539],{},"Understanding how to convert between formats is valuable when working with different tools and systems.",[29,541,543],{"id":542},"hex-to-rgb-conversion","HEX to RGB Conversion",[397,545,546,552],{},[163,547,548,549],{},"Split the HEX code into three pairs: ",[44,550,551],{},"#RRGGBB",[163,553,554],{},"Convert each pair from hexadecimal to decimal:",[37,556,559],{"className":557,"code":558,"language":42},[40],"R = parseInt(RR, 16)\nG = parseInt(GG, 16)\nB = parseInt(BB, 16)\n",[44,560,558],{"__ignoreMap":46},[15,562,563,564],{},"Example: ",[44,565,566],{},"#FF8040",[160,568,569,572,575,578],{},[163,570,571],{},"R = parseInt(\"FF\", 16) = 255",[163,573,574],{},"G = parseInt(\"80\", 16) = 128",[163,576,577],{},"B = parseInt(\"40\", 16) = 64",[163,579,580,581],{},"Result: ",[44,582,583],{},"rgb(255, 128, 64)",[29,585,587],{"id":586},"rgb-to-hex-conversion","RGB to HEX Conversion",[397,589,590],{},[163,591,592],{},"Convert each decimal value to two-digit hexadecimal:",[37,594,597],{"className":595,"code":596,"language":42},[40],"RR = R.toString(16).padStart(2, '0')\nGG = G.toString(16).padStart(2, '0')\nBB = B.toString(16).padStart(2, '0')\n",[44,598,596],{"__ignoreMap":46},[397,600,601],{"start":255},[163,602,603,604],{},"Combine: ",[44,605,606],{},"#${RR}${GG}${BB}",[29,608,610],{"id":609},"rgb-to-hsl-conversion","RGB to HSL Conversion",[15,612,613],{},"This conversion is more complex:",[397,615,616,622,628,634,652],{},[163,617,618,619],{},"Normalize RGB values to 0-1 range: ",[44,620,621],{},"r = R\u002F255, g = G\u002F255, b = B\u002F255",[163,623,624,625],{},"Find maximum and minimum: ",[44,626,627],{},"max = Math.max(r,g,b), min = Math.min(r,g,b)",[163,629,630,631],{},"Calculate lightness: ",[44,632,633],{},"l = (max + min) \u002F 2",[163,635,636,637],{},"Calculate saturation:\n",[160,638,639,646],{},[163,640,641,642,645],{},"If ",[44,643,644],{},"max === min",": saturation = 0 (gray)",[163,647,648,649],{},"Else: ",[44,650,651],{},"s = l \u003C 0.5 ? (max - min) \u002F (max + min) : (max - min) \u002F (2 - max - min)",[163,653,654,655],{},"Calculate hue:\n",[160,656,657,666,674,682],{},[163,658,641,659,662,663],{},[44,660,661],{},"max === r",": ",[44,664,665],{},"h = ((g - b) \u002F (max - min)) % 6",[163,667,641,668,662,671],{},[44,669,670],{},"max === g",[44,672,673],{},"h = (b - r) \u002F (max - min) + 2",[163,675,641,676,662,679],{},[44,677,678],{},"max === b",[44,680,681],{},"h = (r - g) \u002F (max - min) + 4",[163,683,684,685,688],{},"Convert to degrees: ",[44,686,687],{},"h *= 60",", ensure positive",[10,690,692],{"id":691},"when-to-use-each-format","When to Use Each Format",[29,694,696],{"id":695},"use-hex-when","Use HEX When:",[160,698,699,702,705,708],{},[163,700,701],{},"Working with legacy codebases",[163,703,704],{},"Copying colors from design tools that export HEX",[163,706,707],{},"Needing compact color notation",[163,709,710],{},"Working with developers who prefer traditional formats",[29,712,714],{"id":713},"use-rgb-when","Use RGB When:",[160,716,717,720,723,726],{},[163,718,719],{},"Needing transparency (RGBA)",[163,721,722],{},"Generating colors dynamically with JavaScript",[163,724,725],{},"Working with APIs that return RGB values",[163,727,728],{},"Creating gradients programmatically",[29,730,732],{"id":731},"use-hsl-when","Use HSL When:",[160,734,735,738,741,744,747],{},[163,736,737],{},"Building design systems and themes",[163,739,740],{},"Creating color variations (lighter\u002Fdarker shades)",[163,742,743],{},"Working with designers who think in hue\u002Fsaturation\u002Flightness",[163,745,746],{},"Need to adjust colors based on user preferences (dark mode, etc.)",[163,748,749],{},"Generating accessible color palettes with consistent lightness",[10,751,753],{"id":752},"practical-css-examples","Practical CSS Examples",[15,755,756],{},"Here's how the same color looks in all three formats:",[37,758,760],{"className":235,"code":759,"language":237,"meta":46,"style":46},"\u002F* All represent the same coral color *\u002F\n.element-hex { color: #FF7F50; }\n.element-rgb { color: rgb(255, 127, 80); }\n.element-hsl { color: hsl(16, 100%, 66%); }\n\n\u002F* Creating a color palette with HSL *\u002F\n.primary-light { color: hsl(200, 100%, 80%); }\n.primary-base  { color: hsl(200, 100%, 50%); }\n.primary-dark  { color: hsl(200, 100%, 30%); }\n",[44,761,762,767,787,821,859,866,872,905,939],{"__ignoreMap":46},[241,763,764],{"class":243,"line":244},[241,765,766],{"class":251},"\u002F* All represent the same coral color *\u002F\n",[241,768,769,772,775,779,781,784],{"class":243,"line":255},[241,770,771],{"class":290},".element-hex",[241,773,774],{"class":247}," { ",[241,776,778],{"class":777},"sj4cs","color",[241,780,662],{"class":247},[241,782,783],{"class":777},"#FF7F50",[241,785,786],{"class":247},"; }\n",[241,788,789,792,794,796,798,801,804,807,810,813,815,818],{"class":243,"line":264},[241,790,791],{"class":290},".element-rgb",[241,793,774],{"class":247},[241,795,778],{"class":777},[241,797,662],{"class":247},[241,799,800],{"class":777},"rgb",[241,802,803],{"class":247},"(",[241,805,806],{"class":777},"255",[241,808,809],{"class":247},", ",[241,811,812],{"class":777},"127",[241,814,809],{"class":247},[241,816,817],{"class":777},"80",[241,819,820],{"class":247},"); }\n",[241,822,824,827,829,831,833,836,838,841,843,846,850,852,855,857],{"class":243,"line":823},4,[241,825,826],{"class":290},".element-hsl",[241,828,774],{"class":247},[241,830,778],{"class":777},[241,832,662],{"class":247},[241,834,835],{"class":777},"hsl",[241,837,803],{"class":247},[241,839,840],{"class":777},"16",[241,842,809],{"class":247},[241,844,845],{"class":777},"100",[241,847,849],{"class":848},"szBVR","%",[241,851,809],{"class":247},[241,853,854],{"class":777},"66",[241,856,849],{"class":848},[241,858,820],{"class":247},[241,860,862],{"class":243,"line":861},5,[241,863,865],{"emptyLinePlaceholder":864},true,"\n",[241,867,869],{"class":243,"line":868},6,[241,870,871],{"class":251},"\u002F* Creating a color palette with HSL *\u002F\n",[241,873,875,878,880,882,884,886,888,891,893,895,897,899,901,903],{"class":243,"line":874},7,[241,876,877],{"class":290},".primary-light",[241,879,774],{"class":247},[241,881,778],{"class":777},[241,883,662],{"class":247},[241,885,835],{"class":777},[241,887,803],{"class":247},[241,889,890],{"class":777},"200",[241,892,809],{"class":247},[241,894,845],{"class":777},[241,896,849],{"class":848},[241,898,809],{"class":247},[241,900,817],{"class":777},[241,902,849],{"class":848},[241,904,820],{"class":247},[241,906,908,911,914,916,918,920,922,924,926,928,930,932,935,937],{"class":243,"line":907},8,[241,909,910],{"class":290},".primary-base",[241,912,913],{"class":247},"  { ",[241,915,778],{"class":777},[241,917,662],{"class":247},[241,919,835],{"class":777},[241,921,803],{"class":247},[241,923,890],{"class":777},[241,925,809],{"class":247},[241,927,845],{"class":777},[241,929,849],{"class":848},[241,931,809],{"class":247},[241,933,934],{"class":777},"50",[241,936,849],{"class":848},[241,938,820],{"class":247},[241,940,942,945,947,949,951,953,955,957,959,961,963,965,968,970],{"class":243,"line":941},9,[241,943,944],{"class":290},".primary-dark",[241,946,913],{"class":247},[241,948,778],{"class":777},[241,950,662],{"class":247},[241,952,835],{"class":777},[241,954,803],{"class":247},[241,956,890],{"class":777},[241,958,809],{"class":247},[241,960,845],{"class":777},[241,962,849],{"class":848},[241,964,809],{"class":247},[241,966,967],{"class":777},"30",[241,969,849],{"class":848},[241,971,820],{"class":247},[10,973,975],{"id":974},"modern-css-color-functions","Modern CSS Color Functions",[15,977,978],{},"CSS is evolving with new color functions:",[37,980,982],{"className":235,"code":981,"language":237,"meta":46,"style":46},"\u002F* Relative color syntax (modern browsers) *\u002F\ncolor: hsl(from var(--primary) h s calc(l - 20%));\n\n\u002F* Modern color spaces *\u002F\ncolor: oklch(70% 0.15 120);  \u002F* Perceptually uniform *\u002F\ncolor: oklab(70% 0.15 -0.05);\ncolor: display-p3(1, 0.5, 0);  \u002F* Wide gamut *\u002F\n",[44,983,984,989,1001,1005,1010,1024,1040],{"__ignoreMap":46},[241,985,986],{"class":243,"line":244},[241,987,988],{"class":251},"\u002F* Relative color syntax (modern browsers) *\u002F\n",[241,990,991,994,998],{"class":243,"line":255},[241,992,993],{"class":247},"color: hsl(from var(--primary) h ",[241,995,997],{"class":996},"s9eBZ","s",[241,999,1000],{"class":247}," calc(l - 20%));\n",[241,1002,1003],{"class":243,"line":264},[241,1004,865],{"emptyLinePlaceholder":864},[241,1006,1007],{"class":243,"line":823},[241,1008,1009],{"class":251},"\u002F* Modern color spaces *\u002F\n",[241,1011,1012,1015,1018,1021],{"class":243,"line":861},[241,1013,1014],{"class":247},"color: oklch(70% 0",[241,1016,1017],{"class":290},".15",[241,1019,1020],{"class":247}," 120);  ",[241,1022,1023],{"class":251},"\u002F* Perceptually uniform *\u002F\n",[241,1025,1026,1029,1031,1034,1037],{"class":243,"line":868},[241,1027,1028],{"class":247},"color: oklab(70% 0",[241,1030,1017],{"class":290},[241,1032,1033],{"class":247}," -0",[241,1035,1036],{"class":290},".05",[241,1038,1039],{"class":247},");\n",[241,1041,1042,1045,1047,1050],{"class":243,"line":874},[241,1043,1044],{"class":247},"color: display-p3(1, 0",[241,1046,291],{"class":290},[241,1048,1049],{"class":247},", 0);  ",[241,1051,1052],{"class":251},"\u002F* Wide gamut *\u002F\n",[10,1054,1056],{"id":1055},"conclusion","Conclusion",[15,1058,1059],{},"While HEX remains the most common format due to its historical prevalence, HSL is increasingly popular for modern web development because it aligns with human color perception. RGB fills the gap for programmatic color manipulation. Understanding all three formats makes you a more versatile developer and allows you to choose the best tool for each specific task.",[15,1061,1062],{},"For most modern projects, consider using HSL for your design system and theme variables, RGB for dynamic color generation, and HEX for quick prototypes or when working with legacy code.",[10,1064,1066],{"id":1065},"try-it-yourself","Try It Yourself",[15,1068,1069,1070,1075],{},"Use our free ",[1071,1072,1074],"a",{"href":1073},"\u002Ftools\u002Fcolor-converter","Color Converter"," to convert colors between HEX, RGB, and HSL formats instantly.",[1077,1078,1079],"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 .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 .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}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 pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":46,"searchDepth":255,"depth":255,"links":1081},[1082,1083,1089,1095,1102,1107,1112,1113,1114,1115],{"id":12,"depth":255,"text":13},{"id":23,"depth":255,"text":24,"children":1084},[1085,1086,1087,1088],{"id":31,"depth":264,"text":32},{"id":52,"depth":264,"text":53},{"id":157,"depth":264,"text":158},{"id":197,"depth":264,"text":198},{"id":224,"depth":255,"text":225,"children":1090},[1091,1092,1093,1094],{"id":231,"depth":264,"text":232},{"id":273,"depth":264,"text":274},{"id":303,"depth":264,"text":304},{"id":333,"depth":264,"text":334},{"id":357,"depth":255,"text":358,"children":1096},[1097,1098,1099,1100,1101],{"id":364,"depth":264,"text":365},{"id":394,"depth":264,"text":395},{"id":461,"depth":264,"text":462},{"id":481,"depth":264,"text":482},{"id":511,"depth":264,"text":512},{"id":535,"depth":255,"text":536,"children":1103},[1104,1105,1106],{"id":542,"depth":264,"text":543},{"id":586,"depth":264,"text":587},{"id":609,"depth":264,"text":610},{"id":691,"depth":255,"text":692,"children":1108},[1109,1110,1111],{"id":695,"depth":264,"text":696},{"id":713,"depth":264,"text":714},{"id":731,"depth":264,"text":732},{"id":752,"depth":255,"text":753},{"id":974,"depth":255,"text":975},{"id":1055,"depth":255,"text":1056},{"id":1065,"depth":255,"text":1066},"2026-05-26","Learn the differences between HEX, RGB, and HSL color formats. Understand conversion formulas, use cases, and when to use each format in web development.","md",{"immutable":864},"\u002Fguides\u002Fhex-rgb-hsl-explained",10,{"title":5,"description":1117},"guides\u002Fhex-rgb-hsl-explained","P0eMw6JlsUk5q2vJ3po0gtdQy5zfZLb_08Ox0Y0s79E",1780401323844]