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.
-
Conversor HEX a RGB
Convierte códigos hex a RGB — obtén componentes r, g, b y la cadena CSS rgb().
Abrir herramienta →
-
Conversor HEX a HSL
Convierte colores hex a HSL (tono, saturación, luminosidad) para theming y variables CSS.
Abrir herramienta →
-
Mezclador de colores
Mezcla dos colores en cualquier proporción y obtén hex, RGB y HSL del resultado al instante.
Abrir herramienta →
-
Buscador de color complementario
Encuentra el color complementario (180° opuesto en la rueda) de cualquier color hex.
Abrir herramienta →
-
Generador de colores análogos
Genera esquemas análogos (±30° y ±60° en la rueda de color) para paletas armoniosas.
Abrir herramienta →
-
Generador de colores triádicos
Genera esquemas triádicos — tres colores separados 120° en la rueda de color.
Abrir herramienta →
-
Generador de tintes y sombras
Genera una gama completa de tintes (claros) y sombras (oscuros) para cualquier color base.
Abrir herramienta →
-
Búsqueda de nombres de color
Encuentra el color CSS con nombre más cercano para cualquier hex, o busca por nombre.
Abrir herramienta →
-
Extractor de variables CSS
Pega CSS y extrae todas las propiedades personalizadas (--variables) y sus valores con un clic.
Abrir herramienta →
-
Color desde píxel de imagen
Sube una imagen y haz clic en cualquier píxel para leer su valor hex, RGB y HSL al instante.
Abrir herramienta →
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.