2
5 Comments

I built a macOS color picker that outputs Tailwind classes — 2 weeks, $19 lifetime

I spent years doing this dumb workflow: Digital Color Meter → copy hex → manually figure out if it's blue-500 or blue-600 → paste.

  Two weeks ago I finally built the tool I wanted.

  ColorPeek sits in the menu bar. Click it (or ⌘⇧C), pick a color, and it outputs the format you actually need:

  • #3B4CFC → blue-500 (Tailwind — with full 242-color palette matching)

  • #3B4CFC → $blue-500 (SCSS)

  • #3B4CFC → var(--blue-500) (CSS)

  • #3B4CFC → Color(red: 0.23, green: 0.30, blue: 0.99) (SwiftUI)

  Plus HEX, RGB, HSL, OKLCH for free.

  Tech: SwiftUI + AppKit, UserDefaults, zero network requests (free tier). Pro is $19 lifetime, license covers 3 Macs.

  No subscriptions. No cloud. No accounts. Just pick, copy, paste.

  wayknow.tech/colorpeek

  Happy to answer questions!

posted toAvatar for product ColorPeek
ColorPeek
  1. 1

    I'm curious what made you decide that matching Tailwind classes was the problem worth solving, rather than building a more general color utility.

    Was there a point where you realized developers weren't looking for color values—they were looking for implementation-ready output?

    1. 1

      Good question. It came from my own workflow, but not in a "market research" way — more like accumulated annoyance.

      I was using Sip [1] and Digital Color Meter, then keeping a Tailwind color chart open in a tab to map hex → class name. The picker gave me #64748b, but what I actually needed was text-slate-500. Every. Single. Time.

      The realization wasn't dramatic — just noticing I was doing the same lookup hundreds of times across projects. The color value was useless without the design system token. Same pattern with SwiftUI projects: Color(red: 0.39, green: 0.45, blue: 0.55) is technically correct but Color.slate is what you actually write.

      So the bet was: developers don't want a color, they want the right abstraction for their stack. The menu bar thing is just ergonomics — the real value is skipping the mental mapping step.

      Re: "general utility" — I actually started more general (hex/RGB/HSL), then added formats based on what I used. Tailwind and SwiftUI came first because that's my daily work. The other formats (SCSS, Objective-C) were requests from early users who had the same friction in different stacks.
      [1] https://sipapp.io — good tool, just not stack-native

      1. 1

        Appreciate the context.

        Would be good to continue the conversation outside the thread.

        What's the best email to reach you on?

        1. 1

          Sure support@wayknow.tech Happy to chat more.

          1. 1

            Thanks! I’ve just sent it over.

            Looking forward to hearing your thoughts whenever you have a chance.