I often email responses inline to questions. In order to differentiate my response, I like to give them a colour. This is quite onerous in Gmail, with about 3 clicks to get a colour applied.
I would love a keyboard shortcut or a browser bar on click JavaScript hack to do this... so question is, how to figure this out.

  1. Javascript edit the HTML by adding the <font> tag around the selected words <font color="#ff9900">The words to be changed</font>

    Maybe using the .wrap() function - but difficult to work out the selector for some selected text This could be done with a browser extension. I use Chrome.

  2. Track the Gmail function that fires when the colour is selected in the Text Styling menu

    • How to track a function in JavaScript?
      Hmmm stuck too. Then set it off with a keyboard shortcut somehow?
  3. ??

I use Chrome and Brave browser - both same Chromium architecture. Some sort of browser extension is probably the best. But a Workspace Add-on might work too, just smaller user group maybe. Ideally avoid using tampermonkey as difficult to implement.

A possible answer here: Inspired by https://stackoverflow.com/questions/5393922/javascript-replace-selection-all-browsers by @tim-down

Getting close, but needs a tweak :

function wrapSelection(wrapSt, wrapEd, selectInserted) {
   var sel, range, fragment;

   if (typeof window.getSelection != "undefined") {
   // IE 9 and other non-IE browsers
   sel = window.getSelection();

   // Test that the Selection object contains at least one Range
   if (sel.getRangeAt && sel.rangeCount) {
     // Get the first Range (only Firefox supports more than one)
  range = window.getSelection().getRangeAt(0);

  // Create a DocumentFragment to wrap existing selection
  // Need to test for the existence of range.createContextualFragment
  // because it's non-standard and IE 9 does not support it
  if (range.createContextualFragment) {
    fragment = range.createContextualFragment(wrapSt + sel.anchorNode.textContent + wrapEd);
  } else {
    // In IE 9 we need to use innerHTML of a temporary element
    var div = document.createElement("div"),
    div.innerHTML = wrapSt + sel.anchorNode.textContent + wrapEd;
    fragment = document.createDocumentFragment();
    while ((child = div.firstChild)) {
  var firstInsertedNode = fragment.firstChild;
  var lastInsertedNode = fragment.lastChild;
  if (selectInserted) {
    if (firstInsertedNode) {
} else if (document.selection && document.selection.type != "Control") {
// IE 8 and below
range = document.selection.createRange();
range.pasteHTML(wrapSt + sel.anchorNode.textContent + wrapEd);



1 Answer 1


Gmail Built-In Features

Defaulf format style

By changing the default format style there is no need to use userscripts or Gmail add-ons. Ref. Formatting, fonts, and colors.

  1. Click on Settings (gear button) > See all settings
  2. In the General tab, go to Default text style section. Change the text format to be used by default when composing a new message.
  3. Click Save changes

The above option might work while you only need to reply to messages that have not used the same text style as one that you choose as your default style and when not having to reply to a message that already have include inline comments with your default text style as when having to several back and forth over the same original message. In such case it might still convenient to have a quick way to change the text style.

Built in Gmail keyboard shortcuts

To open the on screen keyboards shortcuts guide, while viweing the Inbox or another view, except when composing a message press ?.

Help article: Keyboard shortcuts for Gmail

Unfortunately the Formatting Text keyboard shortcuts doesn't include a shortcut to change the text color.

Note: The Advanced tab from Gmail Settings > Advanced has an option to enable Keyboard Shortcuts. Once enabling this option the Keyboard Shortcuts tab is added to the Gmail Settings but this only allows to change a predefined list of key mapping commands that, as March 2023, doesn't include changing the text style.


Gmail has a "hidden" feature (apparently it's not possible to find it searching from https://support.google.com/mail) called Templates. It allow to insert pre-written texts with a couple of clicks. It's not very different from the clicks required to change the text color, but might be worthy to learn about it as it might open other possibilities to optimize the overal composing process. This feature should be enabled in the same way that Keyboard Shortcuts, as explained above. For details see any of the following official help resorces for end-users:

Customized Layouts

If you are using a Workspace account, you might use customized layouts. See Create branded emails with customized layouts


Developers Tools

Keyboard Shortcuts

When using Chrome, someone might think to use the Chrome Developers Tools keyboard shortcuts to open the Elements.Style pane and change the color attribute, but this doesn't look to be a time saver when the focus is composing an email message.

Anyway, for me, the keyboard shortcut to open the elements pane is command+option+c. For other options see Keyboard shortcuts for opening DevTools.

Additional you might use the keyboard to handle the Styles pane. For details see Styles pane keyboard shortcuts

Bookmarklets / Userscripts

Nowadays bookmarklets are off-topic in Web Applications. We might say that userscripts also are off-topic as well than software recommendations. Below there are some Q&A from sister sites:

Stack Overflow

Add-ons and third-party software

Nowadays software recommendations are off-topic in Web Applications. Below there are some Q&A from sister sites:

Software Recommendations


Related Q&A from this site

  • Markup is great! That works for me! Something else to tweak :) Apr 3, 2023 at 11:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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