Oscurecer color online
Oscurece colores HEX, RGB o HSL por porcentaje. Compara tonos y copia valores HEX, RGB, HSL, variables CSS o código color-mix().
Escribe HEX, rgb(59, 130, 246) o hsl(217, 91%, 60%).
Mezcla el porcentaje elegido con negro. 0% conserva el color original; 100% da negro.
Oscurecido
#3B82F6#2F68C5#2F68C5rgb(47, 104, 197)hsl(217, 61%, 48%)Salida CSS
--color-darkened: #2F68C5;color-mix(in srgb, #3B82F6 80%, black)Escala de tonos más oscuros
Vista previa de contraste
Texto de ejemplo
5.37:1
Cumple WCAG AA para texto normal. Oscurecimiento mínimo para AA: 12%
Valora Oscurecer color online
¿Te resultó útil esta herramienta? Tu valoración ayuda a otros a encontrarla.
Oscurece un color sin probar a ciegas
Un color más oscuro ayuda a comunicar cambios de estado sin alejarse de la paleta original. Usa este oscurecedor de color para convertir un valor HEX, RGB o HSL en estados de interfaz prácticos y copiar el valor exacto o el CSS que necesites.
Crea estados de interfaz desde un color base
En lugar de elegir cada tono a ojo, parte del mismo color de marca o de interfaz y genera variantes más oscuras de forma controlada. Así los botones, enlaces, etiquetas, bordes y gráficos mantienen una relación visual y sus estados se reconocen mejor.
- Crea un color hover de 10% a 20% más oscuro para botones y enlaces.
- Define un estado activo o pulsado más marcado sin cambiar de familia de color.
- Genera bordes, sombras, series de gráficos y acentos de modo oscuro desde el mismo color.
Elige el método según tu objetivo de diseño
Mezclar con negro es la opción predeterminada y más directa para un ajuste por porcentaje: 20% significa que el resultado contiene 20% de negro. Reducir la luminosidad HSL sirve cuando conservar el matiz y la saturación es más importante que hacer una mezcla literal con negro. Compara ambos resultados antes de definir un token de diseño.
- Usa Mezclar con negro para un oscurecimiento consistente y CSS color-mix() copiable.
- Usa Reducir luminosidad HSL si buscas una escala centrada en el matiz para una paleta o visualización de datos.
- Usa la escala de tonos más oscuros para comparar varias opciones lado a lado.
Comprueba la legibilidad antes de publicar
Un color más oscuro no garantiza que el texto sea legible. Añade el fondo previsto en la vista previa de contraste para ver la relación actual y el estado WCAG AA para texto normal. Si un tono más oscuro alcanza AA, la herramienta muestra el porcentaje mínimo disponible que lo consigue; úsalo como punto de partida y revisa el componente final en contexto.
- Copia HEX, RGB o HSL para herramientas de diseño y estilos de componentes.
- Copia una propiedad personalizada CSS para crear un token de diseño reutilizable.
- Todos los cálculos se realizan en tu navegador; no se sube ningún color.
Cómo funciona este Oscurecer color online
Cómo funciona el cálculo para oscurecer un color
Introduce un color HEX, RGB o HSL y selecciona un valor entre 0% y 100%. La herramienta normaliza el valor, calcula inmediatamente el color más oscuro y muestra el resultado en HEX, RGB y HSL para que uses el formato que requiere tu flujo de trabajo.
Dos formas de oscurecer un color
- Mezclar con negro: mezcla el porcentaje elegido de negro con el color base. Con 0% el resultado no cambia y con 100% es negro. Este método también ofrece una expresión
color-mix()para copiar. - Reducir luminosidad HSL: resta de la luminosidad HSL el número de puntos porcentuales elegido y conserva el matiz y la saturación. Es útil para crear una escala de color visualmente relacionada.
Compara, valida y copia
La escala de tonos más oscuros permite comparar ajustes habituales sin mover el control repetidamente. Añade un fondo a la vista previa para comprobar WCAG AA para texto normal y copia un valor HEX, RGB, HSL, una variable CSS o un valor color-mix() listo para usar. Todo se procesa localmente en tu navegador.
Cómo usar este Oscurecer color online
Introduce el color base
Pega un valor HEX, RGB o HSL, o usa el selector de color nativo.
Elige el porcentaje y el método
Define cuánto oscurecer y mezcla con negro o reduce la luminosidad HSL.
Copia un valor listo para usar
Usa el resultado, la escala, el contraste o el fragmento CSS.
Ejemplo de Uso
Una mezcla de negro al 20% crea un azul cielo más oscuro y listo para CSS.
Preguntas Frecuentes
¿Cómo oscurecer un color HEX online?
¿Cómo oscurecer un color en CSS?
¿Qué significa oscurecer por porcentaje?
¿Qué diferencia hay entre mezclar con negro y reducir la luminosidad HSL?
¿Puedo oscurecer colores RGB o HSL?
¿Qué formatos de color puedo convertir y copiar?
¿Cómo crear un color hover más oscuro?
¿Puedo generar una paleta o escala de tonos más oscuros?
¿Esta herramienta me ayuda a encontrar un color con contraste WCAG AA?
¿Mis colores se suben o se guardan?
Herramientas relacionadas
Aclarar un color
Aclara cualquier color HEX o RGB en el porcentaje que elijas.
Generador de Paletas de Colores con IA
Genera paletas de colores a partir de un ambiente, marca o tema con IA. Alterna entre modo aleatorio y modo IA, y copia los códigos HEX.
Cambiar el matiz de un color o imagen
Cambia el matiz de un color o de una imagen. Escribe un valor HEX, RGB o HSL, o suelta un archivo, elige el ángulo y copia el resultado o descárgalo.
Mezclador de Colores
Mezcla dos colores y obtén los valores interpolados en HEX, RGB y HSL.
Convertidor de Pantone a HEX
Convierte pantone to hex al instante. Herramienta gratuita y segura en línea.
Mapa de Color HSV
Elige colores en un mapa HSV interactivo y conviértelos al instante a valores HEX, RGB, HSL y HSV.
El Oscurecer color online es mantenido por CodeItBro. Nuestro objetivo es ofrecer las mejores herramientas gratuitas para desarrolladores en la web. Si tienes comentarios o sugerencias, visita nuestra página de contacto.
