Google embed custom colors¶
When embeding Google services such as calendars, the color of various elements can be changed.
While some will have options for custom colors; others will offer presents only:
Color code¶
An example of a Google color code would be:
bgcolor=%23F4511E
%23 to be the percent-encoding (URL encoding) of #
F4511E is just hex code, the amount of RGB in hex R(F4) G(51) B(1E)
While in theory we could just change the hex code to display different colors, it only works for some elements.
Our iframe src is only a request, but Google servers can reject that request.
For calendars:
- bgcolor : user definable
- color : limited by Google (available colors below)
If you change the color to something rejected by Google, it'll serve you the default color, for calendar, it's Blueberry |
TLDR: prepend %23 to your hex color, if it's supported, it'll work, otherwise chose one from below.
Color List¶
| Name | C | Hex Code |
|---|---|---|
| Cocoa | #795548 | |
| Flamingo | #E67C73 | |
| Tomato | #D50000 | |
| Tangerine | #F4511E | |
| Pumpkin | #EF6C00 | |
| Mango | #F09300 | |
| Eucalyptus | #009688 | |
| Basil | #0B8043 | |
| Pistachio | #7CB342 | |
| Avocado | #C0CA33 | |
| Citron | #E4C441 | |
| Banana | #F6BF26 | |
| Sage | #33B679 | |
| Peacock | #039BE5 | |
| Cobalt | #4285F4 | |
| Blueberry | #3F51B5 | |
| Lavender | #7986CB | |
| Wisteria | #B39DDB | |
| Graphite | #616161 | |
| Birch | #A79B8E | |
| Radicchio | #AD1457 | |
| Cherry Blossom | #D81B60 | |
| Grape | #8E24AA | |
| Amethyst | #9E69AF |