Brand colors

WordPress Brand Colors

WordPress palette: #21759B, #464646, #D54E21, #FFFFFF. Compare HEX/RGB, WCAG contrast and CSS tokens; open independent JSON data.

Commonly referenced brand color values. This page is an independent technical reference and is not affiliated with or endorsed by WordPress.

Technology Brand index API Dataset

Commonly referenced palette WordPress

#21759B#464646#D54E21#FFFFFF

Listed without an implied color hierarchy

Palette

Palette color 1#21759BRGB 33, 117, 155

Palette color 2#464646RGB 70, 70, 70

Palette color 3#D54E21RGB 213, 78, 33

White#FFFFFFRGB 255, 255, 255

CSS Tokens

:root {
  --brand-wordpress-1: #21759B;
  --brand-wordpress-2: #464646;
  --brand-wordpress-3: #D54E21;
  --brand-wordpress-4: #FFFFFF;
}

Accessibility Snapshot

#21759BBlack 4.08:1 / White 5.14:1

#464646Black 2.22:1 / White 9.44:1

#D54E21Black 4.94:1 / White 4.25:1

#FFFFFFBlack 21:1 / White 1:1

Brand palette context · Editorially reviewed

About WordPress Brand Colors

WordPress's visual identity belongs to an open-source publishing project rather than a conventional single-product campaign. WordPress began in 2003 as a fork of b2/cafelog, and its stated mission is to democratize publishing. That community history helps explain why the circular W mark must remain dependable across software screens, documentation, events, translations, and thousands of independently operated sites.

The blue, gray, orange, and white values here are useful historical and interface references, but WordPress now directs designers to its Design Library for the most current identity guidance. WordPress.org supplies approved logo files and explicitly asks users to avoid the common 'fauxgo.' Use current artwork rather than redrawing the W, preserve the distinction between the open-source project and a third-party service, and test every text pairing independently.

This community reference is not maintained by the WordPress Foundation, does not redistribute official artwork, and does not grant rights under the WordPress trademark policy.

Downloadable brand colors infographic

WordPress Brand Colors Infographic

Save an independent infographic of the commonly referenced WordPress HEX palette and its accessibility guidance. No logo or proprietary artwork is included.

1200 × 800

WordPress brand colors infographic. Commonly referenced brand color values. This page is an independent technical reference and is not affiliated with or endorsed by WordPress.

Download WebP Download SVG Open full size

Luminance0.1541

Black text4.08:1AA Fail

White text5.14:1AA Pass

hexCanonical HEX value

rgbRed, green, blue channels

hslHue, saturation, lightness

cmykApproximate print conversion

wcagAA and AAA contrast options

harmoniesMathematical harmony sets

variantsGenerated tone variants

nearestColorsKnowledge graph neighbors

Structured sections

Brand

{
  "slug": "wordpress",
  "name": "WordPress",
  "category": "technology",
  "brandCategory": [
    "Technology",
    "technology"
  ],
  "url": "https://www.colorsencyclopedia.com/brand-colors/wordpress/",
  "categoryUrl": "https://www.colorsencyclopedia.com/brand-colors/technology/",
  "disclaimer": "Commonly referenced brand color values. This page is an independent technical reference and is not affiliated with or endorsed by WordPress."
}

Palette

[
  {
    "name": "Palette color 1",
    "hex": "#21759B",
    "rgb": [
      33,
      117,
      155
    ],
    "hsl": [
      199,
      65,
      37
    ],
    "cmyk": [
      79,
      25,
      0,
      39
    ],
    "luminance": 0.1541,
    "contrast": {
      "black": 4.08,
      "white": 5.14
    },
    "wcag": {
      "AA": [
        "#FFFFFF",
        "#F5F5F5"
      ],
      "AAA": []
    }
  },
  {
    "name": "Palette color 2",
    "hex": "#464646",
    "rgb": [
      70,
      70,
      70
    ],
    "hsl": [
      0,
      0,
      27
    ],
    "cmyk": [
      0,
      0,
      0,
      73
    ],
    "luminance": 0.0612,
    "contrast": {
      "black": 2.22,
      "white": 9.44
    },
    "wcag": {
      "AA": [
        "#FFFFFF",
        "#F5F5F5"
      ],
      "AAA": [
        "#FFFFFF",
        "#F5F5F5"
      ]
    }
  },
  {
    "name": "Palette color 3",
    "hex": "#D54E21",
    "rgb": [
      213,
      78,
      33
    ],
    "hsl": [
      15,
      73,
      48
    ],
    "cmyk": [
      0,
      63,
      85,
      16
    ],
    "luminance": 0.197,
    "contrast": {
      "black": 4.94,
      "white": 4.25
    },
    "wcag": {
      "AA": [
        "#000000"
      ],
      "AAA": []
    }
  },
  {
    "name": "White",
    "hex": "#FFFFFF",
    "rgb": [
      255,
      255,
      255
    ],
    "hsl": [
      0,
      0,
      100
    ],
    "cmyk": [
      0,
      0,
      0,
      0
    ],
    "luminance": 1,
    "contrast": {
      "black": 21,
      "white": 1
    },
    "wcag": {
      "AA": [
        "#000000",
        "#1A1A1A",
        "#36454F"
      ],
      "AAA": [
        "#000000",
        "#1A1A1A",
        "#36454F"
      ]
    }
  }
]

AI context

