E-commerce & Payments
WooCommerce Color Codes
WooCommerce's color is a purple, hex #7F54B3, on the Woo wordmark. The WooCommerce color codes in Hex, RGB and CMYK can be found below. The plugin launched in 2011 from WooThemes and turns a WordPress site into a shop; Automattic, which runs WordPress.com, bought WooThemes in 2015. Its rival among self-hosted store software is BigCommerce.
Primary colors
What are WooCommerce Primary Colors?
WooCommerce's primary colors are woo purple #7F54B3, white #FFFFFF.
WooCommerce publishes brand and logo guidelines; the CMYK shown is a conversion.
WooCommerce Woo Purple
| Hex | #7F54B3 |
|---|---|
| RGB | 127, 84, 179 |
| HSL | hsl(267, 38%, 52%) |
| CMYK | 29%, 53%, 0%, 30%converted · approximate |
| Pantone | PMS 814 Cnearest match · not published by the brand |
WooCommerce White
| Hex | #FFFFFF |
|---|---|
| RGB | 255, 255, 255 |
| HSL | hsl(0, 0%, 100%) |
| CMYK | 0%, 0%, 0%, 0%converted · approximate |
| Pantone | PMS 656 Cnearest match · not published by the brand |
WooCommerce Hex Color Codes
WooCommerce hex color codes are #7F54B3 for woo purple and #FFFFFF for white.
| Color | Hex |
|---|---|
| Woo Purple | #7F54B3 |
| White | #FFFFFF |
WooCommerce RGB Color Codes
WooCommerce RGB color codes are 127, 84, 179 for woo purple and 255, 255, 255 for white. Reach for RGB when a tool wants channel numbers or a CSS alpha value.
| Color | RGB |
|---|---|
| Woo Purple | rgb(127, 84, 179) |
| White | rgb(255, 255, 255) |
WooCommerce HSL Color Codes
WooCommerce HSL color codes are 267, 38%, 52% for woo purple and 0, 0%, 100% for white. Change the third value for a lighter or darker version without moving the hue.
| Color | HSL |
|---|---|
| Woo Purple | hsl(267, 38%, 52%) |
| White | hsl(0, 0%, 100%) |
WooCommerce CMYK Color Code
WooCommerce CMYK color codes are conversions from the hex, because the brand publishes none. Check a printed proof before a full run.
| Color | CMYK |
|---|---|
| Woo Purple | 29%, 53%, 0%, 30% |
| White | 0%, 0%, 0%, 0% |
WooCommerce Pantone Color Codes
WooCommerce Pantone color codes are nearest matches by color distance, not brand specs. The table shows the closest swatch for every color.
| Color | Nearest Pantone |
|---|---|
| Woo Purple | PMS 814 C |
| White | PMS 656 C |
Logo
WooCommerce Logo Colors
WooCommerce logo colors are purple and white, on the wordmark and its small mark.
WooCommerce Logo Colors Palette
What the WooCommerce Logo Colors Mean?
The WooCommerce logo colors tie it to WordPress. Purple has long been close to the WordPress and Automattic identity, and a 2022 refresh pushed WooCommerce's purple toward that family on purpose, to read as part of the same ecosystem rather than a bolt-on. The tone is friendlier than a corporate blue, which suits a tool aimed at small shops.
WooCommerce Logo Color History
WooCommerce logo color history keeps purple from the WooThemes original, with the exact shade shifting over the years and settling near the WordPress purple in the 2022 update.
WooCommerce Logo Fonts
WooCommerce logo fonts pair a custom wordmark with Cardo for some headings. The wordmark drawing is not licensed.
WooCommerce Logo JPG
WooCommerce logo in JPG. No transparency, so it is flattened onto white. Safe for documents and slide decks.
WooCommerce Logo PNG
WooCommerce logo in PNG, with a transparent background. Use it over a colored surface.
WooCommerce Logo WebP
WooCommerce logo in WebP. Same transparency as the PNG at about a third of the file size.
WooCommerce Color Code Shades
WooCommerce color code shades step evenly from the primary toward black, for hover states, borders and shadows.
These are interface steps, not WooCommerce paint or trim names.
In code
Using the WooCommerce palette
CSS custom properties
:root {
--woocommerce-woo-purple: #7F54B3;
--woocommerce-white: #FFFFFF;
}Contrast against white
| Woo Purple | 5.50:1AA ✓ |
|---|---|
| White | 1.00:1AA × |
Brand colors are chosen for recognition, not for legibility. A failing value here is normal. It means use it as a fill, not as text.