Color Picker

Pick any color and instantly get all its values: HEX, RGB, RGBA, HSL, HSLA, CSS custom properties, and Tailwind utility classes. Explore harmonious color relationships, shades, and tints.

Interactive Color Selection

Use the color wheel or hue slider to select your base color. Adjust saturation and lightness with intuitive controls. Preview your color in real-time on sample text and background.

Color Formats

HEX: #RRGGBB format for web. RGB/RGBA: Red, Green, Blue values with alpha for transparency. HSL/HSLA: Hue (0-360°), Saturation (0-100%), Lightness (0-100%). CSS Variables: Custom property syntax for modern CSS. Tailwind: Arbitrary value syntax for Tailwind CSS projects.

Color Harmonies

Complementary: Colors opposite on the color wheel — high contrast. Triadic: Three evenly spaced colors — balanced and vibrant. Split-Complementary: Base color plus two adjacent to complement — sophisticated. Analogous: Adjacent colors — harmonious and serene.

Shades and Tints

Shades: Darker variations by adding black to the base color. Tints: Lighter variations by adding white to the base color. Perfect for creating color palettes, gradients, and UI themes.