Color tools
Ten browser-based color utilities — convert HEX to RGB and HSL, mix and blend colors, generate complementary, analogous, and triadic schemes, create tint and shade palettes, look up CSS named colors, extract CSS variables, and pick colors from images. No signup, no cloud, nothing leaves your device.
-
HEX to RGB Converter
Convert hexadecimal color codes to RGB values — get r, g, b components and the CSS rgb() string.
Open tool →
-
HEX to HSL Converter
Convert hex colors to HSL (hue, saturation, lightness) for easier theming and CSS variables.
Open tool →
-
Color Mixer
Blend two colors together at any ratio and see the resulting hex, RGB, and HSL values instantly.
Open tool →
-
Complementary Color Finder
Find the complementary color (180° opposite on the color wheel) for any hex color.
Open tool →
-
Analogous Colors Generator
Generate analogous color schemes (±30° and ±60° on the color wheel) for harmonious palettes.
Open tool →
-
Triadic Colors Generator
Generate triadic color schemes — three colors evenly spaced 120° apart on the color wheel.
Open tool →
-
Tints & Shades Generator
Generate a full range of tints (lighter) and shades (darker) for any base color.
Open tool →
-
Color Name Lookup
Find the nearest CSS named color for any hex value, or search by color name to get the hex code.
Open tool →
-
CSS Variable Extractor
Paste CSS code to extract all custom properties (--variables) and their values in one click.
Open tool →
-
Color from Image Pixel
Upload an image and click any pixel to instantly read its hex, RGB, and HSL color value.
Open tool →
Why browser-only color tools?
Color decisions are at the heart of every design system. These tools let you experiment freely without pasting values into a remote service or signing up for yet another SaaS product. Every conversion, blend, and palette is calculated locally in JavaScript — instant feedback with zero latency, no data sent anywhere.
Choosing the right tool
Need to translate design tokens? Use HEX to RGB or HEX to HSL to get CSS-ready values. Building a palette? Try Complementary, Analogous, or Triadic generators for harmonious schemes. Need more depth? Tints & Shades generates a full lightness range. For matching a real-world color, use Color from Image Pixel to sample any photo.