Editor de esquemas de color CSS

Edite y analice esquemas de color CSS directamente en su navegador. Cargue archivos CSS, visualice colores como círculos interactivos, resalte códigos de color en el editor y edite sus hojas de estilo con una interfaz avanzada con reconocimiento de color. Compatible con hexadecimales, RGB, HSL y... colores nombrados.

Suelta tu archivo CSS aquí

o haga clic para explorar los archivos

Admite archivos .css de hasta 10 MB

CSS Editor

Pruébelo con CSS de muestra

Aún no se han encontrado colores. Prueba con este ejemplo de CSS que incluye varios formatos de color:

Comprobador de color rápido

Información de color

MALEFICIO: #000000
RGB: rgb (0, 0, 0)
HSL: hsl(0, 0%, 0%)
Ejemplos de uso de CSS:
color de fondo: #000000;
color: rgb(0, 0, 0);
borde: 1px sólido hsl(0, 0%, 0%);
Herramientas relacionadas:
Minificador de CSS Paleta de colores de IA Selector de color de imagen Comprobador de contraste

Cómo editar esquemas de color CSS

  1. Use el Comprobador de color rápido para obtener una vista previa instantánea de cualquier código de color y obtener todas las variaciones de formato.
  2. Pegue su código CSS directamente en el editor, o subir un archivo CSS.
  3. Haga clic enAnalizar colores" para extraer y mostrar todos los colores de su CSS.
  4. Visualiza tu paleta de colores como círculos de colores interactivos.
  5. Haga clic en cualquier círculo de color para resaltar todas las ocurrencias en el editor CSS.
  6. Navegar por variantes de color haciendo clic en los enlaces de variantes.
  7. Edite su CSS directamente: los cambios se reflejan en tiempo real.
  8. Descargar su archivo CSS modificado cuando haya terminado.

Funciones del editor de color CSS

Comprobador de color rápido

Previsualice al instante cualquier código de color y acceda a formatos HEX, RGB y HSL con botones de copia. Perfecto para usar con nuestros Convertidor de hexadecimal a RGB.

Paleta de colores visual

Vea todos los colores en su CSS como círculos de colores interactivos con información al pasar el cursor. Pruebe nuestro Generador de paleta de colores AI en busca de inspiración.

Detección inteligente

Detecta automáticamente colores hexadecimales, RGB, RGBA, HSL, HSLA y con nombre en toda su hoja de estilos.

Resaltado de color

Haga clic en cualquier color para resaltar todas las instancias en el editor CSS simultáneamente para una edición rápida.

Navegación de variantes

Saltar entre diferentes formatos del mismo color (por ejemplo, #ff0000, rgb(255,0,0), rojo).

Centrado en la privacidad

Todo el procesamiento ocurre en su navegador: su código CSS nunca sale de su dispositivo.

Acerca de la gestión de color CSS

Este editor de esquemas de color CSS ayuda a los desarrolladores y diseñadores web a gestionar los colores de forma eficiente. Tanto si trabajas en un nuevo proyecto como si refactorizas una hoja de estilos existente, esta herramienta simplifica y visualiza la gestión del color.

Las capacidades clave incluyen: soporte de formato de color para hexadecimal (#ff0000), RGB (rgb(255,0,0)), HSL (hsl(0,100%,50%)) y colores nombrados (rojo); unificación de color que agrupa diferentes formatos del mismo color; retroalimentación visual que muestra los colores como aparecen realmente; edición masiva para buscar y reemplazar rápidamente todas las instancias de un color específico; consistencia de diseño para identificar variaciones de color que se deben unificar; y pruebas rápidas usando el verificador de color para obtener una vista previa y validar instantáneamente los códigos de color.

Para obtener más herramientas de color, consulte nuestra Selector de color de imagen para extraer colores de las imágenes, o utilizar nuestro Comprobador de contraste de color para garantizar el cumplimiento de la accesibilidad WCAG.

Preguntas Frecuentes

Introduce cualquier código de color (hexadecimal como #e7f6fc, RGB como rgb(255,0,0), HSL como hsl(210,100%,50%) o colores con nombre como 'azul') en el campo de entrada y haz clic en "Comprobar color". Verás al instante una vista previa del color junto con todas las variaciones de formato, además de ejemplos de uso de CSS y botones para copiar para cada formato. ¿Necesitas convertir entre formatos? Prueba nuestro Convertidor RGB a hexadecimal.

El editor admite todos los formatos de color CSS estándar: colores hexadecimales (#ff0000, #f00), RGB/RGBA (rgb(255,0,0), rgba(255,0,0,0.5)), HSL/HSLA (hsl(0,100%,50%), hsla(0,100%,50%,0.5)) y más de 140 colores con nombre (rojo, azul, verde, etc.). Todos los formatos se detectan automáticamente y se agrupan según su valor de color real. Obtenga más información sobre la asignación de nombres de color con nuestro Buscador de nombres de colores.

Después de analizar tu CSS, haz clic en cualquier círculo de color para resaltar TODAS las apariciones de ese color en tu CSS, independientemente del formato. Por ejemplo, al hacer clic en un color rojo, se resaltarán simultáneamente #ff0000, rgb(255,0,0), red y hsl(0,100%,50%), ya que todos representan el mismo color.

¡Sí! El editor es totalmente funcional para editar CSS. Puedes escribir, pegar, editar y modificar tu código CSS en cualquier momento. Después de realizar los cambios, haz clic en "Actualizar colores" para volver a analizar tu paleta de colores. Al terminar, usa el botón "Descargar CSS" para guardar tu trabajo. ¿Necesitas minimizar tu CSS? Usa nuestro Minificador de CSS.

Sí, tu código CSS es completamente seguro. Todo el procesamiento se realiza localmente en tu navegador mediante JavaScript. Tu código no se sube a ningún servidor, lo que garantiza la total privacidad y seguridad de tus hojas de estilo y recursos de diseño.

Si experimenta algún problema al usar el Editor de Color CSS, intente actualizar la página y volver a empezar. Asegúrese de que su archivo CSS tenga el formato correcto y la extensión .css. Si el problema persiste, contáctenos y con gusto le ayudaremos.