Texto grande, 24 px
Texto normal de 15 px. El veloz murciélago hindú comía feliz cardillo y kiwi.
Convierte valores RGB a código HEX escribiendo cada canal de 0 a 255 como dos dígitos hexadecimales: rgb(255, 99, 71) pasa a #FF6347, y rgb(0, 0, 0) es #000000. Escribe o pega rgb() y copia el HEX para CSS o tu herramienta de diseño.
Cómo se usa
- Toca la muestra grande para abrir el selector, usa el cuentagotas para tomar un color de la pantalla o escribe en cualquier campo.
- Pega cualquier color CSS (#hex, rgb(), hsl(), hwb(), oklch(), lab(), un nombre…) en un campo o en cualquier parte de la página.
- Toca el botón de copiar junto a un formato. Mueve Opacidad para añadir transparencia.
- En la paleta, toca una muestra para usarla; mantenla pulsada (o clic derecho) para copiar su HEX. En Contraste, elige texto y fondo y toca una sugerencia para corregir una pareja que no cumple.
- WCAG 2.1 exige 4,5:1 para texto normal (AA) y 7:1 para AAA. El texto grande (24 px, o 18,66 px en negrita) necesita 3:1 para AA y 4,5:1 para AAA. Los componentes de interfaz y gráficos, 3:1.
- Las sugerencias mantienen el tono y la saturación y solo cambian la luminosidad (en OKLCH) hasta el valor más cercano que cumple.
- Los colores semitransparentes se mezclan con el fondo antes de calcular la relación de contraste.
- Los valores CMYK son una conversión simple; para imprenta, usa el perfil de color de tu impresora.
- Tus colores recientes solo se guardan en este navegador.
Los formatos de color
HEX es el código de seis dígitos que usan CSS y las herramientas de diseño: #1E88E5 significa rojo 1E (30), verde 88 (136) y azul E5 (229). RGB escribe los mismos valores en decimal, de 0 a 255. HSL describe tono (0–360°), saturación y luminosidad, lo que facilita oscurecer o suavizar un color. HSV es el modelo de la mayoría de cuadros de selección.
OKLCH es un formato CSS más reciente basado en el espacio perceptual Oklab: pasos iguales de luminosidad se ven igual de distintos, por eso sirve para crear escalas y paletas accesibles. CMYK describe la cobertura de tinta en impresión; aquí es una conversión sencilla sin perfil, así que para colores exactos usa el perfil de tu imprenta.
Convertir a mano
Para pasar de HEX a RGB, divide el código en tres pares y convierte cada uno desde base 16: #FF6347 da 255, 99, 71. Para CMYK desde RGB: K = 1 − máx(R, G, B) / 255, luego C = (1 − R/255 − K) / (1 − K), y lo mismo para M e Y; el naranja puro rgb(255, 165, 0) es cmyk(0 %, 35 %, 100 %, 0 %). La herramienta lo hace al instante y acepta nombres, rgb(), hsl(), hwb(), lab() y oklch().
Crear una paleta
Los tintes mezclan el color con blanco y las sombras con negro, y dan pasos más claros y oscuros para fondos, bordes y estados hover. Las paletas armónicas giran el tono: complementario (180°), análogos (±30°), triádico (120°) y tetrádico (pasos de 90°). Los colores recientes se guardan solo en este navegador.
Preguntas frecuentes
¿Cómo convierto HEX a RGB?
Pega el código HEX en cualquier campo y copia el valor RGB. A mano, divide el código en pares y convierte cada uno desde hexadecimal: #1E88E5 es rgb(30, 136, 229).
¿Cómo tomo un color de mi pantalla?
Pulsa el cuentagotas y haz clic en cualquier punto de la pantalla. Funciona en navegadores con la API EyeDropper, como Chrome y Edge en escritorio.
¿Qué es OKLCH y para qué sirve?
OKLCH es un formato de color CSS con luminosidad, croma y tono basado en el modelo Oklab. Cambiando solo la luminosidad obtienes pasos uniformes que mantienen el tono, algo que HSL no consigue.
¿Los valores CMYK sirven para imprimir?
Son una conversión matemática sin perfil de color. El resultado impreso depende del papel, la tinta y la máquina, así que para colores de marca usa los valores CMYK del perfil de tu imprenta.
¿Puedo añadir transparencia?
Sí. Mueve Opacidad y todos los formatos se actualizan: el HEX recibe un par alfa (#RRGGBBAA) y las funciones CSS un valor alfa.
¿Se guarda mi historial de colores?
Los colores recientes se guardan solo en este navegador, en tu dispositivo. No se envía nada a ningún servidor.