Git Product home page Git Product logo

system-color-picker's Introduction

System Color Picker

The familiar color picker supercharged




The macOS color picker as an app with lots of extra features.

Download

Requires macOS 14 or later.

Older versions

Non-App Store version

A special version for users that cannot access the App Store. It won't receive automatic updates. I will update it here once a year.

Download (2.0.0 · macOS 14+)

Features

  • Palettes
  • Recently picked colors
  • Quickly copy, paste, and convert colors in Hex, HSL, RGB, LCH format
  • Show as a normal app or in the menu bar
  • Pick a color or toggle the window from anywhere with a global keyboard shortcut
  • Make the window stay on top of all other windows
  • Launch it at login (when in the menu bar)
  • Hide menu bar icon
  • Shortcuts support

Tips

  • Press the Space key while using the color sampler to show the RGB values. The color sampler is a system component and it can unfortunately not show other kinds of color values.
  • Press the Option key when copying the Hex color to invert whether to include #.
  • Press the Shift key while selecting a color using the color sampler to prevent it from disappearing after your selection.

Keyboard shortcuts

You can use the following keyboard shortcuts in the app:

  • Pick color: Command p
  • Copy as Hex: Shift Command h
  • Copy as HSL: Shift Command s
  • Copy as RGB: Shift Command r
  • Copy as OKLCH: Shift Command o
  • Copy as LCH: Shift Command l
  • Paste color: Shift Command v (In the format Hex, HSL, RGB, or LCH)
  • Reset opacity: Control Shift o

Plugins

The built-in color picker supports plugins:

Screenshots

FAQ

The app does not show up in the menu bar

macOS hides menu bar apps when there is no space left in the menu bar. This is a common problem on MacBooks with a notch. Try quitting some menu bar apps to free up space. If this does not solve it, try quitting Bartender if you have it installed.

What is OKLCH color?

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

How is OKLCH better than LCH?

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

The color changes if I copy and then paste it

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).

How do I use palettes?

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.

How do I change the color space?

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 format will always be clamped to sRGB color space.

Can you support SwiftUI.Color / UIColor / NSColor formats?

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 Scala color picker plugin supports UIColor and NSColor.

Can I contribute localizations?

I don't plan to localize the app.

Built with

  • Defaults - Swifty and modern UserDefaults
  • KeyboardShortcuts - Add user-customizable global keyboard shortcuts to your macOS app
  • LaunchAtLogin - Add “Launch at Login” functionality to your macOS app

Other apps

system-color-picker's People

Contributors

sindresorhus avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

system-color-picker's Issues

Suggestion: Install via Homebrew

Instead of having the app dependent of the Mac App Store, also have it available as a cask from Homebrew.

Also having the compiled .dmg-file for the Releases-section right here on GitHub! 😄

when pasting in a hex color, the palette changes but the text field does not

  • macOS 12.1
  • SCP v1.9.0 (MAS)

Repro

  • If you put ff4915 in your pasteboard, and enter the hex field and press ⌘cmd+V the color wheel & swatch will update but the field (usually) remains at its previous value
  • bonus: sometimes the field does update after pasting. This usually happens after fiddling with the controls a bit.

here's a screen recording:

scp1.mp4

The app does not show up in the menu bar - solution

The app does not show up in the menu bar
macOS hides menu bar apps when there is no space left in the menu bar. This is a common problem on MacBooks with a notch. Try quitting some menu bar apps to free up space. If this does not solve it, try quitting Bartender if you have it installed.

You can sort icons in MenuBar using Cmd button + mouse.

No need to use any extra soft like Bartender. Just move app to the right corner of Menubar :)

Quit shortcuts and menus are missing. The white dot disappears.

When I look at the dock, it is not clear whether the application is open or not on Dock icon. The white dot disappears.

Ekran.Kaydi.2021-10-15.21.36.20.mov

Also application does not appear in the quick switch interface. Command+Tab | Comman+Q.

tutorials-9832-0-70764300-1594797311_thumb

There is no Quit option when right clicked on the Dock icon.

Ekran Resmi 2021-10-15 21 55 26

Suggestion: Show current color when using color sampler

I switched from Sip to System Color Picker a few months ago, and I'm very thankful for the great app you built – Thanks!

One thing I'm always missing from Sip, though, is the possibility to see the current color inside the color sampler. It looks like this:

image

I find this very helpful when I have to pick the color of text, where I'm searching for the darkest color with the color picker, so I don't accidentally select a weaker color of font smoothing. Is there any chance System Color Picker may support this too? Thanks for your consideration.

Support for hiding the menubar icon

I'll mainly use the app's color picker via the global shortcut, so I'd prefer to be able to hide the app's icon from the menubar to have a less cluttered menubar.

Please consider supporting macOS 13 with the newest version 2 release

I know the tech world goes forward, but would you consider supporting the new version of the app also unter macOS 13? Thanks to Apple's limitations my iMac 5K stays at Ventura, as many other models. Having an OKLCH picker would be lovely.

Anyway, thanks for the app, it looks splendid.

Make LCH not clamped to sRGB

Currently, the LCH color is clamped to sRGB as the browser support for high gamut is limited. I think we could add a preference later on to enable high gamut LCH. Is a preference even needed? Could we make high gamut the default at some point?

How will browsers handle this?

Description of the color

