 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 shades, adjust the opacity and copy the value to the clipboard. Alternatively, you can pick a color from your page with the eyedropper. 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. Explain it. 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. Hold on a 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 batch. You can do that in DevTools. Open the command menu with Command Shift P or Ctrl 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 colors 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. Alright, for more details on authoring colors with Chrome DevTools, go to gu.gov slash DevTools dash colors. See you for the next DevTools tips. Bye.