# Colors
Anywhere you can pass a color in a component prop, you can pass either:
* A standard [Color](#color)
* A [Dynamic](#color.dynamic) Color
* A [Raw](#color.raw) Color
## API Reference
### Color
The standard colors. Use those colors for consistency.
The colors automatically adapt to the Raycast theme (light or dark).
#### Example
```typescript
import { Color, Icon, List } from "@raycast/api";
export default function Command() {
return (
);
}
```
#### Enumeration members
| Name | Dark Theme | Light Theme |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Blue |  |  |
| Green |  |  |
| Magenta |  |  |
| Orange |  |  |
| Purple |  |  |
| Red |  |  |
| Yellow |  |  |
| PrimaryText |  |  |
| SecondaryText |  |  |
## Types
### Color.ColorLike
```typescript
ColorLike: Color | Color.Dynamic | Color.Raw;
```
Union type for the supported color types.
When using a [Raw Color](#color.raw), it will be adjusted to achieve high contrast with the Raycast user interface. To disable color adjustment, you need to switch to using a [Dynamic Color](#color.dynamic). However, we recommend leaving color adjustment on, unless your extension depends on exact color reproduction.
#### Example
```typescript
import { Color, Icon, List } from "@raycast/api";
export default function Command() {
return (
);
}
```
### Color.Dynamic
A dynamic color applies different colors depending on the active Raycast theme.
When using a [Dynamic Color](#color.dynamic), it will be adjusted to achieve high contrast with the Raycast user interface. To disable color adjustment, you can set the `adjustContrast` property to `false`. However, we recommend leaving color adjustment on, unless your extension depends on exact color reproduction.
#### Example
```typescript
import { Icon, List } from "@raycast/api";
export default function Command() {
return (
);
}
```
#### Properties
| Property | Description | Type |
| --------------------------------------- | ------------------------------------------------------------------- | --------- |
| dark\* | The color which is used in dark theme. | `string` |
| light\* | The color which is used in light theme. | `string` |
| adjustContrast | Enables dynamic contrast adjustment for light and dark theme color. | `boolean` |
### Color.Raw
A color can also be a simple string. You can use any of the following color formats:
* HEX, e.g `#FF0000`
* Short HEX, e.g. `#F00`
* RGBA, e.g. `rgb(255, 0, 0)`
* RGBA Percentage, e.g. `rgb(255, 0, 0, 1.0)`
* HSL, e.g. `hsla(200, 20%, 33%, 0.2)`
* Keywords, e.g. `red`