Cómo usar: Buscador de nombres de color
- Introduce un código HEX (p. ej.
#55AAEE) o cualquier color CSS, o usa el selector. - Lee el nombre más cercano y qué tan parecido es (ΔE: cuanto menor, más cercano).
- Copia un nombre de variable listo para usar en CSS, SCSS, JavaScript o Tailwind.
- Para nombrar una paleta completa, pega varios colores en el cuadro masivo y copia el bloque
:rootgenerado.
¿Por qué ponerle nombre a los colores?
Un código HEX como #55AAEE no dice nada en una revisión de código, pero --cerulean sí. Los nombres descriptivos hacen que los tokens de diseño sean legibles, ayudan a diseñadores y desarrolladores a hablar del mismo color y evitan que variables como --blue-2-new-final se cuelen en el código.
Cómo funciona la comparación
La herramienta compara tu color con unos 5.000 nombres seleccionados a mano del proyecto de código abierto color-names (licencia MIT). Las distancias se miden en el espacio de color OKLab, perceptualmente uniforme, así que el nombre “más cercano” es el que realmente se ve más parecido, y no solo el que tiene los números más próximos. El valor ΔEOK indica qué tan cerca está: por debajo de 2 es prácticamente indistinguible, entre 2 y 5 es parecido, y por encima de 5 el nombre es una descripción aproximada.
También verás la palabra clave CSS oficial más cercana de las 148 disponibles (como royalblue o tomato), que puedes usar directamente en CSS.
Convenciones de nombres para tokens
| Contexto | Convención | Ejemplo |
|---|---|---|
| Propiedad personalizada CSS | kebab-case | --ocean-blue |
| Variable SCSS | kebab-case con prefijo | $color-ocean-blue |
| JavaScript / TypeScript | camelCase | oceanBlue |
| Clave de tema en Tailwind | kebab-case | bg-ocean-blue |
Nombres descriptivos frente a semánticos
Los nombres descriptivos (azul océano) son ideales para una paleta en bruto. Los componentes normalmente deberían usar tokens semánticos (--color-primary, --color-danger) que apunten a los descriptivos, así puedes cambiar la marca sin renombrar todo. Genera una escala completa de tonos para cada color base con el Tailwind Color Generator.
También se busca como: nombre de color, nombre de color hex, buscar nombre de color, qué color es este, name that color, variables css colores, tokens de diseño, nombres de colores css.
Herramientas que combinan con: Buscador de nombres de color
- Extractor de Paleta de Imagen — Encuentra la paleta de colores de cualquier imagen: una foto, un logo, una captura o un diseño.
- Conversor de colores — Pega cualquier color CSS —HEX, rgb(), hsl(), hwb(), oklch() o un nombre como tomato— y obtén al instante todos los demás formatos, además de una paleta 50–950 lista para usar.
- Variables CSS a Tailwind — Convierte tus variables de color :root en un tema de Tailwind de un solo pegado: Tailwind v3 con tailwind.config.js o v4 con @theme, con valores literales o referencias var().
- Mezclador de colores — Elige dos colores y un número de pasos para obtener colores de transición mezclados de forma uniforme, ideales para degradados, bordes, gráficos y estados hover.
Preguntas frecuentes
¿De qué color es #008080?
#008080 es Teal, que además es una de las palabras clave oficiales de color en CSS. Pega cualquier código de arriba para identificarlo.¿Son nombres de color oficiales?
tomato) son oficiales en CSS. Los demás nombres provienen de una lista curada por la comunidad y son etiquetas descriptivas, no estándares.¿Qué tan precisa es la coincidencia?
¿Puedo nombrar muchos colores a la vez?
:root resultante. Los nombres duplicados reciben un sufijo numérico.