Hi, such a good tool, and I really love this app and all of your other apps!
I want to add a feature to show and copy localized description of the color, using AXNameFromColor(_:), don't know if the PR is welcome.

Something like this:
image

Validate text fields

I think we should validate the text fields and indicate invalid/unsupported input somehow. Maybe making the text field have a red border.

Feature request: More color formats

As an iOS developer, I often need colors formatted according to the UIColor / SwiftUI.Color initializer. Support for that would be great! 😊

OKLCH color sliders

I love that your app treats LCH as a first-class citizen! I’ve been using LCH colours for different UI elements ever since I stumbled upon Lea Verou’s article, and I end up using her LCH colour picker https://css.land/lch/ a lot. It would be great to have this functionality in the sliders tab as well.

Allowing picking P3 Colors

There doesn't seem to be any Mac color pickers that support P3 colors. if I pick a P3 color in Safari (which supports P3 colors out of the box) it will just output the color in SRGB color formats. Safari has its own built-in P3 color picker:
Screenshot 2023-12-20 at 2 01 53 PM

Add Support for Localization

Although the app obviously isn't very text-heavy, I think it would be neat to allow contributors to translate Color Picker into other languages.

The app already feels 95% like a native Mac app, and having the app name and menu options in my own language (not English) would make that 100%.

Apple's instructions for app localization can be found here: https://developer.apple.com/documentation/xcode/localization

Unable to change the text fields unless settings open

Great app and work man!

I just noticed that there is this bug, where the text fields are not responsive. I can change the colours using the palette and the picker, but unable to change the exact values in the text fields, unless i have the color picker settings open. Only then the field becomes available to edit. Using Sonoma currently, on

I was wondering if this could be fixed somehow. Unfortunately I am not experienced with Swift and X Code and I cannot find the issue by myself.

Custom Palettes

I love the ability to select colors and add them directly to the macOS 'other colors' picker used by other products. That said, I work with multiple clients, and it would be really helpful to have the option to create individual palettes for each brand so I can keep the blue from Client 1 separate from the blue from Client 2.

Would you be willing to add an option to save and access custom palettes within the app? Ideally, there would be a 6th icon across the top row that changes the color wheel/crayons/etc. to a series of rows with up to 4 most recent custom palettes that include color blocks that can be dragged to the system set on the bottom. A context-specific menu row that includes [+], [-] and [trash] icons would allow users to create/delete palettes and trash individual colors from a given palette without cluttering the screen.

If this isn't an option, an option with more clicks would leverage your existing Palettes icon to the left of the [...] button on your menu bar in the middle of the panel. An option to add new palettes here would be useful, though selecting the palette to save a given color to, and remove from, will require more effort.

This could also be a one time purchase option to compensate for the extra functionality.


Automatically copy to clipboard

It could be useful to automatically copy the picked value to the clipboard based on a pre-defined preference rather than have to copy using the keyboard shortcut. I can imagine this will differ depending on whether the user needs HEX, RGB, etc. but it would lead to a smoother workflow, especially when integrating with launchers like Raycast (example attached)

Colour.Picker.mp4

Richer color picker experience

I've just moved away from using ColorSnapper2, and I think this app should implement some of the extra features that ColorSnapper2 provides for its color picker, as they improve the user experience significantly.

Features

  1. Being able to resize the loupe with the scroll wheel. This is pretty useful as the current size of the loupe feels very small to me, it feels a bit disorienting, as if I can't see enough of the surrounding to orientate myself easily, I'd like to make it bigger.
  2. Current color tooltip. I like this a lot because it allows the color picker to be used for more things, for example I can check if something is pure black or if two things are of the same color super quickly, currently doing the same with this app involves opening the window, which just breaks the workflow for me.
  3. Close-up mode. When pressing ctrl on ColorSnapper2 the loupe sort of zooms in into the screen, showing a bigger loupe, much bigger pixels, a pixels grid and importantly also the loupe moves more slowly. Those are pretty useful features IMO as picking a precise pixel currently with the app is not a smooth as it should be, it's just too easy to move the cursor accidentally to a neighbor pixel and I find that I physically get closer to the screen just to have a better view of the pixels.

Demo

Screen.Recording.2021-11-11.at.11.50.54.mov

Quick paste

I think it would be useful to be able to quickly paste a color in either Hex, HSL, or RGB. You can already do this by selecting the correct text field first, but I think it would be nice if we could support this as long as the app is active.

Open questions:

  • What should the keyboard shortcut be? Should we use Command+V for this? Or should it be Shift+Command+V?
  • Where and how should it be presented in the UI? (Button to paste)

The implementation should be simple as we already have the initializers. We just try initializing the colors on after another.

Feedback wanted

Request for Homebrew Support

Hey, can you please publish a Homebrew Cask for this (and possibly all your other products as well)? You have a lot of amazing apps but none of them are available on brew which is a requirement for headless installs. I'm trying to include this app in https://install.doctor.

Alternatively, maybe you can add a one-line bash command that installs the app in the README.md?

OKLCH color support

Can you add support for OKLCH colors? OKLCH has been added to CSS color 4 and is superior to LCH, particularly at perceptually uniform blending of colors without hue shifts.

Browser support isn't here yet, so no rush, but I think OKLCH will be better than LCH when you get to implementing color sliders #20.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.