# Button color updates (/sdk/button-color-updates)

PayPal button color updates require no JavaScript SDK integration changes.



When PayPal updates its brand guidelines, the PayPal JavaScript SDK v5 and v6 automatically update the appearance of buttons rendered on your site. No code changes are required.

Current color

Current button

<th scope="col" aria-hidden="true" />

New button

New color

Gold

<img src="https://www.paypalobjects.com/ppdevdocs/current-gold.png" alt="Current gold PayPal button" width="220" style="{ border: &#x22;1px solid #e2e2e2&#x22;, borderRadius: &#x22;4px&#x22;, verticalAlign: &#x22;middle&#x22; }" />

→

<img src="https://www.paypalobjects.com/ppdevdocs/new-blue.svg" alt="New blue PayPal button" width="220" style="{ border: &#x22;1px solid #e2e2e2&#x22;, borderRadius: &#x22;4px&#x22;, verticalAlign: &#x22;middle&#x22; }" />

Blue

Blue

<img src="https://www.paypalobjects.com/ppdevdocs/current-blue.png" alt="Current blue PayPal button" width="220" style="{ border: &#x22;1px solid #e2e2e2&#x22;, borderRadius: &#x22;4px&#x22;, verticalAlign: &#x22;middle&#x22; }" />

→

<img src="https://www.paypalobjects.com/ppdevdocs/new-blue.svg" alt="New blue PayPal button" width="220" style="{ border: &#x22;1px solid #e2e2e2&#x22;, borderRadius: &#x22;4px&#x22;, verticalAlign: &#x22;middle&#x22; }" />

Blue

Silver

<img src="https://www.paypalobjects.com/ppdevdocs/current-silver.svg" alt="Current silver PayPal button" width="220" style="{ border: &#x22;1px solid #e2e2e2&#x22;, borderRadius: &#x22;4px&#x22;, verticalAlign: &#x22;middle&#x22; }" />

→

<img src="https://www.paypalobjects.com/ppdevdocs/new-white.svg" alt="New white PayPal button" width="220" style="{ border: &#x22;1px solid #e2e2e2&#x22;, borderRadius: &#x22;4px&#x22;, verticalAlign: &#x22;middle&#x22; }" />

White

White

<img src="https://www.paypalobjects.com/ppdevdocs/current-white.png" alt="Current white PayPal button" width="220" style="{ border: &#x22;1px solid #e2e2e2&#x22;, borderRadius: &#x22;4px&#x22;, verticalAlign: &#x22;middle&#x22; }" />

→

<img src="https://www.paypalobjects.com/ppdevdocs/new-white.svg" alt="New white PayPal button" width="220" style="{ border: &#x22;1px solid #e2e2e2&#x22;, borderRadius: &#x22;4px&#x22;, verticalAlign: &#x22;middle&#x22; }" />

White

Black

<img src="https://www.paypalobjects.com/ppdevdocs/current-black.png" alt="Current black PayPal button" width="220" style="{ border: &#x22;1px solid #e2e2e2&#x22;, borderRadius: &#x22;4px&#x22;, verticalAlign: &#x22;middle&#x22; }" />

→

<img src="https://www.paypalobjects.com/ppdevdocs/new-black.svg" alt="New black PayPal button" width="220" style="{ border: &#x22;1px solid #e2e2e2&#x22;, borderRadius: &#x22;4px&#x22;, verticalAlign: &#x22;middle&#x22; }" />

Black

## Set your button color [#set-your-button-color]

You can set the button color for accessibility or branding reasons. To choose a specific color, apply one of the [supported color classes](/sdk/js/reference#web-components) to your `<paypal-button>` element.

```html
<paypal-button type="checkout" class="paypal-blue"></paypal-button>
```

### Ensure accessibility [#ensure-accessibility]

To comply with [WCAG 2.1 AA standards](https://www.w3.org/TR/WCAG21/):

* On light backgrounds, use the blue or black button.
* On dark backgrounds, use the white button.