{"componentChunkName":"component---src-templates-post-jsx","path":"/blog/polypane-14-1-container-query-support-forced-element-state-and-contrast-lines-in-color-pickers/","result":{"data":{"mdx":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nconst _frontmatter = {\n  \"title\": \"Polypane 14.1: Container query support, forced element state and contrast lines in color pickers\",\n  \"cover\": \"/img/mail/icon.svg\",\n  \"date\": \"2023-07-12\",\n  \"type\": [\"announcement\"]\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n    components\n  } = _ref,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, `Container queries in the Polypane Elements panel, color pickers now show contrast lines, the ability to force pseudo states like hover or focus on elements, a new Cascade layer tree overview, new devices and better handling of forms and URLs across panes.`), mdx(PolypaneIntro, {\n    mdxType: \"PolypaneIntro\"\n  }), mdx(\"p\", null, `We also fixed the stupid bug that prevented you from scrolling in panes sometimes. Sorry about that one!`), mdx(\"h2\", {\n    \"id\": \"container-queries-in-the-elements-panel\"\n  }, `Container queries in the Elements panel`), mdx(\"p\", null, `For the container query support in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/elements-panel/\"\n  }), `Elements panel`), ` we took a step back to figure out what the questions are that you want answered when dealing with container queries, and designed UI to deal with those.`), mdx(\"p\", null, `In the tree view you can see at a glance which element are containers through the \"container\" badge. Hovering the badge will show you the container query's name, type and size, so you don't need to click and inspect to get a general idea of the container (is it only inline-size or not, what are the relevant dimensions?) Clicking the badge highlights it in pages just like the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/elements-panel/#flex-and-grid-layout-overlays\"\n  }), `flex and grid layout overlays`), `.`), mdx(\"p\", null, `Then in the style overview, container queries are annotated with the container properties and a link to the containing element. Hover over them to quickly see the same name, type and size information as in the tree view. This helps a lot when you use container query units, as well as figuring out which container you're dealing with.`), mdx(\"img\", {\n    src: containerquerystylepanel,\n    alt: \"\",\n    className: \"imgshadow\"\n  }), mdx(\"p\", null, `You can click the containing element to inspect and edit it so you don't have to hunt across the tree view for it. This is especially useful with nested container queries.`), mdx(\"p\", null, `Implementing container queries in the elements panel was a huge undertaking. There are no client-side APIs to know whether a container query applies or not so we had to write our own parser for container queries. The result though is that support for container queries is now deeply integrated into the elements panel.`), mdx(\"h2\", {\n    \"id\": \"other-elements-panel-improvements\"\n  }, `Other Elements panel improvements`), mdx(\"p\", null, `Along with container query support, we've made a few other improvements to the elements panel.`), mdx(\"h3\", {\n    \"id\": \"set-the-element-state\"\n  }, `Set the element state`), mdx(\"p\", null, `You can now set the state of an element in the elements panel. This allows you to force pseudo states like `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `:hover`), ` or `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `:focus`), ` on elements, or to force the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `:active`), ` state of a button. This way you can see how your site behaves in different states without having to interact with it, and you can debug styling issues with pseudo states.`), mdx(\"img\", {\n    src: elementstate,\n    alt: \"\",\n    className: \"imgshadow\"\n  }), mdx(\"p\", null, `Elements with a forced pseudo state get a badge in the treeview so you can see at a glance which elements have a forced state.`), mdx(\"h3\", {\n    \"id\": \"cascade-layer-overview\"\n  }, `Cascade layer overview`), mdx(\"p\", null, `Last year in `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://polypane.app/blog/polypane-8-better-elements-inspector-new-syncing-features-chromium-98-and-more/\"\n  }), `Polypane 8`), ` we added support for the new @layer CSS rule. We've now updated our support for Cascade layers with a new CSS layers overview.`), mdx(\"img\", {\n    src: layertree,\n    className: \"imgshadow\",\n    alt: \"Cascade layer overview\"\n  }), mdx(\"p\", null, `The overview shows all your layers in a nested overview so you can quickly see the structure of your layers. In addition, layers that are not applicable to the current element are greyed out, so you can see at a glance which layers are relevant for the styling of the currently selected element.`), mdx(\"h3\", {\n    \"id\": \"send-an-elements-text-and-background-colors-to-the-color-picker\"\n  }, `Send an element's text and background colors to the color picker`), mdx(\"p\", null, `Click on the contrast ratio rating in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/elements-panel/#navigator\"\n  }), `Element Navigator`), ` or `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/elements-panel/#a11y\"\n  }), `A11y tab`), ` will send the text and background colors to the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/color-picker/\"\n  }), `color picker`), `. There you can adjust the colors and see the contrast ratio update in real time, or create a swatch screenshot to share with your team.`), mdx(\"h3\", {\n    \"id\": \"showing-the-resolved-css-selector\"\n  }, `Showing the resolved CSS selector`), mdx(\"p\", null, `The resolved selector is the CSS Selector that your browser uses to match elements, and it's not always the selector you write.`), mdx(\"p\", null, `With CSS Nesting, the actual selector that the browser uses to match elements is resolved from the nesting where each `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `&`), ` gets replaced with the parent selector wrapped in `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `:is()`), `.`), mdx(\"img\", {\n    src: resolvedselector,\n    alt: \"\",\n    className: \"imgshadow\"\n  }), mdx(\"p\", null, `When hovering the specificity score, we now show the resolved selector. You can still click the specificity to open the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/css-specificity-calculator/\"\n  }), `CSS specificity calculator`), `.`), mdx(\"h2\", {\n    \"id\": \"contrast-lines-in-all-color-pickers\"\n  }, `Contrast lines in all color pickers`), mdx(\"p\", null, `Color pickers across the app are now aware of the background color and contrast ratio and they will show lines for AA, AAA and APCA contrast ratios.`), mdx(\"video\", {\n    src: colorpickercontrast,\n    controls: true,\n    className: \"imgshadow\"\n  }), mdx(\"p\", null, `The three lines correspond to 3:1, 4.5:1 and 7:1 for WCAG, and Lc 45, Lc 60 and Lc 75 for APCA.`), mdx(\"p\", null, `In `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/elements-panel/\"\n  }), `the elements panel`), `, the color picker will automatically detect what type of contrast it needs (small text needs 4.5:1, while large text or border colors need 3:1) and in `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/color-picker/\"\n  }), `the color picker`), ` UI you can choose what contrast ratio you want to meet.`), mdx(\"p\", null, `The line that is highlighted is the one you should meet, so it becomes very easy to find a better contrasting color.`), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, `Though currently exclusive to Polypane, the contrast lines will find their way to `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://colorcontrast.app\"\n  }), `colorcontrast.app`), ` in the future.`)), mdx(\"h2\", {\n    \"id\": \"new-hover-sync-engine\"\n  }, `New hover sync engine`), mdx(\"p\", null, `We've completely rewritten the sync engine for hovers and it's now much more robust. Hover styling is now also applied to child nodes and pseudo elements, and we no longer show stale hover styles after editing them. The new sync engine is also faster which should result in more responsive panes.`), mdx(\"h2\", {\n    \"id\": \"distance-between-guides\"\n  }, `Distance between guides`), mdx(\"p\", null, `By default, guides show the distance to the edges of the pane, but you can check 'Show distance between guides' to show the distance between all shown guides.`), mdx(\"video\", {\n    src: measuredistance2,\n    controls: true,\n    className: \"imgshadow\",\n    style: {\n      maxWidth: 'auto'\n    }\n  }), mdx(\"p\", null, `This is useful when you want to check the distance between two elements, or when you want to check the dimensions of a group of elements.`), mdx(\"h2\", {\n    \"id\": \"notable-bug-fixes-and-core-improvements\"\n  }, `Notable bug fixes and core improvements`), mdx(\"p\", null, `You can find all changes below in the changelog but we wanted to call out a few:`), mdx(\"h3\", {\n    \"id\": \"scrolls-not-being-captured-by-panes\"\n  }, `Scrolls not being captured by panes`), mdx(\"p\", null, `Many of you noticed this unfortunately, but when your mouse entered the pane from a certain angle, scroll events weren't properly sent into the pane but instead to the workspace.`), mdx(\"p\", null, `This was due to some work we did to make pane resizing more efficient in 14.0. It's now fixed and scroll events are properly sent to the pane.`), mdx(\"h3\", {\n    \"id\": \"better-handling-of-forms-and-urls-across-panes\"\n  }, `Better handling of forms and URLs across panes`), mdx(\"p\", null, `We've made two improvements to the way URLs and forms are handled in a multi-pane setup.`), mdx(\"p\", null, `When submitting a form, Polypane will only submit it in a single pane to avoid sending the same form submission multiple times. We've increased the number of situations where we can correctly detect and prevent a form submission.`), mdx(\"p\", null, `For URLs, we no longer normalize the search params of URLs when syncing them across panes. This helps in situations where the order of search params is assumed by the JS on the page, or when there is a specific encoding used in the search params (as our implementation also normalized the encoding).`), mdx(\"p\", null, `The result is that when dealing with forms or URLs with search params, you should encounter less issues when syncing across panes.`), mdx(\"h3\", {\n    \"id\": \"meta-panel-improvements\"\n  }, `Meta panel improvements`), mdx(\"p\", null, `The meta panel now warns you when the urls to your og images are incorrect, and we've updated the previews for Twitter, LinkedIn and Google. In addition, we've also improved the handling of robots.txt and humans.txt files so you'll see requests for those those even less when running a dev server.`), mdx(\"h2\", {\n    \"id\": \"what-can-we-do-for-you\"\n  }, `What can we do for you?`), mdx(\"p\", null, `As you've seen in the changelogs for this release and the past few releases, many features have come from Polypane's users. We love getting feedback and one of the best things about having devs as users is that they are `, mdx(\"em\", {\n    parentName: \"p\"\n  }, `very good at feature requests`), `.`), mdx(\"p\", null, `So consider this an open invitation: What is missing from Polypane? What's the one thing we should do that makes Polypane amazing for you? What nit would you just love we fix? `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/support/\"\n  }), `Let us know!`), ` 🙏`), mdx(\"h2\", {\n    \"id\": \"get-polypane-141\"\n  }, `Get Polypane 14.1`), mdx(\"p\", null, `Polypane is available for Windows, Mac and Linux (.deb or AppImage) in both 64 bit and ARM versions.`), mdx(\"p\", null, `Polypane automatically updates on Mac, Windows and on Linux when using the AppImage. Otherwise, go to\n`, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/download/\"\n  }), `the download page`), ` to download the latest version!`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Don't have Polypane yet? There is a 14 day trial available. `, mdx(\"a\", _extends({\n    parentName: \"strong\"\n  }, {\n    \"href\": \"https://dashboard.polypane.app/register\"\n  }), `Try it for free`), `.`), ` No credit card needed.`), mdx(\"h2\", {\n    \"id\": \"polypane-141-changelog\"\n  }, `Polypane 14.1 Changelog`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `New`)), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Color pickers now show contrast lines`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Hover sync engine that supports child and pseudo element syncing`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Elements panel: Set the element state`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Elements panel: Support for container queries`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Elements panel: Show container badges in tree view`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Elements panel: Cascade layer tree overview`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Show distance between guides`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` New Samsung Galaxy s22 devices`)), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Improved`)), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Meta panel: Request robots.txt, humans.txt etc less often`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Meta Panel: updated Twitter, LinkedIn and Google previews`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Meta Panel: extra warnings for incorrectly linked og images`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements panel: Clicking contrast info opens the color picker with the colors selected (Thanks Eric!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements panel: Show the real size, type, name and size query of container elements`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements panel: The resolved selector is shown as tooltip when hovering the specificity (Thanks Bart!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Clicking the session in the address bar opens the session manager`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Add a warning for the next dev server with App directory`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` URL handling of urls with search params (Thanks Ferry)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Duplicate tab context menu now allows for picking a new layout (Thanks Dash!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Prevent additional form submissions in panes for `, `<`, `input type=submit`, `>`, ` (Thanks Alessandro!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Better visual design for the session indicator of tabs`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Better permission prompt for access to clipboard write access`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Improved scrolling in pane options`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` More known CSS properties`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Updated accessibility ruleset`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Updated Google Fonts list`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Updated Chromium to 114.0.5735.134`)), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Fixes`)), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` issue with scrolls not being captured by panes (Thanks Adam and many others!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Screenshots setting to directly save to disk/copy to clipboard work again (Thanks Adrian!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Correct URL for geolocation API info in permission prompt (Thanks Neal!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Browser-sync button opens correct page (Thanks James!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Hide devtools when extension manager or session manager is open`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Panel UI is now clickable on macOS with the header hidden (Thanks Trond!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Chrome devtools bounds were off by 1px`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Storing workspaces on first launch failed (Thanks Ilker)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Elements panel: workaround for issue where CSSOM returns faulty info for background-clip property`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Elements panel: Box model overview said NaN instead of 'auto'`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Elements panel: contrast score in dark mode had incorrect background`)));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":6,"tableOfContents":{"items":[{"url":"#container-queries-in-the-elements-panel","title":"Container queries in the Elements panel"},{"url":"#other-elements-panel-improvements","title":"Other Elements panel improvements","items":[{"url":"#set-the-element-state","title":"Set the element state"},{"url":"#cascade-layer-overview","title":"Cascade layer overview"},{"url":"#send-an-elements-text-and-background-colors-to-the-color-picker","title":"Send an element's text and background colors to the color picker"},{"url":"#showing-the-resolved-css-selector","title":"Showing the resolved CSS selector"}]},{"url":"#contrast-lines-in-all-color-pickers","title":"Contrast lines in all color pickers"},{"url":"#new-hover-sync-engine","title":"New hover sync engine"},{"url":"#distance-between-guides","title":"Distance between guides"},{"url":"#notable-bug-fixes-and-core-improvements","title":"Notable bug fixes and core improvements","items":[{"url":"#scrolls-not-being-captured-by-panes","title":"Scrolls not being captured by panes"},{"url":"#better-handling-of-forms-and-urls-across-panes","title":"Better handling of forms and URLs across panes"},{"url":"#meta-panel-improvements","title":"Meta panel improvements"}]},{"url":"#what-can-we-do-for-you","title":"What can we do for you?"},{"url":"#get-polypane-141","title":"Get Polypane 14.1"},{"url":"#polypane-141-changelog","title":"Polypane 14.1 Changelog"}]},"excerpt":"Container queries in the Polypane Elements panel, color pickers now show contrast lines, the ability to force pseudo states like hover or focus on elements, a…","frontmatter":{"title":"Polypane 14.1: Container query support, forced element state and contrast lines in color pickers","cover":"/img/mail/icon.svg","date":"2023-07-12","updated":null},"fields":{"slug":"/blog/polypane-14-1-container-query-support-forced-element-state-and-contrast-lines-in-color-pickers/","date":"2023-07-11T22:00:00.000Z","ogFileName":"polypane-14-1-container-query-support-forced-element-state-and-contrast-lines-in-color-pickers"}}},"pageContext":{"slug":"/blog/polypane-14-1-container-query-support-forced-element-state-and-contrast-lines-in-color-pickers/"}},"staticQueryHashes":["4164364741","425175329"]}