A complete color toolbox for macOS

Sample from anywhere

See a color you like? Capture it from anywhere on your Mac using Suisai's global keyboard shortcut (⌘⌥P). Whether it's in a photograph, a website, another application, or on a second display, Suisai's native macOS color picker lets you sample any pixel without interrupting your work.

Every sampled color is added to Suisai's menu bar collection and automatically copied to your clipboard in your chosen format, ready to paste into your project. Keep collecting colors as you work, then send individual colors to any open palette, or add your entire collection to a new or existing palette with a single click.

Because Suisai uses the native macOS color picker, it doesn't require Screen Recording permission. Your screen isn't recorded or uploaded, and the colors you collect remain on your Mac.

Picking colors off the screen·Watch: Capture what catches your eye

Build and edit palettes

Start with an empty palette and create colors in whichever way suits you. Suisai supports RGB, HSB, HSL, and CMYK controls, with sliders, spectrum pickers, and a color wheel for different ways of working. Switch between color spaces with the S key, or toggle between the spectrum and color wheel with W, without interrupting your editing.

Adjust individual swatches at any time. Press A while a color is selected or while hovering over it to jump straight to the editing controls. Give colors custom names to make them easier to find in your Library or to use as variable names in exported stylesheets. Rearrange swatches however you like, or drag colors between open palettes to build new collections from colors you've created, sampled, or saved previously.

When you're happy with your work, save the palette to the macOS system Colors folder, making it available to other applications that use the system color picker. Alternatively, use Save As to store it in ASE, GPL, or CLR format wherever you prefer.

Building and editing palettes·Watch: Build your own palettes

Extract colors from photographs

Turn photographs into editable color palettes using three extraction methods. Dominant identifies the colors most prevalent in the image, Vibrant favors saturated colors that occupy a meaningful part of the photograph, and Spread selects a broader range of distinct shades. Each method offers a different interpretation of the same image.

Extract up to 16 colors automatically, then refine your selections by moving pins directly on the photograph or adding your own. Suisai preserves the colors you've manually selected or adjusted when you change extraction methods or color counts, so you can experiment without losing the shades you've chosen. A photograph can hold up to 32 pins in total, with your own selections taking priority over automatically extracted colors.

For more precise sampling, enlarge the image and zoom into the details. Once you're satisfied, the colors can be edited, rearranged, or combined with others in your palette.

Photographs are processed locally in memory. Your images are never uploaded or stored by Suisai.

Palettes from photographs·Watch: Find colors in photographs

Explore color harmonies

Start with a single color and explore seven different harmony modes, each based on a different relationship around the color wheel:

• Complementary: two colors opposite each other on the wheel.
• Split Complementary: three colors, using the two neighbors of the complementary hue.
• Analogous: a range of neighboring hues, with an adjustable count from 3 to 15.
• Triadic: three colors evenly spaced around the wheel.
• Tetradic: four colors arranged in a rectangular relationship.
• Square: four colors spaced evenly at 90° intervals.
• Monochromatic: from 3 to 15 variations of a single hue, progressing from lighter tints to darker shades.

Harmonies remain connected to their starting color. Adjust the seed using the color editor, enter a different value, or drag in a color from another palette, and the calculated colors update automatically.

When you find a combination you like, transfer individual colors or the entire harmony into a regular palette, where every swatch becomes independently editable.

Exploring color harmonies·Watch: Explore color relationships

Create color ramps

Choose two colors and generate a smooth transition between them, with anywhere from 3 to 15 color steps. Adjust either endpoint, change the number of steps, and watch the entire ramp update in real time.

Suisai offers two interpolation methods. sRGB blends the numerical RGB values directly, producing familiar transitions but sometimes introducing unexpectedly dark or uneven-looking intermediate colors. OKLab interpolates in a perceptually oriented color space, often producing smoother, more visually consistent transitions, particularly between contrasting hues.

Switch between the two methods to compare the results and choose the transition that best suits your design. Individual colors, or the complete ramp, can be transferred into a regular palette for further editing and reuse.

Ramps, harmonies and mixing·Watch: Explore color relationships

Compare and mix colors

The Color Bench (Umezara) gives you a dedicated space to compare, adjust, and mix colors from your palettes or directly from the screen. Send a color to the Bench by pressing B while it's selected or under your pointer, using the button in its expanded details, or simply dragging it across. Place colors side by side to see their differences in hue (ΔH), lightness (ΔL), and overall perceptual color difference (ΔE). The Bench also displays the WCAG contrast ratio between neighboring colors, with a direct link to the contrast checker for further evaluation.

Colors that are brought in from an open palette remain linked to their original swatches. Adjusting a color on the Bench will immediately update the palette, or you can change it in the palette and watch the Bench respond. You can also work with colors independently, without adding them to a palette first.

For mixing, Suisai uses a spectral pigment model based on Kubelka–Munk theory, rather than simply averaging RGB values. This approximates the behavior of physical paints, allowing combinations such as blue and yellow to produce green. Adjust the proportions of two colors, add white or black to lighten or darken the mixture, and watch the result update in real time.

Keep a mixed color on the Bench for further experimentation, or send it directly to any open palette. Mixes remain responsive to changes in their source colors until you decide to keep the result.

Mixing and comparing on the Bench·Watch: Compare and mix colors

Check color accessibility

Suisai's contrast checker, 濃淡 Nōtan, helps you evaluate foreground and background colors against WCAG 2.2 contrast requirements. Send colors directly from a palette or the Color Bench, or press C while hovering over or selecting a swatch to add it to Nōtan.

