Hex, RGB, HSL y OKLCH
Compara los formatos de color CSS más comunes en un solo selector y copia el valor que necesita tu código o tu herramienta de diseño.
Elige un color
Selector de color
Elige un color visualmente o introduce valores Hex, RGB y HSL para ver su equivalente OKLCH, tonos, matices, sombras y sugerencias de armonía para CSS, componentes de interfaz y paletas de marca.
Elige un color
Valores
RGB
HSL
Tonos
Haz clic en un tono para usarlo como color base.
Armonías
Complementario
Análogo
Triádico
Complementario dividido
Siguientes pasos
Qué puedes hacer aquí
Tonos, matices y sombras
Convierte un color base en variaciones más claras y más oscuras para estados hover, bordes, fondos y tokens de diseño.
Empieza un sistema de color
Después de elegir un color base, comprueba el contraste, convierte formatos o abre la rueda de color para crear una paleta completa.