[{"data":1,"prerenderedAt":613},["ShallowReactive",2],{"guide-color-picker-workflow-designers":3},{"id":4,"title":5,"body":6,"date":605,"description":606,"extension":607,"meta":608,"navigation":446,"path":609,"readingTime":455,"seo":610,"stem":611,"__hash__":612},"guides\u002Fguides\u002Fcolor-picker-workflow-designers.md","Color Picker Workflow for Designers",{"type":7,"value":8,"toc":585},"minimark",[9,14,18,21,25,28,110,113,117,120,125,128,186,189,193,247,250,254,257,261,309,313,326,329,333,336,390,393,397,400,404,407,479,482,486,489,517,520,524,544,548,557,561,581],[10,11,13],"h2",{"id":12},"the-problem-with-picking-colors-randomly","The Problem with Picking Colors Randomly",[15,16,17],"p",{},"Opening a color picker and dragging until something \"looks right\" leads to inconsistent palettes, poor accessibility, and painful developer handoffs. Professional designers use a structured workflow: source an initial color, build a scale, verify contrast, convert formats, and document the result.",[15,19,20],{},"A disciplined workflow does not slow you down. It eliminates the back-and-forth that happens when colors feel wrong in-context despite looking fine in isolation.",[10,22,24],{"id":23},"step-1-start-with-a-source-color","Step 1: Start With a Source Color",[15,26,27],{},"Every palette starts with one anchor color. Where you get it depends on the project:",[29,30,31,47],"table",{},[32,33,34],"thead",{},[35,36,37,41,44],"tr",{},[38,39,40],"th",{},"Source",[38,42,43],{},"When to use",[38,45,46],{},"Example",[48,49,50,66,77,88,99],"tbody",{},[35,51,52,56,59],{},[53,54,55],"td",{},"Brand guidelines",[53,57,58],{},"Corporate or product work",[53,60,61,65],{},[62,63,64],"code",{},"#2563EB"," from brand book",[35,67,68,71,74],{},[53,69,70],{},"Mood board",[53,72,73],{},"New brand or campaign",[53,75,76],{},"Eyedropper from photo",[35,78,79,82,85],{},[53,80,81],{},"Competitor analysis",[53,83,84],{},"Redesign projects",[53,86,87],{},"Load competitor screenshot",[35,89,90,93,96],{},[53,91,92],{},"Keyword association",[53,94,95],{},"Early-stage exploration",[53,97,98],{},"\"Trust\" → blue, \"Energy\" → orange",[35,100,101,104,107],{},[53,102,103],{},"Random generation",[53,105,106],{},"Creative experiments",[53,108,109],{},"Shuffle until one resonates",[15,111,112],{},"Once you have your anchor, resist the urge to freestyle the rest. Derive complementary colors from systematic rules.",[10,114,116],{"id":115},"step-2-build-a-full-scale","Step 2: Build a Full Scale",[15,118,119],{},"One color is never enough. You need a scale — typically 5 to 11 shades — for backgrounds, borders, hover states, disabled states, and text.",[121,122,124],"h3",{"id":123},"the-hsl-method-recommended","The HSL method (recommended)",[15,126,127],{},"Convert your anchor color to HSL, then adjust the lightness while keeping hue and saturation constant:",[129,130,135],"pre",{"className":131,"code":132,"language":133,"meta":134,"style":134},"language-css shiki shiki-themes github-light github-dark","--brand-50:  hsl(221 83% 95%);   \u002F* Lightest background *\u002F\n--brand-100: hsl(221 83% 85%);\n--brand-300: hsl(221 83% 70%);\n--brand-500: hsl(221 83% 53%);   \u002F* Anchor color *\u002F\n--brand-700: hsl(221 83% 35%);\n--brand-900: hsl(221 83% 18%);   \u002F* Darkest text\u002Fbg *\u002F\n","css","",[62,136,137,150,156,162,171,177],{"__ignoreMap":134},[138,139,142,146],"span",{"class":140,"line":141},"line",1,[138,143,145],{"class":144},"sVt8B","--brand-50:  hsl(221 83% 95%);   ",[138,147,149],{"class":148},"sJ8bj","\u002F* Lightest background *\u002F\n",[138,151,153],{"class":140,"line":152},2,[138,154,155],{"class":144},"--brand-100: hsl(221 83% 85%);\n",[138,157,159],{"class":140,"line":158},3,[138,160,161],{"class":144},"--brand-300: hsl(221 83% 70%);\n",[138,163,165,168],{"class":140,"line":164},4,[138,166,167],{"class":144},"--brand-500: hsl(221 83% 53%);   ",[138,169,170],{"class":148},"\u002F* Anchor color *\u002F\n",[138,172,174],{"class":140,"line":173},5,[138,175,176],{"class":144},"--brand-700: hsl(221 83% 35%);\n",[138,178,180,183],{"class":140,"line":179},6,[138,181,182],{"class":144},"--brand-900: hsl(221 83% 18%);   ",[138,184,185],{"class":148},"\u002F* Darkest text\u002Fbg *\u002F\n",[15,187,188],{},"HSL makes scale generation predictable because lightness maps directly to perceived brightness. HEX and RGB do not — incrementing a HEX pair does not correspond to linear brightness change.",[121,190,192],{"id":191},"scale-conventions","Scale conventions",[29,194,195,205],{},[32,196,197],{},[35,198,199,202],{},[38,200,201],{},"Shade",[38,203,204],{},"Typical use",[48,206,207,215,223,231,239],{},[35,208,209,212],{},[53,210,211],{},"50–100",[53,213,214],{},"Subtle backgrounds, hover states on light surfaces",[35,216,217,220],{},[53,218,219],{},"200–300",[53,221,222],{},"Borders, chips, secondary backgrounds",[35,224,225,228],{},[53,226,227],{},"400–500",[53,229,230],{},"Primary actions, links, icons",[35,232,233,236],{},[53,234,235],{},"600–700",[53,237,238],{},"Hover states on primary buttons, emphasis text",[35,240,241,244],{},[53,242,243],{},"800–900",[53,245,246],{},"High-contrast text on light backgrounds",[15,248,249],{},"Tailwind CSS popularized this numbering system. Even if you do not use Tailwind, the convention is widely understood by developers.",[10,251,253],{"id":252},"step-3-verify-contrast-and-accessibility","Step 3: Verify Contrast and Accessibility",[15,255,256],{},"A palette that looks harmonious in a color swatch can fail WCAG contrast requirements when applied to actual UI elements.",[121,258,260],{"id":259},"minimum-contrast-ratios-wcag-21","Minimum contrast ratios (WCAG 2.1)",[29,262,263,276],{},[32,264,265],{},[35,266,267,270,273],{},[38,268,269],{},"Element type",[38,271,272],{},"AA minimum",[38,274,275],{},"AAA minimum",[48,277,278,289,299],{},[35,279,280,283,286],{},[53,281,282],{},"Normal text (\u003C 18px)",[53,284,285],{},"4.5:1",[53,287,288],{},"7:1",[35,290,291,294,297],{},[53,292,293],{},"Large text (≥ 18px bold or ≥ 24px)",[53,295,296],{},"3:1",[53,298,285],{},[35,300,301,304,306],{},[53,302,303],{},"UI components and graphical objects",[53,305,296],{},[53,307,308],{},"—",[121,310,312],{"id":311},"common-failures","Common failures",[314,315,316,320,323],"ul",{},[317,318,319],"li",{},"Brand blue text on white background — often fails at 500 weight",[317,321,322],{},"Gray placeholder text — commonly below 3:1",[317,324,325],{},"Light brand background with white text — fails unless background is dark enough",[15,327,328],{},"Test every text\u002Fbackground combination in your palette. A color picker tool that displays contrast ratios alongside the color saves enormous time compared to checking after the fact.",[10,330,332],{"id":331},"step-4-convert-to-all-needed-formats","Step 4: Convert to All Needed Formats",[15,334,335],{},"Your design tool may output HEX, but developers often need RGB, HSL, or CSS variables. Convert once at design time instead of leaving it to developers.",[29,337,338,348],{},[32,339,340],{},[35,341,342,345],{},[38,343,344],{},"Format",[38,346,347],{},"Use case",[48,349,350,358,366,374,382],{},[35,351,352,355],{},[53,353,354],{},"HEX",[53,356,357],{},"CSS properties, design tokens in JSON",[35,359,360,363],{},[53,361,362],{},"RGB",[53,364,365],{},"JavaScript color manipulation, canvas rendering",[35,367,368,371],{},[53,369,370],{},"HSL",[53,372,373],{},"Design system scales, theme variation",[35,375,376,379],{},[53,377,378],{},"RGB with alpha",[53,380,381],{},"Overlays, overlays, hover states",[35,383,384,387],{},[53,385,386],{},"HSL with alpha",[53,388,389],{},"Dark mode adjustments",[15,391,392],{},"A good color picker tool outputs all formats simultaneously — no manual conversion needed.",[10,394,396],{"id":395},"step-5-dark-mode-derivation","Step 5: Dark Mode Derivation",[15,398,399],{},"If your product supports dark mode, derive the dark palette from light mode rather than designing it independently.",[121,401,403],{"id":402},"the-inversion-principle","The inversion principle",[15,405,406],{},"Light backgrounds become dark surfaces. Light text becomes dark text. But brand colors stay the same — they are saturated enough to work on both backgrounds.",[129,408,410],{"className":131,"code":409,"language":133,"meta":134,"style":134},"\u002F* Light mode *\u002F\n--surface: #FFFFFF;\n--text-primary: #111827;\n--brand-500: hsl(221 83% 53%);\n\n\u002F* Dark mode *\u002F\n--surface: #111827;\n--text-primary: #F9FAFB;\n--brand-500: hsl(221 83% 60%);  \u002F* Slightly lighter for dark bg *\u002F\n",[62,411,412,417,426,437,442,448,453,462,470],{"__ignoreMap":134},[138,413,414],{"class":140,"line":141},[138,415,416],{"class":148},"\u002F* Light mode *\u002F\n",[138,418,419,422],{"class":140,"line":152},[138,420,421],{"class":144},"--surface: ",[138,423,425],{"class":424},"s7hpK","#FFFFFF;\n",[138,427,428,431,434],{"class":140,"line":158},[138,429,430],{"class":144},"--text-primary: ",[138,432,433],{"class":424},"#111827",[138,435,436],{"class":144},";\n",[138,438,439],{"class":140,"line":164},[138,440,441],{"class":144},"--brand-500: hsl(221 83% 53%);\n",[138,443,444],{"class":140,"line":173},[138,445,447],{"emptyLinePlaceholder":446},true,"\n",[138,449,450],{"class":140,"line":179},[138,451,452],{"class":148},"\u002F* Dark mode *\u002F\n",[138,454,456,458,460],{"class":140,"line":455},7,[138,457,421],{"class":144},[138,459,433],{"class":424},[138,461,436],{"class":144},[138,463,465,467],{"class":140,"line":464},8,[138,466,430],{"class":144},[138,468,469],{"class":424},"#F9FAFB;\n",[138,471,473,476],{"class":140,"line":472},9,[138,474,475],{"class":144},"--brand-500: hsl(221 83% 60%);  ",[138,477,478],{"class":148},"\u002F* Slightly lighter for dark bg *\u002F\n",[15,480,481],{},"The brand color shifts slightly lighter in dark mode because the same absolute hue reads darker against a dark surface than against white.",[10,483,485],{"id":484},"step-6-document-and-hand-off","Step 6: Document and Hand Off",[15,487,488],{},"A palette without documentation dies in translation. Provide developers with:",[490,491,492,499,505,511],"ol",{},[317,493,494,498],{},[495,496,497],"strong",{},"CSS custom properties"," — pre-formatted and ready to paste",[317,500,501,504],{},[495,502,503],{},"Design token JSON"," — machine-readable for design system tools",[317,506,507,510],{},[495,508,509],{},"Contrast grid"," — a table showing every text\u002Fbackground pair and its ratio",[317,512,513,516],{},[495,514,515],{},"Usage rules"," — which shade for which purpose",[15,518,519],{},"The more explicit the handoff, the fewer Slack messages about \"which blue?\"",[10,521,523],{"id":522},"key-takeaways","Key Takeaways",[314,525,526,529,532,535,538,541],{},[317,527,528],{},"Start every palette with one anchor color, then derive the rest systematically",[317,530,531],{},"Use HSL to build scales — lightness maps to perceived brightness linearly",[317,533,534],{},"Verify WCAG contrast for every text\u002Fbackground combination before committing",[317,536,537],{},"Convert colors to all formats upfront rather than leaving it to developers",[317,539,540],{},"Derive dark mode palettes from light mode — adjust lightness, keep hue",[317,542,543],{},"Document your palette with CSS custom properties, design tokens, and usage rules",[10,545,547],{"id":546},"try-it-yourself","Try It Yourself",[15,549,550,551,556],{},"Pick, convert, and verify colors in one place with our free ",[552,553,555],"a",{"href":554},"\u002Ftools\u002Fcolor-picker","Color Picker",". Choose visually, get HEX, RGB, HSL, and contrast checks — all output simultaneously with no manual conversion.",[10,558,560],{"id":559},"related-guides","Related Guides",[314,562,563,569,575],{},[317,564,565],{},[552,566,568],{"href":567},"\u002Fguides\u002Fcolor-code-formats","Color Code Formats",[317,570,571],{},[552,572,574],{"href":573},"\u002Fguides\u002Fdesign-color-fundamentals","Design Color Fundamentals",[317,576,577],{},[552,578,580],{"href":579},"\u002Fguides\u002Fwcag-contrast-practical","WCAG Contrast Practical Guide",[582,583,584],"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 .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}",{"title":134,"searchDepth":152,"depth":152,"links":586},[587,588,589,593,597,598,601,602,603,604],{"id":12,"depth":152,"text":13},{"id":23,"depth":152,"text":24},{"id":115,"depth":152,"text":116,"children":590},[591,592],{"id":123,"depth":158,"text":124},{"id":191,"depth":158,"text":192},{"id":252,"depth":152,"text":253,"children":594},[595,596],{"id":259,"depth":158,"text":260},{"id":311,"depth":158,"text":312},{"id":331,"depth":152,"text":332},{"id":395,"depth":152,"text":396,"children":599},[600],{"id":402,"depth":158,"text":403},{"id":484,"depth":152,"text":485},{"id":522,"depth":152,"text":523},{"id":546,"depth":152,"text":547},{"id":559,"depth":152,"text":560},"2026-05-28","Build an efficient color selection workflow — from inspiration to palette, format conversion, accessibility checks, and handoff to developers.","md",{"immutable":446},"\u002Fguides\u002Fcolor-picker-workflow-designers",{"title":5,"description":606},"guides\u002Fcolor-picker-workflow-designers","xbKnce8h9OIWWg_UsKoCnIzeAGtiY4Oso5oNPkPRNuQ",1780401332181]