See the contrast ratio between two colors, along with AA and AAA results for normal and large text. Adjust the preview's font family, size, and weight to see how your intended typography looks in practice. While the contrast ratio itself doesn't change with typography, a combination that meets WCAG requirements may still be difficult to read with certain fonts. The preview helps you make that judgment alongside the calculated results.

When a combination falls short, Reach can suggest an adjustment to either the foreground or background color that meets your chosen contrast target while preserving as much of the original color as possible. Keep the suggested color in Nōtan for further comparison, add it to a new or existing palette, or replace the original swatch directly.

For a broader view, the contrast matrix compares up to 10 colors from any combination of palettes, the Color Bench, or suggestions from Reach. Send an entire palette to Nōtan with a single command, or assemble your own collection. Use Dark to Light to arrange the colors from darkest to lightest, making the contrast relationships easier to examine. The matrix displays the results for every pairing, making it particularly useful for evaluating ink ladders and checking how different text shades perform against your chosen backgrounds. Select any cell to examine that combination more closely.

Ladder takes a more focused approach. Choose one color and compare it against every other color in Nōtan, with each combination displayed as a text preview and its WCAG contrast result. See how your chosen color performs as text against different backgrounds, or reverse the comparison to see how other text colors perform against it. Sort the results from dark to light to identify useful combinations quickly.

Checking color contrast·How it works·Watch: Check color accessibility

Color-vision simulation

Explore how your colors may appear to people with different types of color vision deficiency. Suisai offers four simulation modes: Protanopia and Deuteranopia, which affect red–green color discrimination; Tritanopia, which affects blue–yellow discrimination; and Achromatopsia, which simulates little or no color perception.

Simulations can be applied directly within a palette, the Color Bench, or Nōtan's contrast checker. Only the colors you're working with are affected; Suisai's interface remains unchanged. Switch between modes to compare how colors appear and identify combinations that may become difficult to distinguish, particularly when color is used to communicate important information.

Simulations provide a useful additional perspective when making design decisions, but they are approximations rather than exact representations of how every individual experiences color.

Color-vision simulation·Watch: Check color accessibility

Work with your existing palettes

Suisai's Palette Library brings your existing color collections together in one searchable window. Add folders containing Adobe Swatch Exchange (ASE), Photoshop Swatches (ACO), GIMP palettes (GPL), or macOS color lists (CLR), and Suisai indexes the files where they already live. Give each folder its own name in the Library without changing its name or location in Finder.

Search across your collections by palette name, custom color name, or color value. Enter a HEX, RGB, HSL, or OKLCH value, paste a color expression from one of Suisai's supported code formats, or drag a swatch directly into the search field. Choose between Exact, Close, and Same Hue matching to find near-identical colors, perceptually similar shades, or variations of the same hue. Results are ordered by their closest matches, with matching swatches highlighted and their color differences displayed.

The Library also supports CSS, SCSS, Sass, and Less stylesheets. Enable stylesheet indexing for a watched folder and Suisai identifies files containing named color variables, making those colors available for searching and reuse. Unrelated code and generated files are filtered out, and your original stylesheets are never modified.

Browse your collections in list or tile view, preview individual colors, and copy or drag swatches directly into your work. Open palettes for editing, or bring colors into another palette without recreating them. Your existing files stay in their original locations, without being converted into a proprietary database or format.

Managing your palettes·Watch: Work with palettes you already have

Copy and drag colors in 43 formats

Suisai supports 43 individual color formats, covering web development, Apple platforms, Android, Java, .NET, OpenGL, and more. Choose the format that suits your work, from a simple HEX value or CSS variable to a native Swift color expression.

Once you've selected a format, clicking any swatch automatically copies its value to the clipboard, ready to paste into your project. Alternatively, drag the swatch directly into a code editor to insert the formatted value, or into a compatible design application to use the color itself.

Frequently used formats can be kept at the top of the Format menu for quick access, and you can change the active format whenever you need to. Custom color names can also be used to generate meaningful variable names in supported stylesheet formats, without having to rename them manually.

Taking colors into code·Watch: Take your colors anywhere

Save and export palettes

Suisai gives you the freedom to decide where your palettes live and how you use them. Save your palettes in ASE, GPL, or CLR format, using Save As to choose their location. Save to one of your watched folders and the palette becomes part of your searchable Library. When working with an existing palette file, Save writes your changes back to its original location.

When you want to use a palette outside your Library, Export creates a separate file ready for another application or project. Generate stylesheets in CSS, SCSS, Sass, or Less; structured and code-based outputs in HTML, XML, JSON, SVG, or Markdown; or a PNG image of the complete palette. You can also export directly to ASE, GPL, or CLR for sharing with other applications.

For applications that support the macOS system color picker, you can install a palette into the system Colors folder, making its colors available across compatible applications without requiring Suisai to remain open.

Converting and exporting palette files·Watch: Take your colors anywhere

Keep your palettes within reach

When you're working in another application, you don't always want a full palette window taking up valuable screen space. Suisai offers two ways to keep your colors accessible while you work.

Compact Strip collapses a palette into a small row or column of swatches that stays above other applications. Press ⌃⌘↓ to collapse the palette, ⌃⌘← / ⌃⌘→ to switch between horizontal and vertical layouts, and ⌃⌘↑ to return to the full window. Drag colors directly into other applications, or click a swatch to copy its value in your chosen format. You can also configure palettes to collapse automatically when switching to another application, then expand again when you return.

Hang Mode docks full-size palettes along the left or right edge of your display. Use ⌃⌘← or ⌃⌘→ to hang a palette on either side, and the same shortcuts to move it between edges or release it. Multiple palettes can be hung side by side, making it easy to keep several collections visible while working across applications or on larger displays.

Every keyboard shortcut