Color Picker & Converter
Pick a color and copy HEX, RGB, or HSL values into your design tokens, CSS, or Tailwind theme without transcription errors.
Check contrast for text and focus states when you define brand palettes.
How to use
- Use Pick color or enter a value in HEX (e.g.
#ff0000), RGB (e.g.255, 0, 0), or HSL (e.g.0, 100%, 50%). - All formats update in real time. Use Copy next to each format to copy that value.
- Use Share URL to copy a link with your current color (e.g.
?hex=ff0000).
1Color spaces are choices, not trivia
HEX is compact for CSS; RGB mirrors how screens emit light; HSL separates hue from saturation and lightness, which many designers find easier to tweak for accessible palettes.
Converting between representations does not change the color your monitor shows—it changes how you reason about adjustments and constraints.
- Test contrast ratios for text and interactive controls against WCAG guidelines when you pick brand colors.
- Remember that identical hex values can look different on two uncalibrated displays; soft-proof when print or OLED matters.
2Building cohesive UI kits
Define a small set of semantic tokens (surface, border, danger, success) and map them to concrete values so dark mode stays maintainable.
When you tune a hover state, nudge lightness in HSL instead of guessing new hex digits—it keeps saturation stable.
3Sharing with designers and engineers
Copy values directly into design tokens, Tailwind config, or platform theme files to reduce transcription errors.
Share a URL that encodes the chosen swatch so a ticket can reference a single source of truth for the accent color in a feature.
4Design tokens and theming
Modern design systems store colors as tokens (`--color-primary`) mapped to concrete values per theme. Copy HEX or HSL from this tool into token files rather than hard-coding colors in dozens of components.
Dark mode often requires separate surface and border tokens, not just inverting lightness.
5WCAG contrast
Body text generally needs 4.5:1 contrast against its background; large text can use 3:1. Use a dedicated contrast checker for compliance audits—this tool helps you capture values to test.
6Quick checklist for accessible color choices
Check contrast for body text and focus rings, not only brand swatches. Document hex values in your design token file to avoid drift between Figma and CSS.
- Test dark mode tokens alongside light mode.
- Share a URL with stakeholders when approving an accent color.
Examples
Brand accent
Copy HEX into CSS custom properties.
#0ea5e9 → rgb(14, 165, 233) → hsl(199, 89%, 48%)Neutral surface
Tune HSL lightness for dark mode borders without shifting hue.
hsl(220, 14%, 96%) /* light surface */
hsl(220, 14%, 12%) /* dark surface */