Bravely Color Picker is a free Mac app. Click the eyedropper in your menu bar, pick any pixel on screen, and its HEX code lands on your clipboard. Same account, same free claim.
Use the picker, paste a value or use the eyedropper.
2
Build
Add harmonies and fine-tune each swatch.
3
Export
CSS variables, JSON or a Tailwind config.
What you get
Everything included, free
Pick or paste any format
HEX, RGB, HSL and CSS color names all parse instantly.
HEX, RGB, HSL, and HSV values
Every format of the current color, one click to copy.
Eyedropper from your screen
Sample any pixel on your screen in Chrome and Edge.
Color harmonies
Six schemes from your base color, one click into the palette.
Palette builder
Collect up to 24 swatches from picks, pastes and harmonies.
CSS, JSON, and Tailwind export
A palette file that drops straight into a project.
What people make with it
Design systems
Brand palettes
Developer handoff
Accessibility work
Theme variants
Good to know
HEX#34d399Stylesheets and handoff
RGBrgb(52, 211, 153)Canvas and graphics code
HSLhsl(158, 64%, 52%)Hover states and theme tweaks
HSVhsv(158, 75%, 83%)The pick surface
HEX, RGB, HSL, HSV: what each format is for
Four spellings of the same color. Copy the one your code expects.
Read more
They are four spellings of the same color. HEX (#34d399) is the compact web standard: two base-16 digits per channel, ideal for stylesheets and design handoff. RGB (rgb(52, 211, 153)) exposes the raw red, green, and blue channels, which is what canvas code, image processing, and most graphics APIs expect, and rgba() adds an alpha channel for transparency.
HSL (hsl(158, 64%, 52%)) describes a color the way people reason about it: a hue angle on the color wheel, how saturated it is, and how light it is. That makes it the best format for deriving variations, since a hover state is often the same hue with lightness shifted a few points. HSV is HSL's close cousin, pairing hue and saturation with value (brightness) instead, and it is the geometry behind the square pick surface in this tool. Copy whichever your code expects; they all describe the same pixel.
Complementary
Analogous
Triadic
Split
Color harmonies, briefly
Recipes for colors that sit in a set relationship on the color wheel. Start from one, then tune by eye.
Read more
Harmonies are recipes for picking colors that sit in a deliberate geometric relationship on the color wheel. Complementary takes the hue directly opposite yours, which yields maximum contrast and works well for a call to action against a brand color. Analogous takes the neighbors on either side and reads calm and cohesive. Triadic and tetradic space three or four hues evenly around the wheel for palettes that feel varied but balanced, and split-complementary softens a complement by using the two hues beside it.
Treat them as starting points, not laws. The generator gives you mathematically exact companions for your base color; real palettes usually keep one dominant hue, lean on a second for support, and reserve the rest for accents. Add a full harmony to the palette, then adjust saturation and lightness per swatch until it feels intentional rather than computed.
Frequently asked questions
Is the color picker really free?
Yes. Sign in with a free Bravely account, claim free lifetime access once, and everything here is yours: the picker, the eyedropper, harmonies, the palette builder, and every export format. No paid tier, no usage caps, no watermark.
Why do I need an account?
The account is the whole price. Bravely Studios makes paid desktop utilities; free tools like this one are how we introduce ourselves. One free account works across every Bravely app and tool, and there is nothing to cancel because there is nothing billed.
Which browsers support the screen eyedropper?
Chrome and Edge. Screen sampling needs a browser capability that only those two currently ship, so in other browsers the eyedropper button hides itself. You can still use the picker wheel, the hue slider, or paste any HEX, RGB, or HSL value instead.
What export formats are supported?
Three: CSS custom properties, a JSON color map, and a Tailwind color config. Each swatch also copies individually as HEX, RGB, HSL, or HSV, so you can lift a single value without exporting anything.
Is there a desktop version?
Yes, for Mac. Bravely Color Picker is a free menu-bar app: click the eyedropper in your menu bar, pick any pixel on screen, and the HEX code lands on your clipboard. It uses the same free account and the same one-time claim as this page, and the download sits right below the web picker.
Is my data private?
The colors you pick, the palettes you build, and the files you export are all computed in your browser; none of it is sent to our servers. Your account is used to sign you in and record your free claim, not to collect your colors.
What is the difference between HSL and HSV?
Both describe a color by hue, but they measure intensity differently. In HSL, 100% lightness is always white; in HSV, 100% value is the purest, brightest version of the hue. Designers tend to reason in HSL, while HSV matches the two-dimensional pick surface in tools like this one.
Can I build more than one palette?
The builder holds one palette at a time, up to 24 colors. Export it, clear the list, and start the next one. There is no limit on how many palettes you export.
