[{"data":1,"prerenderedAt":520},["ShallowReactive",2],{"guide-color-picker-guide":3},{"id":4,"title":5,"body":6,"date":511,"description":512,"extension":513,"meta":514,"navigation":515,"path":516,"readingTime":184,"seo":517,"stem":518,"__hash__":519},"guides\u002Fguides\u002Fcolor-picker-guide.md","Color Picker Guide",{"type":7,"value":8,"toc":487},"minimark",[9,14,18,21,25,33,55,58,62,65,70,73,125,129,132,188,192,195,199,202,282,285,294,298,301,305,308,327,330,334,337,345,349,352,356,359,363,370,374,393,397,417,421,424,428,448,452,465,469,483],[10,11,13],"h2",{"id":12},"what-is-an-online-color-picker","What Is an Online Color Picker",[15,16,17],"p",{},"An online color picker is a browser-based tool that lets you select colors visually and instantly generates their code in multiple formats—HEX, RGB, HSL, and CMYK. Unlike desktop design software, it requires no installation and works on any device.",[15,19,20],{},"Designers and developers use color pickers daily: to match a brand color from a screenshot, to fine-tune a button shade, or to translate a color between code formats. A good picker removes the friction between \"I like this color\" and \"here's the code I need.\"",[10,22,24],{"id":23},"how-online-color-pickers-work","How Online Color Pickers Work",[15,26,27,28,32],{},"Most web-based color pickers use the ",[29,30,31],"strong",{},"HSB (Hue-Saturation-Brightness)"," model internally because it maps naturally to human intuition. The interface typically has three parts:",[34,35,36,43,49],"ul",{},[37,38,39,42],"li",{},[29,40,41],{},"Hue slider or wheel"," — choose the base color (0°–360°)",[37,44,45,48],{},[29,46,47],{},"Saturation-brightness square"," — adjust vividness and lightness",[37,50,51,54],{},[29,52,53],{},"Output fields"," — display the result in HEX, RGB, HSL, and CMYK",[15,56,57],{},"When you click or drag within the square, the tool converts your HSB selection into every format in real time. The math is deterministic—the same coordinates always produce the same codes.",[10,59,61],{"id":60},"choosing-colors-for-web-design","Choosing Colors for Web Design",[15,63,64],{},"Picking a color that \"looks nice\" isn't enough. A systematic approach saves time and produces more consistent results.",[66,67,69],"h3",{"id":68},"start-with-purpose","Start with Purpose",[15,71,72],{},"Ask yourself what the color needs to do:",[74,75,76,89],"table",{},[77,78,79],"thead",{},[80,81,82,86],"tr",{},[83,84,85],"th",{},"Purpose",[83,87,88],{},"Best Approach",[90,91,92,101,109,117],"tbody",{},[80,93,94,98],{},[95,96,97],"td",{},"Brand identity",[95,99,100],{},"Pick a dominant hue, then build a scale",[80,102,103,106],{},[95,104,105],{},"Call to action",[95,107,108],{},"Choose a high-saturation accent that contrasts with the page",[80,110,111,114],{},[95,112,113],{},"Background",[95,115,116],{},"Use low-saturation, high-lightness tones",[80,118,119,122],{},[95,120,121],{},"Error or warning",[95,123,124],{},"Follow convention—red for errors, amber for warnings",[66,126,128],{"id":127},"pick-one-hue-then-scale","Pick One Hue, Then Scale",[15,130,131],{},"Resist the temptation to pick five unrelated colors. Instead, pick one primary hue and generate lighter and darker variants by adjusting lightness in HSL. This creates a cohesive palette without guesswork.",[133,134,139],"pre",{"className":135,"code":136,"language":137,"meta":138,"style":138},"language-css shiki shiki-themes github-light github-dark","\u002F* One hue, six lightness levels *\u002F\n--brand-100: hsl(210, 80%, 95%);\n--brand-200: hsl(210, 80%, 85%);\n--brand-300: hsl(210, 80%, 70%);\n--brand-400: hsl(210, 80%, 55%);\n--brand-500: hsl(210, 80%, 45%);\n--brand-600: hsl(210, 80%, 30%);\n","css","",[140,141,142,151,158,164,170,176,182],"code",{"__ignoreMap":138},[143,144,147],"span",{"class":145,"line":146},"line",1,[143,148,150],{"class":149},"sJ8bj","\u002F* One hue, six lightness levels *\u002F\n",[143,152,154],{"class":145,"line":153},2,[143,155,157],{"class":156},"sVt8B","--brand-100: hsl(210, 80%, 95%);\n",[143,159,161],{"class":145,"line":160},3,[143,162,163],{"class":156},"--brand-200: hsl(210, 80%, 85%);\n",[143,165,167],{"class":145,"line":166},4,[143,168,169],{"class":156},"--brand-300: hsl(210, 80%, 70%);\n",[143,171,173],{"class":145,"line":172},5,[143,174,175],{"class":156},"--brand-400: hsl(210, 80%, 55%);\n",[143,177,179],{"class":145,"line":178},6,[143,180,181],{"class":156},"--brand-500: hsl(210, 80%, 45%);\n",[143,183,185],{"class":145,"line":184},7,[143,186,187],{"class":156},"--brand-600: hsl(210, 80%, 30%);\n",[66,189,191],{"id":190},"add-one-accent-color","Add One Accent Color",[15,193,194],{},"Once your primary scale is locked, pick a complementary or analogous hue for accent elements—buttons, links, badges. A single accent keeps the design focused.",[10,196,198],{"id":197},"understanding-hex-rgb-hsl-and-cmyk-formats","Understanding HEX, RGB, HSL, and CMYK Formats",[15,200,201],{},"A good color picker outputs all four common formats. Here's what each one represents:",[74,203,204,217],{},[77,205,206],{},[80,207,208,211,214],{},[83,209,210],{},"Format",[83,212,213],{},"Used In",[83,215,216],{},"What It Encodes",[90,218,219,236,253,269],{},[80,220,221,226,229],{},[95,222,223],{},[29,224,225],{},"HEX",[95,227,228],{},"CSS, design tools",[95,230,231,232,235],{},"Base-16 shorthand for RGB (",[140,233,234],{},"#FF7F50",")",[80,237,238,243,250],{},[95,239,240],{},[29,241,242],{},"RGB",[95,244,245,246,249],{},"CSS ",[140,247,248],{},"rgb()",", JavaScript",[95,251,252],{},"Red, Green, Blue channels from 0–255",[80,254,255,260,266],{},[95,256,257],{},[29,258,259],{},"HSL",[95,261,245,262,265],{},[140,263,264],{},"hsl()",", design systems",[95,267,268],{},"Hue (0–360°), Saturation %, Lightness %",[80,270,271,276,279],{},[95,272,273],{},[29,274,275],{},"CMYK",[95,277,278],{},"Print production",[95,280,281],{},"Cyan, Magenta, Yellow, Key (black) percentages",[15,283,284],{},"For web work, HEX and HSL cover 95% of needs. CMYK matters only when preparing assets for print.",[15,286,287,288,293],{},"For a deep dive into each format and conversion formulas, see our ",[289,290,292],"a",{"href":291},"\u002Fguides\u002Fcolor-code-formats","Color Code Formats"," guide.",[10,295,297],{"id":296},"tips-for-accessible-color-choices","Tips for Accessible Color Choices",[15,299,300],{},"Accessibility isn't optional—roughly 1 in 12 men and 1 in 200 women have some form of color vision deficiency.",[66,302,304],{"id":303},"check-contrast-first","Check Contrast First",[15,306,307],{},"The WCAG 2.1 standard requires:",[34,309,310,316,322],{},[37,311,312,315],{},[29,313,314],{},"4.5:1"," contrast ratio for normal text",[37,317,318,321],{},[29,319,320],{},"3:1"," for large text (18pt+ or 14pt+ bold)",[37,323,324,326],{},[29,325,320],{}," for UI components and graphical objects",[15,328,329],{},"Always verify your text-background pairs. A color picker that shows contrast alongside the color eliminates the guesswork.",[66,331,333],{"id":332},"dont-rely-on-color-alone","Don't Rely on Color Alone",[15,335,336],{},"Never convey meaning through color by itself. Pair color with text labels, icons, or patterns so color-blind users can still identify states.",[133,338,343],{"className":339,"code":341,"language":342},[340],"language-text","\u003C!-- Bad: relies only on red -->\n\u003Cspan class=\"error\">Error\u003C\u002Fspan>\n\n\u003C!-- Good: icon + color -->\n\u003Cspan class=\"error\">⚠ Error\u003C\u002Fspan>\n","text",[140,344,341],{"__ignoreMap":138},[66,346,348],{"id":347},"avoid-problematic-combinations","Avoid Problematic Combinations",[15,350,351],{},"Red-green is the most common color blindness type. If your design uses red for errors and green for success, add icons or text to distinguish them.",[66,353,355],{"id":354},"test-in-grayscale","Test in Grayscale",[15,357,358],{},"Convert your design to grayscale mentally or with a browser filter. If two elements become indistinguishable, your palette needs adjustment.",[10,360,362],{"id":361},"using-the-eyedropper-tool","Using the Eyedropper Tool",[15,364,365,366,369],{},"Modern browsers support the ",[29,367,368],{},"EyeDropper API",", which lets a color picker sample any pixel on your screen—not just inside the browser window.",[66,371,373],{"id":372},"how-it-works","How It Works",[375,376,377,384,387,390],"ol",{},[37,378,379,380,383],{},"Click the ",[29,381,382],{},"eyedropper"," button in the color picker",[37,385,386],{},"The cursor becomes a magnifying loupe",[37,388,389],{},"Hover over any area of your screen",[37,391,392],{},"Click to capture the color under the cursor",[66,394,396],{"id":395},"practical-use-cases","Practical Use Cases",[34,398,399,405,411],{},[37,400,401,404],{},[29,402,403],{},"Match a brand color"," from a PDF, logo, or competitor screenshot",[37,406,407,410],{},[29,408,409],{},"Sample a photo"," to create a palette that complements an image",[37,412,413,416],{},[29,414,415],{},"Grab a color from another app"," without taking a screenshot first",[66,418,420],{"id":419},"browser-support","Browser Support",[15,422,423],{},"The EyeDropper API works in Chromium-based browsers (Chrome, Edge, Brave). Firefox and Safari users can use the OS-level color picker or a screenshot-based workaround.",[10,425,427],{"id":426},"key-takeaways","Key Takeaways",[34,429,430,433,436,439,442,445],{},[37,431,432],{},"An online color picker converts visual selection into HEX, RGB, HSL, and CMYK codes instantly",[37,434,435],{},"Start with one hue and build a lightness scale before adding accent colors",[37,437,438],{},"Use HSL for design decisions—it maps to how humans perceive color",[37,440,441],{},"Always check WCAG contrast ratios; 4.5:1 minimum for body text",[37,443,444],{},"Pair color with text or icons so color-blind users aren't excluded",[37,446,447],{},"The eyedropper tool samples any on-screen pixel for fast, accurate matching",[10,449,451],{"id":450},"try-it-yourself","Try It Yourself",[15,453,454,455,459,460,464],{},"Pick and convert colors in every format with our free ",[289,456,458],{"href":457},"\u002Ftools\u002Fcolor-converter","Color Converter"," tool. Use it alongside the ",[289,461,463],{"href":462},"\u002Ftools\u002Fhex-to-rgb","HEX to RGB Converter"," for precise code translations.",[10,466,468],{"id":467},"related-guides","Related Guides",[34,470,471,476],{},[37,472,473,475],{},[289,474,292],{"href":291}," — HEX, RGB, HSL, and CMYK in detail",[37,477,478,482],{},[289,479,481],{"href":480},"\u002Fguides\u002Fdesign-color-fundamentals","Design Color Fundamentals"," — color wheel, harmony, and palette building",[484,485,486],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}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":138,"searchDepth":153,"depth":153,"links":488},[489,490,491,496,497,503,508,509,510],{"id":12,"depth":153,"text":13},{"id":23,"depth":153,"text":24},{"id":60,"depth":153,"text":61,"children":492},[493,494,495],{"id":68,"depth":160,"text":69},{"id":127,"depth":160,"text":128},{"id":190,"depth":160,"text":191},{"id":197,"depth":153,"text":198},{"id":296,"depth":153,"text":297,"children":498},[499,500,501,502],{"id":303,"depth":160,"text":304},{"id":332,"depth":160,"text":333},{"id":347,"depth":160,"text":348},{"id":354,"depth":160,"text":355},{"id":361,"depth":153,"text":362,"children":504},[505,506,507],{"id":372,"depth":160,"text":373},{"id":395,"depth":160,"text":396},{"id":419,"depth":160,"text":420},{"id":426,"depth":153,"text":427},{"id":450,"depth":153,"text":451},{"id":467,"depth":153,"text":468},"2026-05-28","How to use a color picker effectively — choose the right color and get HEX, RGB, HSL, and CMYK codes instantly.","md",{"immutable":515},true,"\u002Fguides\u002Fcolor-picker-guide",{"title":5,"description":512},"guides\u002Fcolor-picker-guide","-YH54BCNKODpiUS5BotkN_pKQtlq7bvVMsm7u6mGaxM",1780401330796]