Submit Hint Search The Forums LinksStatsPollsHeadlinesRSS
14,000 hints and counting!

Copy RGB or HEX color values from the Color Picker System
As one might know, Apple has included a system-wide application called Color Picker with OS X. You can call it in every application that supports it, like TextEdit or Mail.app. Color Picker allows you to modify colors, choosing colors from a color wheel, HSB sliders, etc. (More about the Color Picker.)

Problem: The Color Picker is a fantastic tool to select a color, but you can't copy the result for use in other programs. You can extend Color Picker with the free Hex Color Picker, but not everybody likes to receive a HEX code. What about copying the RGB values as text to insert them wherever you want?

Here's my solution: A little AppleScript calls Color Picker and parses the result. A dialog appears, asking you about the desired format for the copied values:
  • 8-bit RGB with values from 0 to 65535 (class:RGB color, red:8bitvalue, green:8bitvalue, blue:8bitvalue)
  • 16-bit RGB with values from 0 to 255 (class:RGB color, red:16bitvalue, green:16bitvalue, blue:16bitvalue)
  • HEX with leading #
Here's the code:
set the RGB16bit_list to (choose color default color {65535, 50584, 0})
display dialog "Which notation should be copied to the clipboard?" buttons {"8-bit RGB", "16-bit RGB", "HEX"} default button 3
if the button returned of the result is "HEX" then
	-- convert choosen color to HEX with leading #
	set the formatedColor to my RBG_to_HEX(RGB16bit_list)
else if the button returned of the result is "8-bit RGB" then
	-- convert choosen color to (class:RGB color, red:8bitvalue, green:8bitvalue, blue:8bitvalue)
	set the formatedColor to my RBG_to_RGB8bit(RGB16bit_list)
else
	-- convert choosen color to (class:RGB color, red:16bitvalue, green:16bitvalue, blue:16bitvalue)
	set the formatedColor to my RBG_to_RGB16bit(RGB16bit_list)
end if
set the clipboard to formatedColor

on RBG_to_HEX(RGB_values)
	-- this subroutine was taken from "http://www.apple.com/applescript/sbrt/sbrt-04.html"
	set the hex_list to {"0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"}
	set the the hex_value to ""
	repeat with i from 1 to the count of the RGB_values
		set this_value to (item i of the RGB_values) div 256
		if this_value is 256 then set this_value to 255
		set x to item ((this_value div 16) + 1) of the hex_list
		set y to item (((this_value / 16 mod 1) * 16) + 1) of the hex_list
		set the hex_value to (the hex_value & x & y) as string
	end repeat
	return ("#" & the hex_value)
end RBG_to_HEX

on RBG_to_RGB8bit({r, g, b})
	set r to (r ^ 0.5) div 1
	set g to (g ^ 0.5) div 1
	set b to (b ^ 0.5) div 1
	return "{class:8-bit RGB color, red:" & r & ", green:" & g & ", blue:" & b & "}" as string
end RBG_to_RGB8bit

on RBG_to_RGB16bit({r, g, b})
	return "{class:16-bit RGB color, red:" & r & ", green:" & g & ", blue:" & b & "}" as string
end RBG_to_RGB16bit
Installation and usage: Copy the code above to an empty Script Editor document, save it to your users script folder (~/Library » Scripts). Run the program from the Script menu, choose the color in the Color Picker, press OK at the bottom of the window, and select the preferred notation. Then paste it to wherever you want.

ATTENTION: If you are copying from the "color sliders" tab (second from left), than the selcted ColorSync profile will dramatically influence the values. I found no way to get the uncorrected color, nor did I find a solution to receive the name of the choosen colorsync profile.

[robg adds: This works as described.]
    •    
  • Currently 2.57 / 5
  • 1
  • 2
  • 3
  • 4
  • 5
  (7 votes cast)
 
[27,127 views]  

Copy RGB or HEX color values from the Color Picker | 8 comments | Create New Account
Click here to return to the 'Copy RGB or HEX color values from the Color Picker' hint
The following comments are owned by whoever posted them. This site is not responsible for what they say.
Copy RGB or HEX color values from the Color Picker
Authored by: NovaScotian on Mar 06, '08 08:16:33AM

I use this script to do it. It returns (in the clipboard) the BBCode, Decimal Number, or HTML code for the color chosen.

