Editor de esquemas de color CSS

Edita y analiza esquemas de color CSS directamente en tu navegador. Sube archivos CSS, visualiza colores como círculos interactivos, resalta códigos de color en el editor y edita tus hojas de estilo con una interfaz avanzada con reconocimiento de color.

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 la opción 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

Obtenga una vista previa instantánea de cualquier código de color y obtenga formatos HEX, RGB y HSL con botones de copia.

Paleta de colores visual

Vea todos los colores en su CSS como círculos de colores interactivos con información al pasar el mouse sobre ellos.

Detección inteligente

Detecta automáticamente colores hexadecimales, RGB, RGBA, HSL, HSLA y con nombre.

Resaltado de color

Haga clic en cualquier color para resaltar todas las instancias en el editor CSS simultáneamente.

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 administrar los colores de manera eficiente:

  • Compatibilidad con formatos de color - maneja colores hexadecimales (#ff0000), RGB (rgb(255,0,0)), HSL (hsl(0,100%,50%)) y con nombre (rojo).
  • Unificación de colores - agrupa diferentes formatos del mismo color para una fácil gestión.
  • Retroalimentación visual - vea sus colores como aparecen realmente, no solo como valores de código.
  • Edición masiva - Busque y reemplace rápidamente todas las instancias de un color específico en todos los formatos.
  • Consistencia del diseño - Identificar variaciones de color que deben unificarse en su diseño.
  • Pruebas rápidas - utilice el verificador de color para obtener una vista previa y validar instantáneamente los códigos de color.

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 de copia para cada formato.

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 colores con nombre (rojo, azul, verde, etc.). Todos los formatos se detectan y agrupan automáticamente según su valor de color real.

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.

¡Por supuesto! El editor es totalmente funcional para la edición CSS. Puedes escribir, pegar, editar y modificar tu código CSS en cualquier momento. Las funciones de análisis de color y resaltado se complementan con las funciones de edición.

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.