> ## 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.
# colorsSemantic
```ts theme={null}
const colorsSemantic: {
bg: {
default: {
value: "#ffffff";
};
alternate: {
value: "#eef0f3";
};
contrast: {
value: "{colors.fg.default}";
};
overlay: {
value: "{colors.bg.alternate}";
modify: {
type: "color-alpha";
value: 0.33;
};
};
skeleton: {
value: "{colors.fg.default}";
modify: {
type: "color-alpha";
value: 0.1;
};
};
primary: {
value: "#0052ff";
};
secondary: {
value: "#eef0f3";
};
primaryWash: {
value: "{colors.fg.primary}";
modify: {
type: "color-mix";
value: readonly [readonly ["{colors.bg.default}", "92%"]];
};
};
positiveWash: {
value: "{colors.fg.positive}";
modify: {
type: "color-mix";
value: readonly [readonly ["{colors.bg.default}", "92%"]];
};
};
negativeWash: {
value: "{colors.fg.negative}";
modify: {
type: "color-mix";
value: readonly [readonly ["{colors.bg.default}", "92%"]];
};
};
warningWash: {
value: "{colors.fg.warning}";
modify: {
type: "color-mix";
value: readonly [readonly ["{colors.bg.default}", "92%"]];
};
};
};
fg: {
default: {
value: "#0a0b0d";
};
muted: {
value: "#5b616e";
};
primary: {
value: "#0052ff";
};
onPrimary: {
value: "#ffffff";
};
onSecondary: {
value: "#0a0b0d";
};
positive: {
value: "#098551";
};
negative: {
value: "#cf202f";
};
warning: {
value: "#ed702f";
};
onPrimaryWash: {
value: "{colors.fg.onPrimary}";
};
onPositiveWash: {
value: "{colors.fg.default}";
};
onNegativeWash: {
value: "{colors.fg.default}";
};
onWarningWash: {
value: "{colors.fg.default}";
};
};
line: {
default: {
value: "#dcdfe4";
};
heavy: {
value: "#9397a0";
};
primary: {
value: "{colors.fg.primary}";
};
positive: {
value: "{colors.fg.positive}";
};
negative: {
value: "{colors.fg.negative}";
};
};
};
```
These are the default values for the semantic color tokens.
Semantic colors are the base colors for the theme.
They are typically not used directly in the components, but are used to define the base colors
for the components.
## Type declaration
| Name | Type | Default value |
| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------- |
| `bg` | \{ `default`: \{ `value`: `"#ffffff"`; }; `alternate`: \{ `value`: `"#eef0f3"`; }; `contrast`: \{ `value`: `"{colors.fg.default}"`; }; `overlay`: \{ `value`: `"{colors.bg.alternate}"`; `modify`: \{ `type`: `"color-alpha"`; `value`: `0.33`; }; }; `skeleton`: \{ `value`: `"{colors.fg.default}"`; `modify`: \{ `type`: `"color-alpha"`; `value`: `0.1`; }; }; `primary`: \{ `value`: `"#0052ff"`; }; `secondary`: \{ `value`: `"#eef0f3"`; }; `primaryWash`: \{ `value`: `"{colors.fg.primary}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.default}"`, `"92%"`]]; }; }; `positiveWash`: \{ `value`: `"{colors.fg.positive}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.default}"`, `"92%"`]]; }; }; `negativeWash`: \{ `value`: `"{colors.fg.negative}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.default}"`, `"92%"`]]; }; }; `warningWash`: \{ `value`: `"{colors.fg.warning}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.default}"`, `"92%"`]]; }; }; } | - |
| `bg.default` | \{ `value`: `"#ffffff"`; } | - |
| `bg.default.value` | `"#ffffff"` | `colorsBase.white` |
| `bg.alternate` | \{ `value`: `"#eef0f3"`; } | - |
| `bg.alternate.value` | `"#eef0f3"` | `colorsBase.gray100` |
| `bg.contrast` | \{ `value`: `"{colors.fg.default}"`; } | - |
| `bg.contrast.value` | `"{colors.fg.default}"` | `"{colors.fg.default}"` |
| `bg.overlay` | \{ `value`: `"{colors.bg.alternate}"`; `modify`: \{ `type`: `"color-alpha"`; `value`: `0.33`; }; } | - |
| `bg.overlay.value` | `"{colors.bg.alternate}"` | `"{colors.bg.alternate}"` |
| `bg.overlay.modify` | \{ `type`: `"color-alpha"`; `value`: `0.33`; } | - |
| `bg.overlay.modify.type` | `"color-alpha"` | `"color-alpha"` |
| `bg.overlay.modify.value` | `0.33` | `0.33` |
| `bg.skeleton` | \{ `value`: `"{colors.fg.default}"`; `modify`: \{ `type`: `"color-alpha"`; `value`: `0.1`; }; } | - |
| `bg.skeleton.value` | `"{colors.fg.default}"` | `"{colors.fg.default}"` |
| `bg.skeleton.modify` | \{ `type`: `"color-alpha"`; `value`: `0.1`; } | - |
| `bg.skeleton.modify.type` | `"color-alpha"` | `"color-alpha"` |
| `bg.skeleton.modify.value` | `0.1` | `0.1` |
| `bg.primary` | \{ `value`: `"#0052ff"`; } | - |
| `bg.primary.value` | `"#0052ff"` | `colorsBase.blue500` |
| `bg.secondary` | \{ `value`: `"#eef0f3"`; } | - |
| `bg.secondary.value` | `"#eef0f3"` | `colorsBase.gray100` |
| `bg.primaryWash` | \{ `value`: `"{colors.fg.primary}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.default}"`, `"92%"`]]; }; } | - |
| `bg.primaryWash.value` | `"{colors.fg.primary}"` | `"{colors.fg.primary}"` |
| `bg.primaryWash.modify` | \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.default}"`, `"92%"`]]; } | - |
| `bg.primaryWash.modify.type` | `"color-mix"` | `"color-mix"` |
| `bg.primaryWash.modify.value` | readonly \[readonly \[`"{colors.bg.default}"`, `"92%"`]] | - |
| `bg.positiveWash` | \{ `value`: `"{colors.fg.positive}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.default}"`, `"92%"`]]; }; } | - |
| `bg.positiveWash.value` | `"{colors.fg.positive}"` | `"{colors.fg.positive}"` |
| `bg.positiveWash.modify` | \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.default}"`, `"92%"`]]; } | - |
| `bg.positiveWash.modify.type` | `"color-mix"` | `"color-mix"` |
| `bg.positiveWash.modify.value` | readonly \[readonly \[`"{colors.bg.default}"`, `"92%"`]] | - |
| `bg.negativeWash` | \{ `value`: `"{colors.fg.negative}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.default}"`, `"92%"`]]; }; } | - |
| `bg.negativeWash.value` | `"{colors.fg.negative}"` | `"{colors.fg.negative}"` |
| `bg.negativeWash.modify` | \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.default}"`, `"92%"`]]; } | - |
| `bg.negativeWash.modify.type` | `"color-mix"` | `"color-mix"` |
| `bg.negativeWash.modify.value` | readonly \[readonly \[`"{colors.bg.default}"`, `"92%"`]] | - |
| `bg.warningWash` | \{ `value`: `"{colors.fg.warning}"`; `modify`: \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.default}"`, `"92%"`]]; }; } | - |
| `bg.warningWash.value` | `"{colors.fg.warning}"` | `"{colors.fg.warning}"` |
| `bg.warningWash.modify` | \{ `type`: `"color-mix"`; `value`: readonly \[readonly \[`"{colors.bg.default}"`, `"92%"`]]; } | - |
| `bg.warningWash.modify.type` | `"color-mix"` | `"color-mix"` |
| `bg.warningWash.modify.value` | readonly \[readonly \[`"{colors.bg.default}"`, `"92%"`]] | - |
| `fg` | \{ `default`: \{ `value`: `"#0a0b0d"`; }; `muted`: \{ `value`: `"#5b616e"`; }; `primary`: \{ `value`: `"#0052ff"`; }; `onPrimary`: \{ `value`: `"#ffffff"`; }; `onSecondary`: \{ `value`: `"#0a0b0d"`; }; `positive`: \{ `value`: `"#098551"`; }; `negative`: \{ `value`: `"#cf202f"`; }; `warning`: \{ `value`: `"#ed702f"`; }; `onPrimaryWash`: \{ `value`: `"{colors.fg.onPrimary}"`; }; `onPositiveWash`: \{ `value`: `"{colors.fg.default}"`; }; `onNegativeWash`: \{ `value`: `"{colors.fg.default}"`; }; `onWarningWash`: \{ `value`: `"{colors.fg.default}"`; }; } | - |
| `fg.default` | \{ `value`: `"#0a0b0d"`; } | - |
| `fg.default.value` | `"#0a0b0d"` | `colorsBase.black` |
| `fg.muted` | \{ `value`: `"#5b616e"`; } | - |
| `fg.muted.value` | `"#5b616e"` | `colorsBase.gray700` |
| `fg.primary` | \{ `value`: `"#0052ff"`; } | - |
| `fg.primary.value` | `"#0052ff"` | `colorsBase.blue500` |
| `fg.onPrimary` | \{ `value`: `"#ffffff"`; } | - |
| `fg.onPrimary.value` | `"#ffffff"` | `colorsBase.white` |
| `fg.onSecondary` | \{ `value`: `"#0a0b0d"`; } | - |
| `fg.onSecondary.value` | `"#0a0b0d"` | `colorsBase.black` |
| `fg.positive` | \{ `value`: `"#098551"`; } | - |
| `fg.positive.value` | `"#098551"` | `colorsBase.green500` |
| `fg.negative` | \{ `value`: `"#cf202f"`; } | - |
| `fg.negative.value` | `"#cf202f"` | `colorsBase.red500` |
| `fg.warning` | \{ `value`: `"#ed702f"`; } | - |
| `fg.warning.value` | `"#ed702f"` | `colorsBase.amber500` |
| `fg.onPrimaryWash` | \{ `value`: `"{colors.fg.onPrimary}"`; } | - |
| `fg.onPrimaryWash.value` | `"{colors.fg.onPrimary}"` | `"{colors.fg.onPrimary}"` |
| `fg.onPositiveWash` | \{ `value`: `"{colors.fg.default}"`; } | - |
| `fg.onPositiveWash.value` | `"{colors.fg.default}"` | `"{colors.fg.default}"` |
| `fg.onNegativeWash` | \{ `value`: `"{colors.fg.default}"`; } | - |
| `fg.onNegativeWash.value` | `"{colors.fg.default}"` | `"{colors.fg.default}"` |
| `fg.onWarningWash` | \{ `value`: `"{colors.fg.default}"`; } | - |
| `fg.onWarningWash.value` | `"{colors.fg.default}"` | `"{colors.fg.default}"` |
| `line` | \{ `default`: \{ `value`: `"#dcdfe4"`; }; `heavy`: \{ `value`: `"#9397a0"`; }; `primary`: \{ `value`: `"{colors.fg.primary}"`; }; `positive`: \{ `value`: `"{colors.fg.positive}"`; }; `negative`: \{ `value`: `"{colors.fg.negative}"`; }; } | - |
| `line.default` | \{ `value`: `"#dcdfe4"`; } | - |
| `line.default.value` | `"#dcdfe4"` | `colorsBase.gray200` |
| `line.heavy` | \{ `value`: `"#9397a0"`; } | - |
| `line.heavy.value` | `"#9397a0"` | `colorsBase.gray500` |
| `line.primary` | \{ `value`: `"{colors.fg.primary}"`; } | - |
| `line.primary.value` | `"{colors.fg.primary}"` | `"{colors.fg.primary}"` |
| `line.positive` | \{ `value`: `"{colors.fg.positive}"`; } | - |
| `line.positive.value` | `"{colors.fg.positive}"` | `"{colors.fg.positive}"` |
| `line.negative` | \{ `value`: `"{colors.fg.negative}"`; } | - |
| `line.negative.value` | `"{colors.fg.negative}"` | `"{colors.fg.negative}"` |
## See
[colorsComponents](/sdks/cdp-sdks-v2/frontend/@coinbase/cdp-react/Variables/colorsComponents) for the component colors that inherit from these