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

# Color

> Adds a Color picker panel in the Makeswift builder to visually edit a RGBA `string` prop.

<Frame type="glass" caption="Color panels on a Button component to edit the background and text colors">
  <img src="https://mintcdn.com/makeswift/uAOxEZuAmqfTEc_N/images/color-panel.png?fit=max&auto=format&n=uAOxEZuAmqfTEc_N&q=85&s=32be08c70c3a5c93f0966f0857e79c07" width="1024" height="640" data-path="images/color-panel.png" />
</Frame>

## Params

<ParamField query="label" type="string" default="Text">
  Text for the panel label in the Makeswift builder.
</ParamField>

<ParamField query="description" type="string">
  The description shown in the Panel of the Makeswift builder. This can be written in Markdown format.
  Added in [`v0.24.8`](https://github.com/makeswift/makeswift/releases/tag/%40makeswift%2Fruntime%400.24.8).
</ParamField>

<ParamField query="labelOrientation" type="&#x22;vertical&#x22; | &#x22;horizontal&#x22;" default="horizontal">
  Position for the color label within the panel.
</ParamField>

<ParamField query="defaultValue" type="string">
  The value passed to your component when nothing is set in the Makeswift
  builder. Must be a valid CSS color string.
</ParamField>

<ParamField query="hideAlpha" type="boolean" default={false}>
  Indicates whether to hide the alpha channel slider.

  <Accordion title="What is the alpha channel slider?">
    <Frame>
      <img src="https://mintcdn.com/makeswift/uAOxEZuAmqfTEc_N/images/color-panel-alpha.png?fit=max&auto=format&n=uAOxEZuAmqfTEc_N&q=85&s=5e1ba8e444b1bef02135e947d3849278" width="1024" height="640" data-path="images/color-panel-alpha.png" />
    </Frame>
  </Accordion>
</ParamField>

## Prop type

The Color control passes a `string` RGBA value to your component. If you don't set a `defaultValue` and no value is set in the builder, your component will receive `undefined`.

## Example

The following examples adds two Color controls to the `backgroundColor` and `color` props of a Button component.

### Using inline styles

<CodeGroup>
  ```tsx Button.makeswift.ts theme={null}
  import { Color } from "@makeswift/runtime/controls";

  import { runtime } from "@/makeswift/runtime";

  import { Button } from "./Button";

  runtime.registerComponent(Button, {
    type: "button",
    label: "Button",
    props: {
      backgroundColor: Color({
        label: "Background color",
        defaultValue: "black",
      }),
      color: Color({
        label: "Text color",
        defaultValue: "white",
      }),
    },
  });
  ```

  ```tsx Button.tsx theme={null}
  interface Props {
    backgroundColor?: string;
    color?: string;
  }

  export function Button({ backgroundColor, color }: Props) {
    return (
      <button className="px-4 py-2 rounded-md" style={{ backgroundColor, color }}>
        Click me
      </button>
    );
  }
  ```
</CodeGroup>

### Using CSS variables

<CodeGroup>
  ```tsx Button.makeswift.ts theme={null}
  import { Color } from "@makeswift/runtime/controls";
  import { runtime } from "@/lib/makeswift/runtime";

  import { Button } from "./Button";

  runtime.registerComponent(Button, {
    type: "button",
    label: "Button",
    props: {
      backgroundColor: Color({
        label: "Background color",
        defaultValue: "black",
      }),
      color: Color({
        label: "Text color",
        defaultValue: "white",
      }),
    },
  });
  ```

  ```tsx Button.tsx theme={null}
  import { CSSProperties } from "react";

  interface Props {
    backgroundColor?: string;
    color?: string;
  }

  export function Button({ backgroundColor, color }: Props) {
    return (
      <button
        className="px-4 py-2 rounded-md 
          bg-[var(--bg-color)] text-[var(--color)] 
          hover:bg-[--color] hover:text-[var(--bg-color)]"
        style={
          {
            "--bg-color": backgroundColor,
            "--color": color,
          } as CSSProperties
        }
      >
        Click me
      </button>
    );
  }
  ```
</CodeGroup>

<Info>
  `.makeswift.ts` is a naming convention for organizing Makeswift registration
  code. [Learn
  more](/developer/reference/runtime/register-component#organizing-registration-code).
</Info>