4

I want to learn the RGB (or others like hex, CMYK or HSL) details of a color on a website. Say the background of this very website. I want to recreate that color using the code or a graphics software.

  • 5
    Do you specifically need CMYK? Because it's used for print, but for web RGB is all you need. – Yisela May 7 '14 at 3:58
  • If you are using a MAC, there is always the digital color meter that is native to OSX and found under the Utilities folder in Applications. – ckpepper02 May 7 '14 at 13:52

10 Answers 10

9

As per thebodzio's answer, there's plenty of ways to get that colour. No matter what browser you use there will be some sort of colour picker add-on you can get. Alternatively you could take a screen shot and open it in photoshop. Another way is to open developer tools and look at the sites stylesheet, in chrome you could right click the background and hit inspect element then look for where the background colour is being specified...

To save you the trouble though, the background colour on that website is #f9f9f9 - now, if you're not too experienced with CSS, you might want to head over to the site, inspect the background colour and see if you can find where I got that from :)

5

As to the page elements (excluding images), their colour (in RGB, sometimes in HSL) can be determined in a lot of different ways. One of the easiest is using any “developer tools” available in almost every contemporary web browser (Firefox, Chrome etc.). Colours in images can be sampled with any image editor having a tool like “colour picker”.

Having said that… It's not enough just to “get the RGB colour” and convert it to, say, CMYK. The tricky thing is to know which RGB and which CMYK you want to convert to and how do you want to deal with the outside-of-the-target-gamut colours. Yes, there's more than one RGB or CMYK. It's often silently assumed that when nothing is said about colour beside it being RGB, then it's really sRGB colour.

Anyway, I strongly recommend you to take a look at some introductory material about colour management. http://www.cambridgeincolour.com/color-management-printing.htm is one of the best around.

4

There are two ways to get the colors from any website webpage etc....

1) Using Browser Color Picker Add-ons e.g ColorZilla

2) Take screenshot of your webpage by using Print Screen button on your keyboard and paste that image in Photoshop or any other image editing software and pick color from there with color picker tool

You can also use browser add-on like Fireshot to take screenshot of whole webpage and take colors from anywhere on that page

  • ColorZilla is brilliant. Thanks for the suggestion! – Revlis Lain Oct 29 '16 at 13:03
2

If you are using Chrome you can simply hit F12 and show the page elements. On the right are the page styles which use the Hexadecimal codes for colours. These in turn translate into RGB colours.

For example if I scroll down a short way on the styles tab I can see that the background colour for the page is #f4f4f4. The equivalent RGB colour is: R: 244 G: 244 B: 244

It also show the pattern image and tells me it's a repeat etc etc.

1
  1. There are some colour picker add-on for all Browsers
  2. There are some websites that will find the colours of your website http://www.checkmycolours.com/

    http://html-color-codes.info

  3. Take a screenshot and open in Photoshop or Gimp you can pick the colours
1

I always use Colorzilla for this type of thing. It's a neat extension that lets you select colors directly from any page and gives you the color in different formats.

Also, just as a bonus, there is Web Colour Data which gives you the color palette used on a given website.

1

In addition to Chrome extensions/Firefox add-ons, ColorCop is a lightweight Windows desktop application that does the same thing. It can generate RGB and hex values of the colors you'd like to get using a sampling tool.

1

There is a new 'Eyedropper' tool included with Firefox that lets you point at a pixel, view the colour hex value, and copy it to the clipboard.

0

There are various ways to achieve so, like taking a screenshot using Print Screen button and pasting that into MS Paint (I am considering MS Paint as that's the default software anyone will have if working on a Windows machine), and use Color Picker

enter image description here

Once you do that, click on the color you want to get the rgb value.. and then click on Edit Colors option..

enter image description here

And you will get a modal with the information of the colors

enter image description here


Other way to achieve this is way easier than the above option, is to use a Color Picker plugin, I use Colorzilla for Firefox

Here, you will get a simple color picker on the AddOn bar, you need to click on that and you will get a Cross Hair cursor, click on the color you want to get the information for and you will get the below...

enter image description here

0

The little tool that I like to figure out colors is called Pixie, from Nattyware.com. It's free, tiny, very simple. Used it for years. Runs as a service; just click on a color and a window pops up and tells you hex, RGB, HTML, CMYK and HSV, plus mouse coordinates. Windows only.

protected by Cai May 25 '17 at 11:39

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.