Selector de color online: HEX, RGB, HSL y más
Un selector de color (color picker) permite elegir colores visualmente y obtener sus valores en distintos formatos. Es una herramienta fundamental para diseñadores web, desarrolladores frontend y cualquier persona que trabaje con color digital.
Formatos de color digital
- HEX: #FF5733 — seis dígitos hexadecimales. El más usado en CSS.
- RGB: rgb(255, 87, 51) — valores de rojo, verde y azul de 0 a 255.
- HSL: hsl(11°, 100%, 60%) — tono, saturación y luminosidad. Más intuitivo.
- RGBA / HSLA: añaden un canal alfa para transparencia (0 opaco, 1 transparente).
- OKLCH: nuevo estándar CSS con mejor percepción perceptual uniforme.
Teoría del color básica
Los colores complementarios se oponen en el círculo cromático (rojo y verde, azul y naranja). Los colores análogos son adyacentes (azul, azul-verdoso, verde). Las paletas triádicas usan colores equidistantes. Para paletas web accesibles, el contraste entre texto y fondo debe cumplir las pautas WCAG 2.1 (ratio mínimo 4,5:1 para texto normal).
Variables CSS para sistemas de diseño
En proyectos modernos, los colores se definen como variables CSS: --color-primary: #6d28d9. Esto permite cambiar toda la paleta de colores desde un único lugar. Las librerías de diseño como Tailwind CSS, Material UI y Chakra UI siguen este enfoque con sistemas de tokens de color.