When you select text in a webpage, the background gets a default blue color. What exact color code does this blue color have?
-
It probably depends on which browser you are using. But you may find some answers here: stackoverflow.com/questions/2000628/…– showdevApr 18, 2013 at 23:35
-
It might vary by OS as well. What are you trying to do?– j08691Apr 18, 2013 at 23:36
-
I think it depends on the OS, not the browser– Matías CánepaApr 18, 2013 at 23:36
-
Also you can change it with CSS 3– Matías CánepaApr 18, 2013 at 23:37
3 Answers
- Safari 6.0.3 Mac*:
#B4D5FE
- Chrome 26.0.1410.65 Mac*:
#ACCEF7
- Firefox 19.0 Mac*:
#B4D5FF
- Chrome 26.0.1410.64 m Windows 8+:
#3297FD
- Firefox 20.0.1 Windows 8+:
#3399FF
- Safari 5.1.7 Windows 8+:
#3298FD
- Internet Explorer 10.0.4 Windows 8+:
#3399FF
- Chrome 107.0.5304.88 Windows 11:
rgba(0, 116, 255, 0.8)
or#0074ffcc
*Found using ColorSnapper for Mac
+Found using ColorSchemer for Windows
And here's a screenshot of that information with the hex color codes highlighted in the same color:
This will be a never-ending list, however, since each...
- Browser
- Operating System
- Browser Version (maybe)
...will probably have a different color. Also, as of CSS3, you can change the color using:
::selection{
background-color:#000;
}
-
1I understand that I was vague, since every user potentially have different setups, but the Firefox color code was exactly what I was looking for. Thanks a lot. Apr 18, 2013 at 23:50
-
1@yormazar See my edit, the Firefox color code is different on Windows. Apr 19, 2013 at 0:03
-
Why don't I see it at trac.webkit.org/browser/trunk/Source/WebCore/css/html.css ? I'd love to know the actual value for the alpha channel Nov 5, 2015 at 14:40
-
On Chrome, background color is defined in
ui::NativeTheme::kColorId_LabelTextSelectionBackgroundFocused
orkColorId_TextfieldSelectionBackgroundFocused
. For example, system default color is used on macOS (GitHub link).– nonyleneJan 23, 2020 at 5:06 -
@charlie, why would you revert my changes? The question asked for the "exact" color, and the answer no longer reflects that. I added the exact color for Windows and a note that the other color values are approximate - as they are disregarding the transparency. Every operating system and browser combination uses a semi-transparent value. (Also MacOS/Safari). Would you please undo the edit?– Erling TNov 4, 2022 at 18:38
The ::selection CSS pseudo-element applies rules to the portion of a document that has been highlighted (e.g., selected with the mouse or another pointing device) by the user.
The default depends on the browser you are using. It's usually somewhere around #3297fd
.
You can change it like so:
/* draw any selected text yellow on red background */
::-moz-selection { color: gold; background: red; }
::selection { color: gold; background: red; }
/* draw selected text in a paragraph white on black */
p::-moz-selection { color: white; background: black; }
p::selection { color: white; background: black; }
The selection background colour? That doesn't really have anything to do with the browser, it's an OS setting (and is generally customizable). If you really want to know the specific blue on your machine, screen cap it and open it in any graphics program that lets you inspect colour.