How to use the color picker in Safari Web Inspector?
Jul 20, 2025 am 12:58 AMTo use the Web inspector color picker function in Safari browser, 1. First, turn on the "Show 'Development' menu in the menu bar" in the "Advanced" option of Safari preferences; 2. After opening the destination web page, start the Web inspector through "Development" → "Show JavaScript Console" or the shortcut key Option Command I; 3. Find the color value (such as color or background-color) in the CSS style and click the value to enter the editing state. The system will automatically pop up the color selector that comes with macOS; 4. Select the color through the color panel to view the effect in real time. Press and hold the Option key to skip the input box and directly evoke the color of the color. You can also use the straw tool to absorb the page color and copy it for later use.
Using the color collector function of the Web inspector in Safari browser is actually a bit simpler than it seems. Although Safari's developer tools are not as intuitive as Chrome, they are also very convenient to operate as long as they find the right location.

How to open the Safari Web Checker
First, make sure you have enabled Safari development options. In the desktop version of Safari:
- Open Safari and click "Safari" in the top menu bar → "Preferences"
- Switch to the Advanced tab
- Check "Show 'Development' menu in the menu bar"
Once done, the Development menu appears in the top menu bar. Then open the web page you want to debug, click "Development" → "Show JavaScript Console" or press Option Command I
to open the Web Inspector.

How to use Safari color picker?
Safari's Web Inspector does not have a separate color picker button, but it supports calling up color selectors through the color value editor. The operation method is as follows:
- Find a place where a CSS style contains color values in a CSS style (such as
color
,background-color
, etc.) - Click on that color value and you will find it becomes an editable state
- At this time, the system-level color selector will automatically pop up (the color selector that comes with macOS)
You can select any color in this color panel, and then confirm that the color will be applied to the page in real time.

Tip: If your current color value is abbreviated (such as #fff), you will also enter the editing state and the color board will pop up after clicking.
Actual usage scenarios and techniques
This feature is especially useful when debugging web styles, especially if you want to quickly adjust color schemes, test contrast or fine-tune your visual effects.
For example:
- You want to see if a button looks better if it is changed to dark blue.
- Change the background color directly in the inspector, click the color board to select a new color, and you will see the effect immediately
A few tips can help you use it more efficiently:
- Press and hold the Option key and click on the color value to directly skip the input box and directly evoke the color palette
- Use the straw tool in the "Color Picker" to absorb any color on the page (note: this requires macOS support)
- After modifying the color, you can record the color value by copying the color into hexadecimal" and other methods to use it.
Basically that's it. Although Safari's color collector is not as obvious as some browsers, it is not difficult to use as long as you know where to get in. The key is to click twice on the color value, and the color plate that comes with the system will naturally come out.
The above is the detailed content of How to use the color picker in Safari Web Inspector?. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Web browsing is an essential function of mobile devices, and browsers facilitate it effectively. These browsers also support the installation of content blockers and other tools to personalize your browsing experience. Apple's iOS platform uses Safari as its default browser. In rare cases, you may find that Safari browser is missing from your device. If you encounter this situation, the following steps will guide you on how to restore it. Can you reinstall Safari on iPhone? Safari is a built-in application on iOS devices and cannot be deleted or uninstalled due to its protected system status. If the app seems to be missing from your device, you may be dealing with an error, or the app may be hidden for various reasons.

Since this particular error message may be caused by a bug or some lower-level conflict, it may be sorted out in a future update of Safari or MacOS. Nonetheless, there are some tricks you can apply to fix the problem on your Mac for the time being, or at least fix it. 1: Disable “Hide IP Address” in Safari Many users reported that disabling the IP address hiding feature in Safari and then restarting their Mac solved their problem. Pull down the "Safari" menu and go to "Preferences" Go to the "Privacy" tab Uncheck the "Hide IP address from trackers" checkbox to temporarily disable the feature 2: Disable third-party firewalls, antivirus software, Little Snitch, L

Safari got an overhaul in iOS 15, and while there are many improvements and changes, some features aren't found where they were before. Read on to learn how to switch to iPhone private browsing in Safari with iOS15. As a refresher, here's how Apple describes Private Browsing Mode: After you close a tab in Private Browsing mode, Safari won't remember the pages you've visited, your search history, or Autofill information. Private Browsing in iOS 15 could be the “Who moved my cheese?” This is a big moment for many users because it’s more private than iOS 14 and earlier — unless you know the shortcut. Except for hiding

Apple allows iPhone users to browse anonymously using private tabs on Safari. When "Incognito Mode" is enabled, Safari does not save the addresses of websites you visit, your search history, or Autofill information. If you use private browsing mode frequently in Safari, you may have noticed that the mode operates differently than other browsers. This article will detail how to disable Private Browsing Mode on iPhone and what happens when Private Browsing Mode is enabled when Safari is closed. How to Disable Private Browsing Mode on Safari Required: iPhone running iOS 17 or later. If you have found out how to enable and use private browsing in Safari

If you don't have control over the zoom level in Safari, getting things done can be tricky. So if Safari looks zoomed out, that might be a problem for you. Here are a few ways you can fix this minor zoom issue in Safari. 1. Cursor magnification: Select "Display" > "Cursor magnification" in the Safari menu bar. This will make the cursor more visible on the screen, making it easier to control. 2. Move the mouse: This may sound simple, but sometimes just moving the mouse to another location on the screen may automatically return it to normal size. 3. Use Keyboard Shortcuts Fix 1 – Reset Zoom Level You can control the zoom level directly from the Safari browser. Step 1 – When you are in Safari

It's easy to change the search engine in Safari, Google Chrome, or other browsers on your iPhone or iPad. This tutorial will show you how to do it on four different web browsers available on iPhone and iPad. How to Change the Safari Search Engine on iPhone or iPad Safari is the default web browser on iOS and iPadOS, but you might not like the search engine. Fortunately, you can use these steps to change it: On your iPhone or iPad, launch Settings from the Home screen. Swipe down and tap Safari from the list. In the next menu,

How to Use the Control+F Equivalent in Safari on iPhone and iPad Ready to search for matching text on web pages in Safari? Here's all you need to do: If you haven't done so already, open Safari and visit the webpage on which you want to search for matching text Click on the arrow button that comes out of the box in the Safari toolbar Scroll down and click "Find on Page," which is the Control+F equivalent on iPhone and iPad Safari. Enter the text you want to find on the web page. If necessary, use the arrows to navigate to the next or previous instance of the matching text. When finished, tap Done "You go, that's Rong

Microsoft Outlook is downloading a mysterious file called "TokenFactoryIframe" on macOS when users access the email service through the Safari browser. This issue has now been widely reported by users who have discovered "TokenFactoryIframe" files that Outlook downloads on every visit. Outlook downloads this mysterious file every few seconds or at least every time you access Outlook on Apple platforms. Based on our findings, this appears to be an issue caused by an incorrect server-side update posted to Outlook and has nothing to do with Safari or macOS. Microsoft in a copy
