Acerca de esta herramienta
Un selector de color asigna un color entre los formatos que CSS entiende. Este se basa en un modelo HSV: un cuadrado de saturación/valor define cuán vivo y cuán brillante es el color, un control deslizante de tono gira alrededor de la rueda de color y un control deslizante alfa establece la opacidad. Cada cambio se convierte con culori en cuatro cadenas canónicas — HEX (#rrggbb, o #rrggbbaa cuando el alfa es inferior a 1), rgb()/rgba(), hsl()/hsla() y el perceptualmente uniforme oklch() — de modo que el mismo color queda listo para insertarse en cualquier hoja de estilos o design token.
Úsalo para tomar un valor exacto de una maqueta, traducir un código hexadecimal que te envió un diseñador al rgb() o hsl() que tu código espera, ajustar una superposición semitransparente y leer el rgba(), o convertir un color heredado en oklch() moderno para CSS de amplia gama. Pega cualquier cadena de color CSS — un código hexadecimal, un color con nombre como rebeccapurple o una expresión rgb()/hsl() completa — y todo el selector se sincroniza con ella; los colores elegidos recientemente permanecen en una fila clicable durante el resto de tu sesión.
Todo se ejecuta en tu navegador — los colores nunca se suben, y la fila de colores recientes se mantiene solo en memoria, por lo que se borra al cerrar la pestaña.
Preguntas frecuentes
¿Cuál es la diferencia entre HSL y OKLCH?
HSL describe un color por tono, saturación y luminosidad en el espacio sRGB, pero valores de luminosidad iguales pueden verse muy distintos en brillo. OKLCH usa un modelo perceptualmente uniforme, de modo que sus valores de luminosidad y croma coinciden con cómo el ojo percibe realmente el color y se mantienen consistentes entre tonos.
¿Cómo represento la transparencia en un color hexadecimal?
Añade un valor alfa de dos dígitos al hexadecimal de seis dígitos, lo que da #rrggbbaa — por ejemplo, #ff000080 es rojo con cerca de un 50 % de opacidad. Esta forma de 8 dígitos es compatible con todos los navegadores modernos; cuando el alfa es totalmente opaco, el selector emite el más corto #rrggbb.
¿Puedo pegar un color CSS con nombre como rebeccapurple?
Sí. El campo hexadecimal acepta cualquier cadena de color CSS válida — colores con nombre, códigos hexadecimales y expresiones rgb()/hsl()/oklch() — y una entrada válida sincroniza al instante el cuadrado, los controles deslizantes y cada formato de salida.