Copying and exporting

Suisai lets you take colors wherever you need them: copy a single color in your preferred code format, drag it into another application, or export an entire palette.

There are 43 individual color code formats and 13 whole-palette export formats, covering web development, Apple platforms, other programming environments, design applications, and palette files.

Copying a color

Click the color swatch itself, on the left side of a palette row, to copy it to your clipboard in the window’s selected format.

The information area on the right has a different action: clicking it expands or collapses the swatch’s details and editing controls.

When you hover over a swatch, a COPY indicator appears. After copying, Suisai briefly confirms what was copied.

The same click-to-copy behavior works with colors in:

• Palette List and Tiles views
• Harmonies and ramps
• Compact palette strips
• Individual color cards
• Palette Library previews
• Recent colors in the menu bar

What goes onto the clipboard?

Suisai places both the formatted text and the color data onto the clipboard.

Paste into a text editor and you’ll receive the color’s code, such as #8e2b12.

Paste into an application or control that accepts native color data, and it can use the color itself.

You don’t need to choose between copying text and copying a color. The destination determines which representation it can use.

An open swatch shows a COPIES AS line, which is the exact string a click will put on the clipboard in the format the window is set to.

Copying in another format

You don’t have to change the window’s selected format whenever you need a color written differently.

Right-click a swatch to open its context menu. Three copying options are available:

Choose a format under Copy As…, and Suisai copies the color immediately.

The window’s selected format doesn’t change. Your next ordinary click or copy continues using the format you had already chosen.

This is useful when you normally work in CSS HEX but occasionally need a Swift, Flutter, Android, or another platform-specific value.

The submenu organizes formats by platform and type, and includes Edit Favorites… for managing the formats you use most often.

Choosing your default copying format

Each palette window has a FORMAT menu in its header.

The chosen format determines how colors are written when you click to copy them or drag them into a text editor.

The setting belongs to that window and is remembered. Different windows can use different formats at the same time.

Changing the FORMAT selection doesn’t change the underlying color or its appearance. It changes only how Suisai writes the color when copying or dragging text.

Favorite formats

The menu displays your favorite formats first, grouped under Web, Apple, and Other.

Additional formats are available through Show all… and platform-specific submenus.

Manage favorites in Settings → Code, or choose Edit Favorites… from the FORMAT menu.

Suisai starts with nine favorites: the six original CSS formats and Swift formats for SwiftUI Color, UIColor RGB, and NSColor sRGB.

You can customize that selection. Your chosen favorites are preserved across application updates, and Reset restores the original defaults.

Supported individual color formats

Suisai supports 43 code formats across three groups.

Apple formats are identified by both their color representation and programming language.

For example, UIColor RGB (Swift) and UIColor RGB (Obj-C) appear separately, so you can choose the form appropriate to your project.

The expanded Apple menu groups formats under SwiftUI, UIKit, and AppKit.

Working with transparent colors

Suisai preserves alpha values when copying colors that contain transparency.

For example, CSS HEX uses six digits for an opaque color and eight when transparency is present:

• Opaque: #8e2b12
• With alpha: #8e2b1280

Some formats don’t include an alpha component in their standard RGB or HSL representation.

When you copy a transparent color in one of these formats, Suisai automatically uses the corresponding alpha-capable representation rather than discarding the transparency.

CSS OKLCH and SwiftUI color formats can express opacity within their own syntax. When the color is fully opaque, they omit that component where appropriate.

Other formats, including UIColor, NSColor, and CGColor, explicitly include alpha even for opaque colors.

Jetpack Compose, Flutter, and Android XML representations also include the alpha component in their color values.

Automatic substitution only occurs when transparency would otherwise be lost. An opaque color is written in the format you selected.

Individual color cards

Choose Tear Off into a Window from a swatch’s menu, or press T while hovering over or selecting a swatch.

Suisai opens that color in a separate floating card showing its name and values, including HEX, RGB, HSL, LAB, OKLCH, and CMYK.

The card supports the same click-to-copy behavior as a palette swatch. It also provides controls to sample another color, add the color to a palette, or copy it in another format.

Collapsing a color card

Use the control in the card’s corner to collapse it into a compact tile displaying the color, its name, and HEX value.

A compact card can remain visible while you work in another application, giving you a convenient reference without occupying much screen space.

Dragging colors into other applications

You can drag colors directly from Suisai without copying them first.

What happens depends on the destination.

Into a design application

When you drag a swatch into an application that accepts color data, Suisai provides the color itself.

For example, in Affinity Designer, you can drop a color onto a shape to change its fill, or onto a curve to change its outline.

There is no need to select a code format for this kind of operation.

Into a code or text editor

When you drag a swatch into a text editor, Suisai supplies its value as text in the window’s selected FORMAT.

For example, a palette set to CSS HEX supplies the HEX value. A palette set to an NSColor format supplies the corresponding code.

Change the window’s FORMAT selection and subsequent text drags use the new format.

The underlying color remains unchanged.

Customizing how values are written

Open Settings → Code to control how Suisai formats copied and dragged color values.

Depending on the selected code format, these settings include:

• Removing or retaining whitespace
• Using fractional values where supported
• Setting decimal precision
• Writing HEX letters in uppercase
• Including the # prefix

The settings include a live preview showing how different output formats respond to your choices.

How settings affect exports

Some Code settings also apply when exporting complete palettes.

HEX capitalization carries through to text-based palette exports, including CSS, SCSS, Sass, Less, JSON, XML, Markdown, SVG, and HTML.

The # prefix setting also applies where HEX values are written as data, such as JSON, XML, and Markdown.

Formats that require # as part of their syntax, including CSS, SVG, and HTML, retain it regardless of the setting.

Other preferences, such as fractional components, decimal precision, and whitespace choices, primarily affect individual copied or dragged code values.

Whole-palette exports use their own defined structures, which may include fixed numeric precision.

Exporting an entire palette

The Export button is at the bottom-right corner of a palette window. You can also access it from the Palette menu.

Suisai offers 13 whole-palette export formats, organized into three groups.

Choose a format to open the macOS Save dialog and select the destination.

Dragging an entire palette out

You can also drag a palette from its footer, where it displays PALETTE · N COLORS.

Suisai creates a file using the format selected for your most recent export, allowing you to drag the entire palette directly into Finder or another suitable destination.

This avoids opening the export menu each time.

Color names in exported code

When exporting to code formats, Suisai converts swatch names into identifiers suitable for the selected language.

For example, a color named Brand Blue can become a CSS variable such as --brand-blue.

If multiple swatches produce the same identifier, Suisai adds numbering to keep their names distinct.

Custom names and names imported from compatible files are preserved where the output format supports them.

For details about saving palettes, supported file formats, and how Suisai handles existing files, see Files and formats.