Color Tools
Pick a color, copy values, and build a quick palette. Clean, fast, and private.
Copy values with one click. Everything stays on-device.
Palette
HEX, RGB, and HSL
These are three ways of writing the same color. HEX (like #2A6F6B) packs red, green, and blue into a six-digit code and is the most common format in CSS and design tools. RGB writes those same three channels as plain numbers from 0-255. HSL describes a color by hue (0-360°), saturation, and lightness — often the easiest format to reason about, since adjusting lightness alone keeps the same hue and saturation.
Common color mistakes
Low contrast text
Light gray text on white looks clean but often fails accessibility guidelines. Check the contrast ratio, not just visual preference.
Relying on color alone to convey meaning
Colorblind users may not distinguish red from green. Pair color with an icon or label for anything important, like errors or statuses.
Building a palette from random hex codes
Colors without a consistent saturation/lightness relationship tend to look mismatched. Vary lightness around one hue instead.
Too many accent colors
Most interfaces need one or two accents plus neutrals. More than that reads as noisy.
Ignoring how a color renders on different backgrounds
A color that pops on black can wash out on white. Check both if your product supports light and dark modes.
Palette
Generate a simple scale for UI states, backgrounds, and text.
FAQ
Are color palettes saved?
No. Everything stays in your browser.
What formats can I copy?
HEX, RGB, and HSL.
How is the palette generated?
Six lightness steps from your base hue and saturation.
What's the difference between HEX and RGB?
Same values, different notation.
Why use HSL instead of HEX?
Change lightness alone without recalculating the code.
Does this check accessibility contrast?
Not yet, pair it with a dedicated WCAG checker.
Quick tips
- Use lighter tones for backgrounds.
- Keep contrast high for readability.
- Reuse palette steps across UI states.