Quickest way to find hex color in Safari?

[badlydrawnboy]

I frequently find myself wanting to be able to sample a color on a web page, in Safari, and find out what hex value it is. Is there a little application or extension that would allow me to do this?

 

[telecomm]

Applications>Utilities>DigitalColor Meter

 

[badlydrawnboy]

That gives me RGB values, but not a 6-digit web-safe Hex value, which is what I'm looking for.

 

[telecomm]

That gives me RGB values, but not a 6-digit web-safe Hex value, which is what I'm looking for.

The grey band in the advertisement in the bottom right corner of this image is F0EEE8...

 

[badlydrawnboy]

The grey band in the advertisement in the bottom right corner of this image is F0EEE8...

Ah, I see. Thanks a lot! This will save me a lot of time.

 

[telecomm]

No problem. Enjoy! (I was pretty pleased when I found this little app too.)

 

[HomeBru Studios]

I use Safari's developer menu, so I just right click on the page component I want to investigate, select "Inspect Element" from the context menu, then look in the developer panel's "Computed Style" for the color/background-color. You can also choose to view color values as Hex, RGB or HSL.

 

[Padaung]

This thread has just helped me too, thank you!!!

 

[9968256]

The grey band in the advertisement in the bottom right corner of this image is F0EEE8...

Where? I don't see any such option.

 

[campyguy]

Where? I don't see any such option.

The option was there, pretty much in plain sight, some 7 OS X versions ago or so in 2010 at the previous post...

If you're using a more-recent OS X version, the current app version's display options are in the View Menu, under "Display Options" and selected in the pulldown menu. It'll be maybe in a different location in 6-8 years or so...

 

[9968256]

The option was there, pretty much in plain sight, some 7 OS X versions ago or so in 2010 at the previous post...

If you're using a more-recent OS X version, the current app version's display options are in the View Menu, under "Display Options" and selected in the pulldown menu. It'll be maybe in a different location in 6-8 years or so...

I don't understand what menus you are referring to..

 

[kohlson]

In 10.11.5, in the View menu at the top of the screen, select Display Values - As Hex

 

[DeltaMac]

I don't understand what menus you are referring to..

I can understand your confusion. The menus are in the Digital Color Meter app, from the Utilities folder.
And, still the same in 10.12

 

[dwig]

That gives me RGB values, but not a 6-digit web-safe Hex value, which is what I'm looking for.

Hex colors are not the same thing as the antique "web safe color" concept. Web safe colors are those that display reliably in 256 color indexed color images. Hex color notation (representing the color value in an 8bpp image using hexadecimal, base-16, numbers) can represent some 16 million colors just as the decimal RGB notation can.

I use Safari's developer menu, so I just right click on the page component I want to investigate, select "Inspect Element" from the context menu, then look in the developer panel's "Computed Style" for the color/background-color. You can also choose to view color values as Hex, RGB or HSL.

+1 - I do it this way, though usually in the equivalent mode in Firefox.

 

[9968256]

I can understand your confusion. The menus are in the Digital Color Meter app, from the Utilities folder.
And, still the same in 10.12

It seemingly displays hex value split pint three lines with some letters preceding each piece of the code. Is there a way to have in one place?
[doublepost=1468276431][/doublepost]here

 

[DeltaMac]

?
Not sure what you are asking.
The three values are in one place, displayed together in a neat list.

 

[sjtidy]

It seemingly displays hex value split pint three lines with some letters preceding each piece of the code. Is there a way to have in one place?
[doublepost=1468276431][/doublepost]here

Just ignore the 0x. Your value there is 3d5a9e.

 

[telecomm]

It seemingly displays hex value split pint three lines with some letters preceding each piece of the code. Is there a way to have in one place?

If you need to copy the hex value to use somewhere else, use the keyboard shortcut Shift+Command+C to copy the color value as text (then Command+V to paste it wherever you want—see the Color menu). It'll strip out the bits you don't need and add a leading hash tag.

 

[kennyeliason]

If you need to copy the hex value to use somewhere else, use the keyboard shortcut Shift+Command+C to copy the color value as text (then Command+V to paste it wherever you want—see the Color menu). It'll strip out the bits you don't need and add a leading hash tag.

This right here is the golden ticket for the Digital Color Picker. Otherwise unusable without knowing this keyboard shortcut. Thank you! 6+ years later! ha