getCssValue (Color) in Hex format in Selenium WebDriver

Question

In the following code I need to print the color in Hex format.

First Print statement is showing value in RGB format which is rgb(102,102,102).

The Second statement is showing value in Hex which is #666666

But I am manually entering the value into the second print statement which is 102,102,102.

Is there any way to pass the value which I got from the 1st statement (Color) into the second print statement and get result?

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;

public class Google {

    public static void main(String[] args) throws Exception {

        WebDriver driver = new FirefoxDriver();
        driver.get("http://www.google.com/");
        String Color = driver.findElement(By.xpath("//div[@class='gb_e gb_f gb_g gb_xb']/a")).getCssValue("color");
        System.out.println(Color);
        String hex = String.format("#%02x%02x%02x", 102,102,102);
        System.out.println(hex);
    }
}

Goof

Answer 1

Way 1: Using StringTokenizer:

String color = driver.findElement(By.xpath("//div[@class='gb_e gb_f gb_g gb_xb']/a")).getCssValue("color");
String s1 = color.substring(4);
color = s1.replace(')', ' ');
StringTokenizer st = new StringTokenizer(color);
int r = Integer.parseInt(st.nextToken(",").trim());
int g = Integer.parseInt(st.nextToken(",").trim());
int b = Integer.parseInt(st.nextToken(",").trim());
Color c = new Color(r, g, b);
String hex = "#"+Integer.toHexString(c.getRGB()).substring(2);
System.out.println(hex);

Way 2:

String color = driver.findElement(By.xpath("//div[@class='gb_e gb_f gb_g gb_xb']/a")).getCssValue("color");
String[] numbers = color.replace("rgb(", "").replace(")", "").split(",");
int r = Integer.parseInt(numbers[0].trim());
int g = Integer.parseInt(numbers[1].trim());
int b = Integer.parseInt(numbers[2].trim());
System.out.println("r: " + r + "g: " + g + "b: " + b);
String hex = "#" + Integer.toHexString(r) + Integer.toHexString(g) + Integer.toHexString(b);
System.out.println(hex);

Accustomed

In "Way 2" you are only using numbers[0], when I believe you should actually be using numbers[0], numbers[1] and numbers[2] – Unrest

Thanks Victor Moraes to highlight the mistake. Yes, it should be numbers[0], numbers[1] and numbers[2]. I have corrected accordingly. – Accustomed

"Way 2": The hex values should most likely be padded with leading 0's. I am here because a driver.getElement().getCssValue("background-color") returns and rgba value: rgba(198, 15, 19, 1). DevTools gives a hex value: #c60f13, the above code returns #c6f13. suggest String hex = String.format("#%02x%02x%02x", r,g,b); – Azoth

Answer 2

I know this is rather old, but you can get a simpler solution by using org.openqa.selenium.support.Color:

import org.openqa.selenium.support.Color;
String color = driver.findElement(By.xpath("//div[@class='gb_e gb_f gb_g gb_xb']/a")).getCssValue("color");
System.out.println(color);
String hex = Color.fromString(color).asHex();
System.out.println(hex);

It gives you a single line solution and even adds leading zeroes when required (something that the previous answers aren't accounting for)

Unrest

Answer 3

First a quote from Selenium's documentation.

Get the value of a given CSS property. Color values should be returned as rgba strings, so, for example if the "background-color" property is set as "green" in the HTML source, the returned value will be "rgba(0, 255, 0, 1)". Note that shorthand CSS properties (e.g. background, font, border, border-top, margin, margin-top, padding, padding-top, list-style, outline, pause, cue) are not returned, in accordance with the DOM CSS2 specification - you should directly access the longhand properties (e.g. background-color) to access the desired values.

Then this is not a Selenium specific question, this is just a general programming question about how to parse string rgba(102,102,102) to three number.

// Originally untested code, just the logic.
// Thanks for Ripon Al Wasim's correction.

String color = driver.findElement(By.xpath("//div[@class='gb_e gb_f gb_g gb_xb']/a")).getCssValue("color");

String[] numbers = color.replace("rgba(", "").replace(")", "").split(",");
int r = Integer.parseInt(numbers[0].trim());
int g = Integer.parseInt(numbers[1].trim());
int b = Integer.parseInt(numbers[2].trim());
System.out.println("r: " + r + "g: " + g + "b: " + b);

String hex = "#" + Integer.toHexString(r) + Integer.toHexString(g) + Integer.toHexString(b);
System.out.println(hex);

Swatch

user1177636: Your previous code was Integer.toHexString(<String>), but parameter should be integer as Integer.toHexString(<int>) – Accustomed

Answer 4

The code works, but just a little typo. The Color.fromString would be upper case C

import org.openqa.selenium.support.Color;

String color = driver.findElement(By.xpath("xpath_value")).getCssValue("color");
System.out.println(color);
String hex = Color.fromString(color).asHex();
System.out.println(hex);

Volturno

I don't think a single letter typo in my answer would be a reason to add another answer to this. Just edit it, as you did. Plus, when you say "The code works, but just a little typo" it is not clear which code you're talking about. I know you're referring to mine because I received the notification, but for newcomers it might not be that clear. If you insist in providing a separate answer, I'd advise adding a link to mine, for clarity. By the way, now that you edit my answer, yours is just a duplicate of mine with nothing to add (and it's even obsolete, since mine doesn't have typos anymore) – Unrest

thanks bro, i couldn't edit or comment because i am under 15 – Volturno

Answer 5

import org.openqa.selenium.support.Color;

String color = driver.findElement(By.xpath("xpath_value")).getCssValue("color");
System.out.println(color);
String hex = Color.fromString(color).asHex();
System.out.println(hex);

just a simple and sweet code will help you to get a answer

Broderickbrodeur

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Missymist