> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cdp.coinbase.com/llms.txt
> Use this file to discover all available pages before exploring further.

# colorsBase

```ts theme={null}
const colorsBase: {
  blue500: "#0052ff";
  blue550: "#014cec";
  black: "#0a0b0d";
  white: "#ffffff";
  gray50: "#f9fafb";
  gray100: "#eef0f3";
  gray200: "#dcdfe4";
  gray500: "#9397a0";
  gray700: "#5b616e";
  gray900: "#1a1d21";
  red500: "#cf202f";
  green500: "#098551";
  amber500: "#ed702f";
};
```

All colors used in the CDP web component library default theme.

## Type declaration

| Name                           | Type        | Default value |
| ------------------------------ | ----------- | ------------- |
| <a id="blue500" /> `blue500`   | `"#0052ff"` | `"#0052ff"`   |
| <a id="blue550" /> `blue550`   | `"#014cec"` | `"#014cec"`   |
| <a id="black" /> `black`       | `"#0a0b0d"` | `"#0a0b0d"`   |
| <a id="white" /> `white`       | `"#ffffff"` | `"#ffffff"`   |
| <a id="gray50" /> `gray50`     | `"#f9fafb"` | `"#f9fafb"`   |
| <a id="gray100" /> `gray100`   | `"#eef0f3"` | `"#eef0f3"`   |
| <a id="gray200" /> `gray200`   | `"#dcdfe4"` | `"#dcdfe4"`   |
| <a id="gray500" /> `gray500`   | `"#9397a0"` | `"#9397a0"`   |
| <a id="gray700" /> `gray700`   | `"#5b616e"` | `"#5b616e"`   |
| <a id="gray900" /> `gray900`   | `"#1a1d21"` | `"#1a1d21"`   |
| <a id="red500" /> `red500`     | `"#cf202f"` | `"#cf202f"`   |
| <a id="green500" /> `green500` | `"#098551"` | `"#098551"`   |
| <a id="amber500" /> `amber500` | `"#ed702f"` | `"#ed702f"`   |