Colors
Free Color Picker & Palette Tool
Pick any color and copy it as HEX, RGB, HSL, or HSV. Claim free lifetime access with a Bravely account, build a palette and harmonies, then export to CSS, JSON, or a Tailwind config.
Claim lifetime access to free Color Picker
Create a free Bravely account — it’s yours to keep. No card, no catch.
One free account unlocks every Bravely tool.
Put it in your menu bar
Bravely Color Picker is a free Mac app: click the eyedropper in your menu bar, pick any pixel on screen, and the hex code lands on your clipboard. Same account, same free claim, and the web picker stays right here whenever you want it.
How it works
Pick, build, and export in three steps
- 1Pick a color with the picker or grab one from your screen with the eyedropper, then copy it as HEX, RGB, HSL, or HSV.
- 2Build a palette with color harmonies — complementary, analogous, triadic — and fine-tune each swatch.
- 3Sign in free and export your palette to CSS variables, JSON, or a Tailwind config.
What you get
Everything included, free
Pick or paste any format
Start from the pick surface, the hue slider, or a pasted value. HEX, RGB, HSL, and CSS color names all parse instantly.
HEX, RGB, HSL, and HSV values
Every format for the current color sits in one click-to-copy list, formatted exactly the way you would write it in CSS.
Eyedropper from your screen
Sample any pixel in any window in Chrome and Edge. In other browsers, use the picker wheel or paste a value instead.
Color harmonies
Complementary, analogous, triadic, tetradic, split, and rectangle schemes generated from your base color, each one click from the palette.
Palette builder
Collect up to 24 swatches from picks, pastes, and harmony suggestions. Click any swatch to bring it back as the current color.
CSS, JSON, and Tailwind export
Download your palette as CSS custom properties, a JSON color map, or a Tailwind color config, ready to drop into a project.
Use cases
What people make with it
Design systems. Turn one brand color into a full set of tokens with harmonies, then export CSS custom properties the whole team can consume.
Brand palettes. Grab the exact color from a logo or mockup with the eyedropper and build the supporting palette around it.
Developer handoff. Copy the same color as HEX for stylesheets, RGB for canvas code, or HSL for tweakable theme variables. No manual conversion.
Accessibility work. Nudge lightness and saturation until text colors clear WCAG contrast while keeping the hue your brand expects.
Theme variants. Shift lightness in HSL to derive hover states and dark-mode versions of the same hue instead of guessing at new hex codes.
HEX, RGB, HSL, HSV: what each format is for
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.
Color harmonies, briefly
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.
FAQ
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.
More free tools
Keep the streak going
From the same studio
Bravely Studios builds nine cross-platform desktop utilities — screenshots, PDF signing, remote desktop and more — with one plan that unlocks all of them. The same account you just used works everywhere.