System Color Picker

Click the feedback button in the app or send it here.

How to make the app show up in the menu bar

No. The color sampler in the app is provided by macOS and only supports showing RGB values when you press the Space key. To show Hex (or other formats) directly in the sampler would require a completely custom sampler, which in turn would need extra system permissions like “Screen Recording”. For now, the fastest workflow is to pick a color with the sampler and then copy it in Hex format from the app.

It’s a more human-friendly color format. Prefer this format.

OKLCH improves upon LCH by providing more accurate and consistent colors, particularly in very bright or very saturated areas.

It represents RGB values in the range 0-1 instead of 0-255. This format is commonly used for programming (SwiftUI, AppKit, UIKit, etc.) and other graphics programming contexts. For example, 0.5, 0.5, 0.5 in Unit RGB is equivalent to rgb(128, 128, 128) in standard RGB. It accepts values in the format 0.1, 0.1, 0.1 and 0.1 0.1 0.1, including with opacity 0.1, 0.1, 0.1, 0.5.

You can copy a color as HSB by clicking the (…) button in the window and selecting “Copy as HSB”. You can also see live HSB values in the “Sliders” tab by selecting “HSB Sliders”.

HSB is intentionally not one of the main formats. HSB has no CSS syntax, while all the main formats can be pasted directly into CSS. HSL is also easier to reason about: lightness goes from black (0%) through the pure color (50%) to white (100%), so making a tint or shade means changing a single value. In HSB, making a color lighter requires both increasing brightness and decreasing saturation. If you want perceptual control, prefer OKLCH.

That is because the default color space in the picker is Display P3, which is part of CSS Color 4, but the color space used for the legacy CSS color formats is sRGB (browsers are starting to handle color spaces but they are not all there yet).

In the main app window, click the clock icon in the middle toolbar.

You can manage palettes by selecting the third tab in the window toolbar.

The fastest way to add a color to a palette is to paste a Hex color value into the app and then click the + button in the palette. You can also drag and drop a color into the palette from anywhere.

Palettes can be accessed both from the app and the menu bar icon (if enabled). You can even access them in other apps that use the system color picker.

You can find palettes on Coolors. Download the ASE palette type, right-click the file, and select “Open In › Color Picker”.

Select the color and press the Delete key or drag and drop the color onto the trash icon in the Dock.

Unfortunately, this is not possible as swatches are managed by macOS. You will need to delete them individually.

Right-click the color wheel. You want to select “Display P3” if you use LCH or “sRGB” if you use Hex, HSL, or RGB.

Note that the HSL and RGB formats will always be clamped to sRGB color space.

The best practice is to use Asset Catalog for colors instead of hard-coding the values in code. If you really want to hard-code colors, the Skala color picker plugin supports UIColor and NSColor.

The app displays the OKLCH chroma value as a percentage instead of an absolute value for better user-friendliness. For example, oklch(70% 25% 135) in the app corresponds to oklch(70% 0.1 135) on oklch.com. Both are correct: the percentage form (0-100%) and the decimal form (0-0.4) are standard ways to express OKLCH chroma.

Simple Color Palette format

1. Click the (…) button in the window and select “Export Palettes”

CLR format

1. Open Finder
2. Press Command+Shift+G
3. Enter ~/Library/Colors
4. Copy the desired palette files

1. Go to the color palettes folder (see above)
2. Copy NSColorPanelSwatches.plist

This file is not viewable or editable. It can only be used for backup or transfer between Macs.

I just enjoy making apps. Consider leaving a nice review on the App Store.

I don’t plan to localize the app.