This is an awesome tip that I just stumbled over – hex values in safari element inspector :)
I was trying to view the colour of an element in my site (the background colour of the body tag)
in the element inspector all the colours were showing as rgb values.
To show hex values in the Safari element inspector, you’ll need to modify how the browser displays CSS color properties.
- Enable Web Inspector: First, ensure that Safari’s Web Inspector is enabled by going to Safari > Preferences > Advanced and checking the box next to Show Develop menu in menu bar.
- Inspect an Element: Right-click on any element on a webpage and choose Inspect Element. This will open the Web Inspector.
- View Color Values: In the Styles pane within the inspector, Safari might display colors in different formats, such as RGBA or HSLA, by default.
- Toggle Between Color Formats: To see hex values, click on the color swatch (the small box next to the color property). Clicking repeatedly will toggle between different formats (hex, RGB, HSL). Stop when you reach the hex format.
This simple method allows you to easily switch between color representations in the Safari Web Inspector without additional extensions or configurations.
