Authoring colors with DevTools | DevTools Tips

Authoring colors with DevTools | DevTools Tips

Channel:
Chrome for Developers
Subscribers:
791,000
Published on ● Video Link: https://www.youtube.com/watch?v=TuR27BxCRVk


Duration: 3:02
9,353 views
380

Let’s take a look at some of the color features in DevTools.

Chapters:
0:00 - Introduction
0:13 - Shortcut to change selected color format
0:34 - Edit and copy a color to clipboard
0:47 - Pick a color with eye dropper
0:53 - CSS angle visualization tools
1:04 - Use CSS variables as color palette
1:47 - Change all displayed color format
2:27 - Get an overview of all your page’s colors

Links:
Authoring colors with DevTools → https://goo.gle/devtools-colors
CSS Overview → https://goo.gle/css-overview

Questions? Tweet to us:
Jecelyn Yeen → https://twitter.com/jecfish
Chrome DevTools → https://twitter.com/chromedevtools

Catch more DevTools Tips → https://goo.gle/DevToolsTips
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs

#DevToolsTips #Chrome #Developer



Other Videos By Chrome for Developers


2022-01-27Chrome 98 - What’s New in DevTools
2022-01-19Thinking on ways to solve a DARK/LIGHT THEME SWITCH
2022-01-13Discover and fix low contrast text with DevTools | DevTools Tips
2022-01-12Workbox TypeScript - Unpacking the Workbox
2022-01-04New in Chrome 97: Web Transport, Script type Detection, and more!
2022-01-04Cross-fading DOM elements | HTTP 203
2022-01-03Chrome 97 - What’s New in DevTools
2021-12-30Record and replay user flow with the Recorder panel | DevTools Tips
2021-12-27Generating your color palette in CSS | HTTP 203
2021-12-21Responsive images & art direction - Designing in the Browser
2021-12-16Authoring colors with DevTools | DevTools Tips
2021-12-15Choosing the right caching strategy - Unpacking the Workbox
2021-12-14The Zombie DOM - old DOM stuff that still haunts us today | HTTP 203
2021-12-14Dark mode - Designing in the Browser
2021-12-10Adapting caching to your needs - Unpacking the Workbox
2021-12-08Thinking on ways to solve TOASTS
2021-12-07Macro & micro layouts - Designing in the Browser
2021-12-03Offline fallback page - Unpacking the Workbox
2021-12-03Container queries - Designing in the Browser
2021-12-02Faster DevTools navigation with shortcuts and settings | DevTools Tips
2021-12-01The fundamentals of CSS layout | Workshop


Tags:
purpose: Educate
pr_pr: Chrome
type: DevByte (deck cleanup 0-10min)
GDS: Yes
Devtools tips
color devtools
shortcuts
settings
css
css overview
Chrome Devtools
intro to devtools tips
what are devtools tips
how to use devtools tips
devtools tips tutorial
devtools
chrome
developer
developers
google developer
google developers
google chrome developers
chrome developer
chrome developers
google chrome
Jecelyn Yeen