Color Picker — HEX / RGB / HSL
Visual color picker — copy HEX, RGB, HSL, HSLA. Real-time RGB sliders, 12 presets, nearest Tailwind name suggestion. For designers & developers.
Preset colors
#C8102E rgb(200, 16, 46) hsl(352, 85%, 42%) hsla(352, 85%, 42%, 1) red-600 Features
- 3 input methods: native picker, direct HEX, per-channel RGB sliders.
- 5 output formats: HEX, RGB, HSL, HSLA, nearest Tailwind class name.
- Large preview: text auto-flips black/white by luminance.
Who this is for
Frontend devs, UI/UX designers, anyone prototyping visuals fast or generating CSS for Tailwind/React/Vue projects.
FAQ
Does the generated CSS work with Tailwind?
Yes. Output is vanilla CSS, paste into any .css file. For Tailwind projects, use @utilities layer or theme overrides.
Browser compatibility?
Modern CSS syntax (custom properties, grid). Works on Chrome/Firefox/Safari 2020+. IE11 NOT supported.
Related tools
See all tools →Tailwind ↔ CSS Converter
Convert between Tailwind utility classes and vanilla CSS. ~200 utilities (spacing, color, flex, grid…). Helps migration.
NEWSVG to React/JSX
Convert SVG to React component. camelCase attrs, currentColor, TypeScript types, size/color props.
NEWCSS Animation Builder
Visual builder for CSS animations. 10 presets (fadeIn, bounce, pulse, spin, shake…). Tweak duration, easing, iteration.
NEWCSS Filter Builder
Visual builder for CSS filters — blur, brightness, sepia, hue-rotate, drop-shadow. 8 presets (Vintage, Polaroid, Noir…).