How to get a color of a web element using Selenium WebDriver with python?

Question

How do I locate the background-color of a webelement in hexadecimal format? With my current selenium webdriver python code it is returning the background-color in RGB format.

This is the html element that I am looking at

div class="bar" style="background-color: #DD514C; background-image: -moz-linear-gradient(center top , #EE5F5B, #C43C35); background-image: -webkit-linear-gradient(top , #EE5F5B, #C43C35); background-image: -ms-linear-gradient(top , #EE5F5B, #C43C35); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#EE5F5B, endColorstr=#C43C35, GradientType=0); background-repeat: repeat-x; color: #ffffff; width: 11.5%"

My webdriver python code is:

find_element_by_class_name("bar").get_attribute("style")

It is returning the style with the colors in rgb format. I want to specifically get the background-color in hexadecimal format so that I can compare it with my expected value. I am getting the following output now:

background-color: rgb(221, 81, 76); background-image: -moz-linear-gradient(center top , rgb(238, 95, 91), rgb(196, 60, 53)); background-repeat: repeat-x; color: rgb(255, 255, 255); width: 11.5%;

I found a lot of solutions using getCssValue for Java? What is the python equivalent of getCssValue? — nids
– nids, Commented Feb 27, 2013 at 5:44
The python equivalent is element.value_of_css_property('background-color'). But it doesn't return hexadecimal (the Java doesn't either: code.google.com/p/selenium/source/browse/java/client/src/org/…). unutbu's answer will give you hexadecimal. — Isaac
– Isaac, Commented Feb 27, 2013 at 16:54
Can anyone help me by telling how can i change this{RGB} value using python — Faraaz Kurawle
– Faraaz Kurawle, Commented Jul 19, 2021 at 19:32

Carlos · Accepted Answer · 2013-02-27 16:53:00Z

19

You're looking for value_of_css_property('background-color'):

rgb = find_element_by_class_name("bar").value_of_css_property('background-color')

However, this will return the string rgb(221, 81, 76). In order to get the hex value of it, you can use @unutbu's answer:

import re
...
rgb = find_element_by_class_name("bar").value_of_css_property('background-color')

r,g,b = map(int, re.search(
             r'rgb\((\d+),\s*(\d+),\s*(\d+)', rgb).groups())
color = '#%02x%02x%02x' % (r, g, b)

And your hex color is the string #dd514c.

answered Feb 27, 2013 at 16:53

Carlos

2,23212 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nam G VU Over a year ago

Simpler color conversion is shared here stackoverflow.com/a/49827874/248616

Kundan Kumar · Accepted Answer · 2018-04-14 04:18:12Z

9

To convert color, you can directly use selenium's Color class:

from selenium.webdriver.support.color import Color

rgb = find_element_by_class_name("bar").value_of_css_property('background-color')
hex = Color.from_string(rgb).hex

Selenium docs

answered Apr 14, 2018 at 4:18

Kundan Kumar

911 silver badge3 bronze badges

Comments

unutbu · Accepted Answer · 2013-02-27 02:22:56Z

2

import re

# style = find_element_by_class_name("bar").get_attribute("style")

style = 'background-color: rgb(221, 81, 76); background-image: -moz-linear-gradient(center top , rgb(238, 95, 91), rgb(196, 60, 53)); background-repeat: repeat-x; color: rgb(255, 255, 255); width: 11.5%;'

r,g,b = map(int, re.search(
    r'background-color: rgb\((\d+),\s*(\d+),\s*(\d+)\)', style).groups())
print('{:X}{:X}{:X}'.format(r, g, b))

yields

DD514C

answered Feb 27, 2013 at 2:22

unutbu

886k197 gold badges1.9k silver badges1.7k bronze badges

Comments

PythonTester · Accepted Answer · 2015-03-04 14:25:37Z

2

As the format of the return matches a tuple this is achievable without using 're' where the return is an 'rgba' string:

import ast

rgba = element.value_of_css_property("background-color")
r, g, b, alpha = ast.literal_eval(rgba.strip("rgba"))
hex_value = '#%02x%02x%02x' % (r, g, b)
return hex_value, alpha

Where the string is 'rgb' simply omit the "alpha"

import ast

rgb = element.value_of_css_property("background-color")
r, g, b = ast.literal_eval(rgb.strip("rgb"))
hex_value = '#%02x%02x%02x' % (r, g, b)
return hex_value

Since the Original question was raised the preferred method is now to use selenium color support module:

A simple guide is here

edited Mar 4, 2015 at 14:25

answered Mar 4, 2015 at 13:54

PythonTester

8597 silver badges13 bronze badges

Comments

General Grievance · Accepted Answer · 2024-12-30 17:19:22Z

-1

# Locate the element by ID
element = driver.find_element_by_id("element_id")

# Get the background attribute
background_color = element.get_attribute("background")

# Print the background color
print(f"Background color: {background_color}")

edited Dec 30, 2024 at 17:19

General Grievance

5,12039 gold badges39 silver badges60 bronze badges

answered Dec 30, 2024 at 12:51

noobie_coder

252 silver badges8 bronze badges

Collectives™ on Stack Overflow

How to get a color of a web element using Selenium WebDriver with python?

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related