{"componentChunkName":"component---src-templates-doc-jsx","path":"/docs/color-picker/","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\": \"Color Picker\",\n  \"slug\": \"color-picker\"\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, `The color picker eye dropper lets you pick colors from anywhere on the screen, and it's available right from the address bar by\nclicking the eye dropper icon. After picking a color, it will automatically be copied to your clipboard and added to the list\nof selected colors, available in the elements panel and other color selectors in Polypane.`), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, `Make sure to check our free `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/color-contrast/\"\n  }), `Color Contrast Checker`), ` to test colors online against WCAG and APCA, get previews and suggestions.`)), mdx(\"img\", {\n    src: \"/doc-img/colorpicker/icon.png\",\n    className: \"imgshadow\",\n    alt: \"\"\n  }), mdx(\"p\", null, `You can also start the eye dropper with `, mdx(ShortCutDisplay, {\n    shiftKey: true,\n    altKey: true,\n    letter: \"p\",\n    mdxType: \"ShortCutDisplay\"\n  }), ` to pick a color. While in eye dropper mode, press `, mdx(ShortCutDisplay, {\n    letter: \"Esc\",\n    mdxType: \"ShortCutDisplay\"\n  }), ` to cancel.`), mdx(\"h2\", {\n    \"id\": \"video-overview\"\n  }, `Video overview`), mdx(\"div\", {\n    style: {\n      \"position\": \"relative\",\n      \"width\": \"100%\",\n      \"paddingTop\": \"56.25%\"\n    }\n  }, mdx(\"a\", {\n    id: \"video\",\n    style: {\n      \"position\": \"absolute\",\n      \"top\": \"-100px\"\n    }\n  }), mdx(\"iframe\", {\n    src: \"https://www.youtube.com/embed/rldFPBecGIE?&autoplay=false&start=0\",\n    allow: \"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\",\n    allowFullScreen: \"\",\n    style: {\n      \"position\": \"absolute\",\n      \"top\": \"0px\",\n      \"left\": \"0px\",\n      \"width\": \"100%\",\n      \"height\": \"100%\"\n    },\n    frameBorder: \"0\"\n  })), mdx(\"h2\", {\n    \"id\": \"color-picker-ui\"\n  }, `Color Picker UI`), mdx(\"p\", null, `After having selected a color the Color Picker UI will open. You can also open this by right-clicking the icon in the menu bar.`), mdx(\"p\", null, `The top row contains a separate eye dropper button, an element selection button, a color palette button, a screenshot button and three dropdowns:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Choose between AA and AAA minimum contrast levels, or the new APCA algorithm.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Choose to test for small text, large text or non-text contrast.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Select the color notation you want: hex, rgb, hsl or hwb.`)), mdx(\"p\", null, `With the eye dropper button you can pick a color from anywhere on the screen.`), mdx(\"p\", null, `The element button lets you select any element from inside your panes and it will find the text and background colors for you.`), mdx(\"p\", null, `The palette button opens up a traditional color picker along with tints and shades for the currently picked color and an overview of previously picked colors.`), mdx(\"p\", null, `The screenshot icon creates `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"#swatch-screenshots\"\n  }), `a screenshot of the swatch`), ` that you can use to share with your team or add to reports.`), mdx(\"img\", {\n    src: \"/doc-img/colorpicker/ui.png\",\n    className: \"imgshadow\",\n    alt: \"\"\n  }), mdx(\"p\", null, `Picking colors will always update the selected (foreground) color and push the previous selected color to the background color.`), mdx(\"p\", null, `You can also click the pickers inside the swatches to pick a color for that swatch specifically without affecting the other swatch.`), mdx(\"h3\", {\n    \"id\": \"element-picker\"\n  }, `Element picker`), mdx(\"p\", null, `The element picker lets you select any element in your panes and will load in the calculated foreground and background colors for that element (taking into account things like opacity and layered backgrounds). This is useful when you want to check the contrast of a specific element on a page.`), mdx(\"video\", {\n    src: colorpickerfromelement,\n    loop: true,\n    controls: true,\n    className: \"imgshadow\",\n    style: {\n      margin: '0 auto',\n      maxWidth: '100%'\n    }\n  }, \"Color overlay example\"), mdx(\"h3\", {\n    \"id\": \"selected-color-and-background\"\n  }, `Selected color and background`), mdx(\"p\", null, `Below the top bar are two large color swatches: your most recently selected color and the background to check it against (by\ndefault the previously picked color). The background swatch will show the text in the selected color on top of it for\nyou to compare, in a font size that matches the \"small\" or \"large\" text chosen.`), mdx(\"p\", null, `Click on these swatches to copy their color in the shown format.`), mdx(\"p\", null, `Right-click either swatch to copy one or both as CSS, or both as CSS custom properties.`), mdx(\"h3\", {\n    \"id\": \"suggests-improved-colors\"\n  }, `Suggests improved colors`), mdx(\"p\", null, `Below the two swatches we show the contrast along with whether or not it passes the WCAG AA or AAA score for the\nselected text size. When a color does not have enough contrast with the chosen background color we'll show a small square\nin the swatch with the closest color that does have enough contrast (using the same algorithm we use in our color contrast debug tool).\nClicking it will update your selected color.`), mdx(\"p\", null, `Right-click the swatch to copy the color value, or to copy the full suggestion as a sentence, which contains the color values and the suggested color value.`), mdx(\"h3\", {\n    \"id\": \"previously-selected-colors\"\n  }, `Previously selected colors`), mdx(\"p\", null, `Below that we show an overview of the 9 last selected colors. The contrast of each color is scored against the currently selected\nbackground color.`), mdx(\"p\", null, `Click a color to copy it, click the \"Aa\" icon to set this color as the selected color or the background icon to set it\nas the background color to compare other colors to.`), mdx(\"p\", null, `These colors are also available in the color selector in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/elements-panel/\"\n  }), `elements panel`), `.`), mdx(\"h3\", {\n    \"id\": \"swatch-screenshots\"\n  }, `Swatch screenshots`), mdx(\"p\", null, `The swatch screenshot can be used to share color combinations along with their contrast score. It will contain the color in the format you have selected, along with the suggested color.`), mdx(\"img\", {\n    src: \"/doc-img/colorpicker/swatch.png\",\n    className: \"imgshadow\",\n    style: {\n      borderRadius: '1em'\n    },\n    alt: \"\"\n  }), mdx(\"p\", null, `These are ready to be shared with your team in tickets, or can be pasted into auditing reports. The file name is a suggestion for the alt text.`), mdx(\"h2\", {\n    \"id\": \"color-palette-picker\"\n  }, `Color palette picker`), mdx(\"p\", null, `The color palette picker is the same color picker that you can find in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/elements-panel/\"\n  }), `elements panel`), `. It lets you pick a color using a traditional color picker, along with tints and shades for the currently picked color.`), mdx(\"video\", {\n    src: colorpickercontrast,\n    loop: true,\n    controls: true,\n    className: \"imgshadow\",\n    style: {\n      margin: '0 auto',\n      maxWidth: '100%'\n    }\n  }, \"Color overlay example\"), mdx(\"p\", null, `The color picker will show three lines depending on what contrast ratios limits you have chosen: AA, AAA or APCA`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, `AA and AAA: lines are for 3:1, 4.5:1 and 7:1`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `APCA: lines are for Lc 45, Lc 60 and Lc 75`)), mdx(\"p\", null, `The line that is highlighted is the one you should meet for the settings you have picked in the color picker UI: AA, AAA or APCA contrast for small, large or non-text.`));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":3,"excerpt":"The color picker eye dropper lets you pick colors from anywhere on the screen, and it's available right from the address bar by\nclicking the…","frontmatter":{"title":"Color Picker","cover":null,"date":null,"beta":null},"fields":{"nextTitle":"Configuring Logitech mouses","nextSlug":"/docs/configuring-logitech-mouses/","prevTitle":"Command Bar","prevSlug":"/docs/command-bar/","slug":"/docs/color-picker/","date":null,"ogFileName":"color-picker"}},"allMdx":{"edges":[{"node":{"fields":{"slug":"/docs/1-password-setup-instructions/"},"frontmatter":{"title":"1Password setup instructions"}}},{"node":{"fields":{"slug":"/docs/accessibility-audit-workflow/"},"frontmatter":{"title":"Accessibility audit workflow"}}},{"node":{"fields":{"slug":"/docs/accessibility-overview/"},"frontmatter":{"title":"Accessibility overview"}}},{"node":{"fields":{"slug":"/docs/accessibility-panel/"},"frontmatter":{"title":"Accessibility panel"}}},{"node":{"fields":{"slug":"/docs/application-folder/"},"frontmatter":{"title":"Application folder"}}},{"node":{"fields":{"slug":"/docs/brand-guidelines/"},"frontmatter":{"title":"Brand guidelines"}}},{"node":{"fields":{"slug":"/docs/breakpoints/"},"frontmatter":{"title":"Breakpoints"}}},{"node":{"fields":{"slug":"/docs/browse/"},"frontmatter":{"title":"Browse"}}},{"node":{"fields":{"slug":"/docs/browser-extensions/"},"frontmatter":{"title":"Browser extensions"}}},{"node":{"fields":{"slug":"/docs/browser-features/"},"frontmatter":{"title":"Browser features"}}},{"node":{"fields":{"slug":"/docs/browsersync-and-polypane/"},"frontmatter":{"title":"Browsersync and Polypane"}}},{"node":{"fields":{"slug":"/docs/color-picker/"},"frontmatter":{"title":"Color Picker"}}},{"node":{"fields":{"slug":"/docs/command-bar/"},"frontmatter":{"title":"Command Bar"}}},{"node":{"fields":{"slug":"/docs/command-line-options/"},"frontmatter":{"title":"Command line options"}}},{"node":{"fields":{"slug":"/docs/configuring-logitech-mouses/"},"frontmatter":{"title":"Configuring Logitech mouses"}}},{"node":{"fields":{"slug":"/docs/configuring-webstorm-to-work-with-polypane/"},"frontmatter":{"title":"Configuring WebStorm to work with Polypane"}}},{"node":{"fields":{"slug":"/docs/console/"},"frontmatter":{"title":"Console"}}},{"node":{"fields":{"slug":"/docs/customizing-polypane/"},"frontmatter":{"title":"Customizing Polypane"}}},{"node":{"fields":{"slug":"/docs/dark-and-light-mode/"},"frontmatter":{"title":"Dark and light mode"}}},{"node":{"fields":{"slug":"/docs/data-processing-agreement/"},"frontmatter":{"title":"Data Processing Agreement"}}},{"node":{"fields":{"slug":"/docs/debug-tools/"},"frontmatter":{"title":"Debug tools"}}},{"node":{"fields":{"slug":"/docs/detecting-polypane/"},"frontmatter":{"title":"Detecting Polypane"}}},{"node":{"fields":{"slug":"/docs/developer-tools/"},"frontmatter":{"title":"Developer tools"}}},{"node":{"fields":{"slug":"/docs/device-presets/"},"frontmatter":{"title":"Device presets"}}},{"node":{"fields":{"slug":"/docs/devtools-panel/"},"frontmatter":{"title":"Devtools Panel"}}},{"node":{"fields":{"slug":"/docs/elements-panel/"},"frontmatter":{"title":"Elements Panel"}}},{"node":{"fields":{"slug":"/docs/emulation/"},"frontmatter":{"title":"Emulation"}}},{"node":{"fields":{"slug":"/docs/experimental-chromium-features/"},"frontmatter":{"title":"Experimental Chromium features"}}},{"node":{"fields":{"slug":"/docs/find-elements/"},"frontmatter":{"title":"Find elements"}}},{"node":{"fields":{"slug":"/docs/form-autofill/"},"frontmatter":{"title":"Form autofill"}}},{"node":{"fields":{"slug":"/docs/global-zoom/"},"frontmatter":{"title":"Global zoom"}}},{"node":{"fields":{"slug":"/docs/helper-extension-for-other-browsers/"},"frontmatter":{"title":"Helper extension for other browsers"}}},{"node":{"fields":{"slug":"/docs/horizontal-overflow/"},"frontmatter":{"title":"Horizontal overflow detection"}}},{"node":{"fields":{"slug":"/docs/integrations/"},"frontmatter":{"title":"Integrations"}}},{"node":{"fields":{"slug":"/docs/intro-to-panel/"},"frontmatter":{"title":"Intro to panel"}}},{"node":{"fields":{"slug":"/docs/intro-to-panes/"},"frontmatter":{"title":"Intro to panes"}}},{"node":{"fields":{"slug":"/docs/json-and-xml-viewer/"},"frontmatter":{"title":"JSON and XML viewer"}}},{"node":{"fields":{"slug":"/docs/known-issues/"},"frontmatter":{"title":"Known issues"}}},{"node":{"fields":{"slug":"/docs/layout-debugging/"},"frontmatter":{"title":"Layout debugging"}}},{"node":{"fields":{"slug":"/docs/layouts/"},"frontmatter":{"title":"Layouts"}}},{"node":{"fields":{"slug":"/docs/link/"},"frontmatter":{"title":"Share panel"}}},{"node":{"fields":{"slug":"/docs/list-of-shortcuts/"},"frontmatter":{"title":"List of shortcuts"}}},{"node":{"fields":{"slug":"/docs/live-auto-reloading/"},"frontmatter":{"title":"Live/auto reloading"}}},{"node":{"fields":{"slug":"/docs/making-screenshots/"},"frontmatter":{"title":"Making screenshots"}}},{"node":{"fields":{"slug":"/docs/measure-text-length/"},"frontmatter":{"title":"Measure text length"}}},{"node":{"fields":{"slug":"/docs/mental-model/"},"frontmatter":{"title":"Mental model of Polypane's browser contexts"}}},{"node":{"fields":{"slug":"/docs/message-bus/"},"frontmatter":{"title":"Message Bus"}}},{"node":{"fields":{"slug":"/docs/meta-information/"},"frontmatter":{"title":"Meta information"}}},{"node":{"fields":{"slug":"/docs/network-panel/"},"frontmatter":{"title":"Network panel"}}},{"node":{"fields":{"slug":"/docs/other-tools/"},"frontmatter":{"title":"Polypane and local servers"}}},{"node":{"fields":{"slug":"/docs/outline-panel/"},"frontmatter":{"title":"Outline Panel"}}},{"node":{"fields":{"slug":"/docs/pane-management/"},"frontmatter":{"title":"Manage panes"}}},{"node":{"fields":{"slug":"/docs/pane-sizes/"},"frontmatter":{"title":"Pane sizes"}}},{"node":{"fields":{"slug":"/docs/performance/"},"frontmatter":{"title":"Performance"}}},{"node":{"fields":{"slug":"/docs/pitching-polypane/"},"frontmatter":{"title":"Pitching Polypane"}}},{"node":{"fields":{"slug":"/docs/polypane-peek/"},"frontmatter":{"title":"Polypane Peek"}}},{"node":{"fields":{"slug":"/docs/portal/"},"frontmatter":{"title":"Polypane Portal"}}},{"node":{"fields":{"slug":"/docs/projects/"},"frontmatter":{"title":"Projects"}}},{"node":{"fields":{"slug":"/docs/recording/"},"frontmatter":{"title":"Recording"}}},{"node":{"fields":{"slug":"/docs/reference-image/"},"frontmatter":{"title":"Reference image"}}},{"node":{"fields":{"slug":"/docs/reload-css/"},"frontmatter":{"title":"Reload CSS"}}},{"node":{"fields":{"slug":"/docs/responsive-debugging-workflow/"},"frontmatter":{"title":"Responsive debugging workflow"}}},{"node":{"fields":{"slug":"/docs/review-and-approval-by-it-and-security/"},"frontmatter":{"title":"Review and approval by IT and Security"}}},{"node":{"fields":{"slug":"/docs/rulers-grids-and-guides/"},"frontmatter":{"title":"Rulers, grids and guides"}}},{"node":{"fields":{"slug":"/docs/sales-and-procurement/"},"frontmatter":{"title":"Sales and Procurement"}}},{"node":{"fields":{"slug":"/docs/security-policy/"},"frontmatter":{"title":"Security Policy"}}},{"node":{"fields":{"slug":"/docs/security/"},"frontmatter":{"title":"Security"}}},{"node":{"fields":{"slug":"/docs/session-management/"},"frontmatter":{"title":"Session management"}}},{"node":{"fields":{"slug":"/docs/setup/"},"frontmatter":{"title":"Setup"}}},{"node":{"fields":{"slug":"/docs/showing-multiple-urls/"},"frontmatter":{"title":"Showing multiple URLs"}}},{"node":{"fields":{"slug":"/docs/simulators/"},"frontmatter":{"title":"Simulators"}}},{"node":{"fields":{"slug":"/docs/snippets/"},"frontmatter":{"title":"Snippets"}}},{"node":{"fields":{"slug":"/docs/social-card-and-open-graph-workflow/"},"frontmatter":{"title":"Social card and Open Graph workflow"}}},{"node":{"fields":{"slug":"/docs/source-panel/"},"frontmatter":{"title":"Source panel"}}},{"node":{"fields":{"slug":"/docs/storage-panel/"},"frontmatter":{"title":"Storage panel"}}},{"node":{"fields":{"slug":"/docs/switching-to-polypane/"},"frontmatter":{"title":"Switching to Polypane"}}},{"node":{"fields":{"slug":"/docs/synced-interactions/"},"frontmatter":{"title":"Synced interactions"}}},{"node":{"fields":{"slug":"/docs/tab-customization/"},"frontmatter":{"title":"Tab customization"}}},{"node":{"fields":{"slug":"/docs/team-workflows/"},"frontmatter":{"title":"Team workflows"}}},{"node":{"fields":{"slug":"/docs/ui-overview/"},"frontmatter":{"title":"Polypane UI overview"}}},{"node":{"fields":{"slug":"/docs/web-vitals/"},"frontmatter":{"title":"Web Vitals"}}},{"node":{"fields":{"slug":"/docs/website-issues-you-could-encounter/"},"frontmatter":{"title":"Website issues you could encounter"}}},{"node":{"fields":{"slug":"/docs/workspace-management/"},"frontmatter":{"title":"Workspace management"}}},{"node":{"fields":{"slug":"/docs/workspaces/"},"frontmatter":{"title":"Workspaces"}}}]}},"pageContext":{"slug":"/docs/color-picker/"}},"staticQueryHashes":["4164364741","425175329"]}