> ## 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"` |