Authoring colors with DevTools - DevTools Tips

[MUSIC PLAYING] JECELYN YEEN: As a web developer, we always experiment with different colors during development. Let's take a look at some of the color features in DevTools. In the Styles pane, there is a color preview next to any colors. If you want to change the color format to RGB or HSL, hold the Shift key, and click on the preview. You can also open the color picker and change the color format there, but I find the Shift click very handy. Now let's take a look at the color picker here. You can change the hue, pick a color from the sheets, adjust the opacity, and copy the value to the clipboard. Alternatively, you can pick a color from your page with the eye dropper. I use that all the time. Even better, if your color is a gradient, you can click on the Clock icon, drag and change the color while previewing the color. Cool, right? By the way, the color picker works for custom variables too. Say you have defined a list of CSS variables. In the color picker, the color palette shows a list of page colors by default. Explained here, you can change the color palette to Material, Custom, or the CSS Variables. Click on the CSS Variables, the color palette now changed to display all the colors we defined in the CSS Variables. Hover on the color in the palette to see the variable name. Select a color, and the value is updated with the CSS variable instead of color code. Nice, right? There are times you might want to convert all the colors into a certain format and copy the values in which you can do that in DevTools. Open the Command menu with Command+Shift+P or Control+Shift+P. Type, set color. There are a few options here. Let's set the color format to HSL. See, all the colors are now updated to HSL. You can select and copy them in one go. Once you have done that, you can change the color back to the default by running the Command+Shift+P again and select Set color format as authored this time. If you want an overview of all your pages' colors, the CSS Overview panel is designed for that. Watch my previous tip on the CSS Overview panel to learn more. All right. For more details on altering colors with Chrome DevTools, go to goo.gle/devtools-colors. See you for the next DevTools Tips. Bye. [MUSIC PLAYING]

Channel: Google Chrome Developers

Views: 1,712

Keywords: 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

Id: TuR27BxCRVk

Length: 3min 1sec (181 seconds)

Published: Thu Dec 16 2021