{
  "brandUseCases": [
    "SaaS UI",
    "developer tools",
    "product branding",
    "brand reference",
    "design systems",
    "CSS tokens",
    "accessibility checks"
  ],
  "semanticGroups": [
    "technology brand colors",
    "blue brand palette",
    "gray brand palette",
    "orange brand palette",
    "cool brand palette",
    "neutral brand palette",
    "warm brand palette",
    "jewel tone brand color",
    "muted brand color",
    "vibrant brand color",
    "light brand color",
    "WordPress color reference"
  ],
  "contrastSafeWith": [
    "#FFFFFF",
    "#F5F5F5",
    "#000000",
    "#1A1A1A",
    "#36454F"
  ],
  "relatedEndpoints": [
    "https://www.colorsencyclopedia.com/api/brand-colors/wordpress.json",
    "https://www.colorsencyclopedia.com/api/brand-colors.json"
  ]
}

CSS tokens

{
  "css": "--brand-wordpress-1: #21759B;\n--brand-wordpress-2: #464646;\n--brand-wordpress-3: #D54E21;\n--brand-wordpress-4: #FFFFFF;"
}

Accessibility

[
  {
    "hex": "#21759B",
    "contrast": {
      "black": 4.08,
      "white": 5.14
    },
    "wcag": {
      "AA": [
        "#FFFFFF",
        "#F5F5F5"
      ],
      "AAA": []
    }
  },
  {
    "hex": "#464646",
    "contrast": {
      "black": 2.22,
      "white": 9.44
    },
    "wcag": {
      "AA": [
        "#FFFFFF",
        "#F5F5F5"
      ],
      "AAA": [
        "#FFFFFF",
        "#F5F5F5"
      ]
    }
  },
  {
    "hex": "#D54E21",
    "contrast": {
      "black": 4.94,
      "white": 4.25
    },
    "wcag": {
      "AA": [
        "#000000"
      ],
      "AAA": []
    }
  },
  {
    "hex": "#FFFFFF",
    "contrast": {
      "black": 21,
      "white": 1
    },
    "wcag": {
      "AA": [
        "#000000",
        "#1A1A1A",
        "#36454F"
      ],
      "AAA": [
        "#000000",
        "#1A1A1A",
        "#36454F"
      ]
    }
  }
]

Full JSON dataset

{
  "slug": "wordpress",
  "name": "WordPress",
  "category": "technology",
  "brandCategory": [
    "Technology",
    "technology"
  ],
  "disclaimer": "Commonly referenced brand color values. This page is an independent technical reference and is not affiliated with or endorsed by WordPress.",
  "datasetVersion": "1.0.0",
  "url": "https://www.colorsencyclopedia.com/brand-colors/wordpress/",
  "categoryUrl": "https://www.colorsencyclopedia.com/brand-colors/technology/",
  "apiUrl": "https://www.colorsencyclopedia.com/api/brand-colors/wordpress.json",
  "colors": [
    {
      "name": "Palette color 1",
      "hex": "#21759B",
      "rgb": [
        33,
        117,
        155
      ],
      "hsl": [
        199,
        65,
        37
      ],
      "cmyk": [
        79,
        25,
        0,
        39
      ],
      "luminance": 0.1541,
      "contrast": {
        "black": 4.08,
        "white": 5.14
      },
      "wcag": {
        "AA": [
          "#FFFFFF",
          "#F5F5F5"
        ],
        "AAA": []
      }
    },
    {
      "name": "Palette color 2",
      "hex": "#464646",
      "rgb": [
        70,
        70,
        70
      ],
      "hsl": [
        0,
        0,
        27
      ],
      "cmyk": [
        0,
        0,
        0,
        73
      ],
      "luminance": 0.0612,
      "contrast": {
        "black": 2.22,
        "white": 9.44
      },
      "wcag": {
        "AA": [
          "#FFFFFF",
          "#F5F5F5"
        ],
        "AAA": [
          "#FFFFFF",
          "#F5F5F5"
        ]
      }
    },
    {
      "name": "Palette color 3",
      "hex": "#D54E21",
      "rgb": [
        213,
        78,
        33
      ],
      "hsl": [
        15,
        73,
        48
      ],
      "cmyk": [
        0,
        63,
        85,
        16
      ],
      "luminance": 0.197,
      "contrast": {
        "black": 4.94,
        "white": 4.25
      },
      "wcag": {
        "AA": [
          "#000000"
        ],
        "AAA": []
      }
    },
    {
      "name": "White",
      "hex": "#FFFFFF",
      "rgb": [
        255,
        255,
        255
      ],
      "hsl": [
        0,
        0,
        100
      ],
      "cmyk": [
        0,
        0,
        0,
        0
      ],
      "luminance": 1,
      "contrast": {
        "black": 21,
        "white": 1
      },
      "wcag": {
        "AA": [
          "#000000",
          "#1A1A1A",
          "#36454F"
        ],
        "AAA": [
          "#000000",
          "#1A1A1A",
          "#36454F"
        ]
      }
    }
  ],
  "brandUseCases": [
    "SaaS UI",
    "developer tools",
    "product branding",
    "brand reference",
    "design systems",
    "CSS tokens",
    "accessibility checks"
  ],
  "semanticGroups": [
    "technology brand colors",
    "blue brand palette",
    "gray brand palette",
    "orange brand palette",
    "cool brand palette",
    "neutral brand palette",
    "warm brand palette",
    "jewel tone brand color",
    "muted brand color",
    "vibrant brand color",
    "light brand color",
    "WordPress color reference"
  ],
  "contrastSafeWith": [
    "#FFFFFF",
    "#F5F5F5",
    "#000000",
    "#1A1A1A",
    "#36454F"
  ],
  "relatedEndpoints": [
    "https://www.colorsencyclopedia.com/api/brand-colors/wordpress.json",
    "https://www.colorsencyclopedia.com/api/brand-colors.json"
  ]
}

WordPress Brand Colors

Palette

CSS Tokens

Accessibility Snapshot

About WordPress Brand Colors

WordPress Brand Colors Infographic

Machine-Readable Brand Color Data (JSON)

Related Brand Color Guides