Conversor de colores online
Pega un color en cualquier formato CSS y obtén todos los demás, además de su contraste.
Pega un HEX, rgb(), hsl(), hwb() o un nombre de color CSS, o elige uno
Tonos claros y oscuros
Valores
- HEX
- #3a5bd9
- RGB
- rgb(58, 91, 217)
- HSL
- hsl(227.5, 67.7%, 53.9%)
- HSV / HSB
- hsv(227.5, 73.3%, 85.1%)
- HWB
- hwb(227.5 22.7% 14.9%)
- CMYK
- cmyk(73%, 58%, 0%, 15%)
- Es una aproximación. El color impreso depende de las tintas y el papel, así que pide los valores exactos a tu imprenta.
- OKLCH
- oklch(52.35% 0.1965 267.75)
- Nombre CSS más cercano
- royalblue
Contraste (WCAG)
Texto de este color sobre cada fondo. El texto normal necesita 4,5:1 para AA y 7:1 para AAA; el texto grande (18 pt, o 14 pt en negrita) necesita 3:1 y 4,5:1.
Sobre blanco
Texto grande
El veloz murciélago hindú comía feliz cardillo y kiwi
5.71:1
- AA normal cumple
- AAA normal no cumple
- AA grande cumple
- AAA grande cumple
Sobre negro
Texto grande
El veloz murciélago hindú comía feliz cardillo y kiwi
3.68:1
- AA normal no cumple
- AAA normal no cumple
- AA grande cumple
- AAA grande no cumple
Sobre #ffffff
Texto grande
El veloz murciélago hindú comía feliz cardillo y kiwi
5.71:1
- AA normal cumple
- AAA normal no cumple
- AA grande cumple
- AAA grande cumple
Siguiente: Fondo transparente · Crear gráficos
Informar de un problema con esta herramienta
Cómo usar Conversor de colores
Introduce un color
Pega un código HEX, rgb(), hsl(), hwb() o un nombre como tomato, o elige uno con el selector de color.
Copia el formato que necesites
Todos los formatos se actualizan mientras escribes. Copia cualquiera con su botón o elige tu formato habitual para el botón Copiar grande.
Comprueba el contraste
Mira la relación de contraste WCAG sobre blanco, sobre negro y sobre un fondo a tu elección, con resultados AA y AAA para texto normal y grande.
Por qué usar Utils365
Lee cualquier color CSS
HEX de 3, 4, 6 y 8 dígitos, rgb() y hsl() con la sintaxis antigua de comas o la nueva de espacios, hwb(), porcentajes, unidades de tono y los 148 nombres de color.
También formatos modernos
Obtén OKLCH para sistemas de diseño y CSS de gama amplia, HWB y HSV para selectores de color, y HEX con alfa para colores semitransparentes.
Accesibilidad integrada
Las relaciones de contraste siguen WCAG 2 al pie de la letra y nunca se redondean para aprobar, así que 4,49:1 no pasa por 4,5:1.
Tonos claros y oscuros
Bajo la muestra hay cinco pasos más claros y cinco más oscuros. Haz clic en uno para convertirlo en el color actual.
Preguntas frecuentes
¿Qué diferencia hay entre HEX y RGB?
Ninguna en el color en sí. Ambos dan rojo, verde y azul de 0 a 255. HEX escribe cada uno con dos dígitos hexadecimales, así que rgb(58, 91, 217) es #3a5bd9. HEX es más corto, mientras que rgb() es más fácil de leer y ajustar a mano.
¿Qué es HSL?
Tono, saturación y luminosidad. El tono es la posición en la rueda de color en grados (0 es rojo, 120 verde, 240 azul), la saturación es lo vivo que es, y la luminosidad va del negro en 0 % al blanco en 100 %. Facilita escribir versiones más claras, más oscuras o más apagadas de un color.
¿Por qué el CMYK no coincide con mi color impreso?
Las pantallas mezclan luz y las impresoras tinta, y el resultado depende de las tintas, el papel y el perfil de la impresora. El CMYK que se muestra usa la fórmula estándar simple, así que tómalo como punto de partida y pide los valores exactos a tu imprenta.
¿Qué es la relación de contraste WCAG?
Una medida de cuánto se diferencian dos colores en luminosidad, de 1:1 (iguales) a 21:1 (negro sobre blanco). WCAG AA pide al menos 4,5:1 para texto normal y 3:1 para texto grande; AAA pide 7:1 y 4,5:1.
¿Qué es OKLCH?
Una forma más reciente de escribir colores en CSS por luminosidad, croma y tono, basada en cómo percibimos el color. Al cambiar la luminosidad el tono se ve igual, por eso es popular en sistemas de diseño y escalas de color.
¿Cómo funciona el nombre del color?
Si el color coincide exactamente con uno de los 148 nombres de color CSS, se muestra ese nombre. Si no, obtienes el más parecido a la vista, algo útil para describir un color con palabras.