# Exporting

> A palette as code, tokens or a swatch file.

Source: https://dabbit.app/docs/exporting

**Export…** on any palette (<kbd>⇧⌘E</kbd>, or the palette's menu) opens a sheet with a live preview. Copy the result or save it as a file. Sub-palettes become prefixes or groups, so `blue-500` and `red-500` never collide.

![The export sheet: Format and Colors as pickers, a line on what the format does, and a preview of the output above Cancel, Copy and Save](https://dabbit.app/_astro/export.Bv0tdkU7.png)

## Formats

**Code**
- **CSS variables**: custom properties on `:root`.
- **SCSS variables**: one `$variable` per color.
- **Tailwind @theme**: an `@theme` block for Tailwind v4, in OKLCH.
- **SwiftUI extension**: `Color` statics, P3 where the palette uses it.
- **UIKit extension**: the same as `UIColor`.
- **Android colors.xml**: `res/values/colors.xml` with ARGB hex.
- **Jetpack Compose**: top-level `Color` values.

**Design tools**
- **Figma variables**: W3C Design Tokens JSON. Import it from Figma's variables panel or Tokens Studio; sub-palettes become groups. (If Dabbit is running, the [Figma plugin](https://dabbit.app/docs/figma-plugin) does this in one click, without a file.)
- **Adobe Swatch Exchange**: an `.ase` file for Photoshop, Illustrator, InDesign and Affinity.
- **Apple color list**: a `.clr` file for the system color panel. Save it into `~/Library/Colors` and every Mac app's color picker gets a tab with your palette.

**Data**
- **Dabbit JSON**: everything, including names, notes and groups. Import it back into Dabbit on any Mac.
- **Plain text**: one color per line, with its name.

## Single colors

For one color rather than a palette, you don't export: pick a [format](https://dabbit.app/docs/formats) and copy. **Copy as** in the menu bar, the Color Dock, or any swatch's menu gives every format for that color.