<code>set C10 to choose color default color {50000, 50000, 50000}
set Val16 to ""
repeat with C in C10
if contents of C = 0 then
set Val16 to Val16 & "00"
else
set Val16 to Val16 & |10->16|(C) -- as 8-bit colors
end if
end repeat

set B to button returned of (display dialog "The color values for the color chosen:" & return & return & Val16 default button 3 buttons {"BB to Clip", "Num to Clip", "HTML to Clip"})
if B = "BB to Clip" then
set the clipboard to "[color=#" & Val16 & "]"
else if B = "Num to Clip" then
set the clipboard to Val16
else
set the clipboard to "<font color=\"#" & Val16 & "\">"
end if

on |10->16|(n10)
set n10 to n10 div 256 -- to get 8-bit
if n10 is less than 0 then set n10 to -n10
set Ch16 to "0123456789ABCDEF"
set Txt16 to ""
set N to n10
set Dgt16 to 1
repeat
if N is 0 then exit repeat
set nx to N div Dgt16
set mx to nx mod 16
set Txt16 to (character (mx + 1) of Ch16) & Txt16
set N to N - (mx * Dgt16)
set Dgt16 to (Dgt16 * 16)
end repeat
if length of Txt16 = 1 then set Txt16 to "0" & Txt16
return Txt16
end |10->16|</code>



[ Reply to This | # ]
Copy RGB or HEX color values from the Color Picker
Authored by: mchagers on Mar 06, '08 08:21:34AM

If the color you want is visible somewhere on the screen, you can use the DigitalColor meter. It lives in /Applications/Utilities, and has built in commands to copy colors in any format. Choose the desired format from the color format popup, point to a pixel of the right color and hit shift-command-C. This copies the color as text so you can paste it anywhere.
If you have a picture of a color gradient open somewhere, you can use this method to pick colors from that.



[ Reply to This | # ]
Copy RGB or HEX color values from the Color Picker
Authored by: lloydalvarez on Mar 06, '08 09:10:27AM

Why don't you just store the color you want to use in another program in the swatch drawer that's built in to the color picker? Once it's in there, the color is available to every program that can access the color picker.



[ Reply to This | # ]
Color Picker seems sometimes wrong
Authored by: nicolasT on Mar 06, '08 12:03:44PM

This is fine, but i recently was very disapointed discovering that Apple color picker, (using its magnifying glass tool to pick a color on the sreen) is… wrong !! Using /Applications/Utilities/Digital Colormeter provides different (and exact) values on the same on-screen color !!
So please be careful if you are a designer or web designer…
I talked about that to Barebones BBedit developpers (BBedit includes this color picker) they told me they already know that and are waiting for Apple to fix it.
It seems that Color Picker changes the values following weird Colorsync profile values. If someone knows something about this i would like to know. And if you want to test (on different colors because all colors are not affected the same way - I had very strange values on oranges).



[ Reply to This | # ]
Color Picker seems sometimes wrong
Authored by: zo219 on Mar 08, '08 06:51:31PM

Thanks for this! I could not figure out why my pages colors looked weird - a real lifesaver hint!



[ Reply to This | # ]
This is built in, isn't it?
Authored by: S on Mar 08, '08 08:07:58AM

As someone else mentioned, what's wrong with just dragging the colour (at the top) to the palette (at the bottom)?



[ Reply to This | # ]
Color picker is built in, but not hex output
Authored by: fuper on Mar 11, '08 05:42:18PM
what's wrong with just dragging the colour (at the top) to the palette (at the bottom)?

Some people need to find the hex value for a particular color. For instance, when designing websites, I routinely use them in the style sheets, like so: background-color: #F637A8 (in this case, to specify a particular shade of hot pink).

Can't do that by dragging a color swatch.

(By the way, on the subject of web design and coding practices, the W3C has an excellent intro to cascading style sheets that's simple yet thorough (and which happens to include an RGB-to-hex converter!). And the CSS Zen Garden shows amazing examples of what CSS can do.

[ Reply to This | # ]

Copy RGB or HEX color values from the Color Picker
Authored by: zo219 on Mar 08, '08 07:08:08PM
In HexColorPicker 1.4, there is an option "Don't generate calibrated colors."

And the new, free ColorNamePicker (Tiger and up) shows RGB, among other things.

[ Reply to This | # ]