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

# Color

Color picker for Brand, Document, and custom colors.

## Running this example

To run this example locally:

1. If you haven't already, create a new app in the [Developer Portal](https://www.canva.com/developers/apps). For more information, refer to our [Quickstart guide](https://www.canva.dev/docs/apps/quickstart/).

2. In your app's configuration on the [Developer Portal](https://www.canva.com/developers/apps), ensure the "Development URL" is set to `http://localhost:8080`.

3. Clone the starter kit:

   ```shell
   git clone https://github.com/canva-sdks/canva-apps-sdk-starter-kit.git
   cd canva-apps-sdk-starter-kit
   ```

4. Install dependencies:

   ```shell
   npm install
   ```

5. Run the example:
   ```shell
   npm run start:example color
   ```

6. Click the **Preview URL** link shown in the terminal to open the example in the Canva editor.

## Example app source code

<Tabs>
  <Tab name="app.tsx">
    ```typescript
    // For usage information, see the README.md file.
    import { Rows, Swatch, Text } from "@canva/app-ui-kit";
    import type {
      Anchor,
      ColorSelectionEvent,
      ColorSelectionScope,
    } from "@canva/asset";
    import { openColorSelector } from "@canva/asset";
    import { useState } from "react";
    import * as styles from "styles/components.css";

    export const App = () => {
      const [color, setColor] = useState<string | undefined>(undefined);

      // Handle color selection events from the Canva color selector
      // The event provides different selection types (solid, gradient, etc.)
      const onColorSelect = async <T extends ColorSelectionScope>(
        e: ColorSelectionEvent<T>,
      ) => {
        if (e.selection.type === "solid") {
          setColor(e.selection.hexString);
        }
      };

      // Open Canva's built-in color selector modal
      // The boundingRect parameter positions the selector relative to the clicked element
      const onRequestOpenColorSelector = (boundingRect: Anchor) => {
        openColorSelector(boundingRect, {
          onColorSelect,
          scopes: ["solid"], // Restrict to solid colors only
        });
      };

      return (
        <div className={styles.scrollContainer}>
          <Rows spacing="2u">
            <Text>
              This example demonstrates how apps can pick brand, document, and
              custom colors in an app.
            </Text>
            {/* Canva's Swatch component displays the selected color and triggers color picker */}
            <Swatch
              fill={[color]}
              onClick={(e) =>
                onRequestOpenColorSelector(e.currentTarget.getBoundingClientRect())
              }
            />
          </Rows>
        </div>
      );
    };
    ```
  </Tab>

  <Tab name="index.tsx">
    ```typescript
    // For usage information, see the README.md file.
    import { createRoot } from "react-dom/client";
    import { App } from "./app";
    import "@canva/app-ui-kit/styles.css";
    import { AppUiProvider } from "@canva/app-ui-kit";
    import type { DesignEditorIntent } from "@canva/intents/design";
    import { prepareDesignEditor } from "@canva/intents/design";

    async function render() {
      const root = createRoot(document.getElementById("root") as Element);

      root.render(
        <AppUiProvider>
          <App />
        </AppUiProvider>,
      );
    }

    const designEditor: DesignEditorIntent = { render };
    prepareDesignEditor(designEditor);

    // Hot Module Replacement for development (automatically reloads the app when changes are made)
    if (module.hot) {
      module.hot.accept("./app", render);
    }
    ```
  </Tab>

  <Tab name="README.md">
    ```markdown
    # Color selection

    Demonstrates how to implement color selection using the color selector interface. Shows color picker integration, brand color access, and color swatch functionality for design consistency.

    For API reference docs and instructions on running this example, see: <https://www.canva.dev/docs/apps/examples/color/>.

    Related examples: See design_elements/text_elements for applying selected colors to elements, or other UI examples for design system integration.

    NOTE: This example differs from what is expected for public apps to pass a Canva review:

    - Color accessibility validation is not implemented. Production apps must ensure color combinations meet WCAG 2.0 AA contrast standards
    - Brand guideline integration is not demonstrated. Production apps should respect brand colors when available
    - Error handling is simplified for demonstration. Production apps must implement comprehensive error handling with clear user feedback and graceful failure modes
    - Internationalization is not implemented. Production apps must support multiple languages using the `@canva/app-i18n-kit` package to pass Canva review requirements
    - The code structure is simplified: Production apps using [intents](https://www.canva.dev/docs/apps/intents/) are recommended to call the prepareDesignEditor function from src/intents/design_editor/index.tsx
    ```
  </Tab>
</Tabs>

## API reference

* [App UI Kit](https://www.canva.dev/docs/apps/app-ui-kit/)
* [`openColorSelector`](https://www.canva.dev/docs/apps/api/latest/asset-open-color-selector/)
* [`prepareDesignEditor`](https://www.canva.dev/docs/apps/api/latest/intents-design-prepare-design-editor/)

## Need help?

* Join our [Community Forum](https://community.canva.dev/)
* Report issues with this example on [GitHub](https://github.com/canva-sdks/canva-apps-sdk-starter-kit/issues)