What is the browser-default background color when selecting text?

Question

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: http://stackoverflow.com/questions/2000628/in-browser-default-selected-text-color-what-is-it — showdev, Apr 18 '13 at 23:35

Charlie · Accepted Answer · 2022-11-02T23:29:40.427

104

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;
}

edited Nov 02 '22 at 23:29

answered Apr 18 '13 at 23:43

Charlie

11,380
19
83
138

1

I 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. – Fellow Stranger Apr 18 '13 at 23:50
1

@yormazar See my edit, the Firefox color code is different on Windows. – Mathijs Flietstra Apr 19 '13 at 00:03
Why don't I see it at http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css ? I'd love to know the actual value for the alpha channel – Tom Roggero Nov 05 '15 at 14:40
On Chrome, background color is defined in `ui::NativeTheme::kColorId_LabelTextSelectionBackgroundFocused` or `kColorId_TextfieldSelectionBackgroundFocused`. For example, system default color is used on macOS ([GitHub link](https://github.com/chromium/chromium/blob/51fc3ec43b0a278fa0c984ccf05f07ca580bdc38/ui/native_theme/native_theme_mac.mm#L231)). – nonylene Jan 23 '20 at 05: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 T Nov 04 '22 at 18:38

score -3 · Answer 2 · answered Apr 18 '13 at 23:39

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; }

score -5 · Answer 3 · answered Apr 18 '13 at 23:38

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.

What is the browser-default background color when selecting text?

3 Answers3

Linked