🎨

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.

All tools Browser-only

Pick a color or enter HEX

R (0-255)200

G (0-255)16

B (0-255)46

Preset colors

#C8102E

HEX #C8102E

RGB rgb(200, 16, 46)

HSL hsl(352, 85%, 42%)

HSLA hsla(352, 85%, 42%, 1)

Nearest Tailwind 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 →

NEW

✨

CSS Animation Builder

Visual builder for CSS animations. 10 presets (fadeIn, bounce, pulse, spin, shake…). Tweak duration, easing, iteration.

NEW

🪞

CSS Filter Builder

Visual builder for CSS filters — blur, brightness, sepia, hue-rotate, drop-shadow. 8 presets (Vintage, Polaroid, Noir…).

NEW

🎨

Color Palette Generator

Generate harmonious palettes from a base color (HSL theory). 6 schemes: Monochromatic, Analogous, Complementary, Triadic… + 10 shades.

NEW

🎚

CSS Grid Layout Generator

Visual builder for CSS Grid. 6 presets (Holy Grail, Magazine, Auto-fit…). Live preview + copy CSS.