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 →CSS 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…).
NEWColor Palette Generator
Generate harmonious palettes from a base color (HSL theory). 6 schemes: Monochromatic, Analogous, Complementary, Triadic… + 10 shades.
NEWCSS Grid Layout Generator
Visual builder for CSS Grid. 6 presets (Holy Grail, Magazine, Auto-fit…). Live preview + copy CSS.