Skip to main content
FreeToolkit .ai

Referencia de colores con nombre en CSS Explora todos los colores con nombre en CSS (más de 140) con búsqueda, ordenados por matiz o luminosidad.

Referencia de colores con nombre en CSS illustration
🎨

Referencia de colores con nombre en CSS

Explora todos los colores con nombre en CSS (más de 140) con búsqueda, ordenados por matiz o luminosidad.

1

Buscar Colores

Filtrar colores escribiendo un fragmento de nombre.

2

Opciones de Ordenación

Ordenar por nombre alfabético, ángulo de matiz o luminosidad.

3

Copiar HEX

Copiar el código HEX de cualquier color.

Loading tool...

What Is Referencia de colores con nombre en CSS?

La referencia de colores con nombre CSS es un catálogo visual integral de todos los colores con nombre CSS definidos en la especificación W3C, más de 140. A diferencia de una simple herramienta de búsqueda, esta referencia ofrece varias opciones de clasificación: alfabética, por matiz (agrupando colores similares) y por luminosidad (de más claro a más oscuro), lo que la convierte en una poderosa herramienta para explorar y descubrir colores. Cada entrada de color muestra un visor visual, el nombre semántico y el código HEX. La función de búsqueda filtra las coincidencias parciales de nombres, por lo que al escribir "azul" se muestran todos los colores relacionados con azul (aliceblue, blue, cadetblue, cornflowerblue, etc.). Esta referencia es fundamental para los desarrolladores que desean encontrar rápidamente colores con nombre, explorar qué nombres de color CSS están disponibles o elegir nombres de color semánticamente significativos para prototipos.

Why Use Referencia de colores con nombre en CSS?

  • Catálogo completo de todos los colores con nombre en CSS (140+)
  • Tres opciones de ordenación: nombre, matiz y luminosidad
  • Filtrado de búsqueda por coincidencia parcial de nombre
  • Muestras visuales para comparar colores al instante
  • Copia de un solo clic para cada código HEX

Common Use Cases

Descubrimiento de Colores

Navegar por los colores con nombre ordenados por matiz para descubrir nuevos colores que no sabías que existían en CSS.

Referencia Rápida

Encontrar el valor HEX exacto de cualquier color con nombre en CSS.

Creación de Prototipos

Elegir nombres de colores semánticos para prototipar rápidamente sin buscar códigos hex.

Educación

Aprender la gama completa de colores con nombre en CSS y su apariencia visual.

Technical Guide

Los colores con nombre CSS son palabras clave definidas en la especificación del módulo de color CSS Nivel 4. Hay 148 colores con nombre (incluyendo alias como aqua/cyan). Cada nombre se asigna a un color sRGB específico. La clasificación por matiz utiliza el ángulo de matiz HSL (0-360°) extraído del valor hexagonal de cada color, que agrupa los rojos, naranjas, amarillos, verdes, azules y púrpuras juntos. La clasificación por luminosidad utiliza el valor de luminosidad HSL (0-100%). Los colores acromáticos (negro, blanco, grises) tienen un matiz de 0° pero una saturación muy baja, por lo que se agrupan en un extremo de la clasificación por matiz. Existen algunas inconsistencias en la nomenclatura heredadas del sistema de color X11: notablemente, "darkgray" (A9A9A9) es más claro que "gray" (808080).

Tips & Best Practices

  • 1
    Ordenar por matiz para encontrar todos los azules, verdes, rojos, etc. agrupados juntos
  • 2
    Ordenar por luminosidad para encontrar rápidamente colores claros para fondos o colores oscuros para texto
  • 3
    La búsqueda acepta coincidencias parciales - "mar" encuentra marine, marino, darkmarine, etc.
  • 4
    Los colores con nombre son ideales para estilos de console.log, rellenos SVG y prototipos rápidos
  • 5
    Para producción, reemplaza los colores con nombre por valores HEX exactos para predecir el resultado

Related Tools

Convertidor de HEX a RGB - free online tool

Convertidor de HEX a RGB

Convierta códigos de color HEX a valores RGB al instante con una vista previa en vivo.

🎨 Color Tools
Convertidor de HEX a HSL - free online tool

Convertidor de HEX a HSL

Convierta códigos de color HEX en valores HSL (Matiz, Saturación, Luminosidad).

🎨 Color Tools
Nombre de color a HEX - free online tool

Nombre de color a HEX

Busca códigos HEX para todos los colores con nombre en CSS (más de 140) con búsqueda y vista previa.

🎨 Color Tools
Selector de colores - free online tool

Selector de colores

Selector de colores interactivo con salidas HEX, RGB, HSL y CMYK.

🎨 Color Tools
Buscador de colores Tailwind - free online tool

Buscador de colores Tailwind

Encuentra la clase de color CSS de Tailwind más cercana para cualquier código HEX.

🎨 Color Tools

Frequently Asked Questions

Q ¿Cuántos colores con nombre hay en CSS?
148 colores con nombre en la especificación de CSS, con 145 colores únicos (3 son alias: aqua=cyan, fuchsia=magenta, darkgrey=darkgray).
Q ¿Qué significa ordenar por matiz?
La ordenación por matiz organiza los colores según su posición en la rueda de colores (0-360°). Los rojos vienen primero (0°), seguidos de naranjas, amarillos, verdes, azules, púrpuras y regresando a los rojos. Los grises tienen un matiz indefinido y aparecen en un extremo.
Q ¿Puedo usar colores con nombre en CSS moderno?
Sí, los colores con nombre funcionan en todas las propiedades de CSS que aceptan valores de color. Están definidos en el estándar de CSS y son compatibles universalmente.

About This Tool

Referencia de colores con nombre en CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.