Colores: nombres, códigos y tonos
Encuentra colores por nombre o código: HEX, RGB, HSL, OKLCH, tonos más claros y oscuros, colores complementarios y afines.
Haz clic en un color para ver su ficha.
Colores de referencia
Colores con nombre de la web (CSS)
Estos nombres se usan directamente en CSS, por ejemplo color: tomato;
No se ha encontrado ningún color. Escribe un código como #1245B4 para ver su ficha.
Colecciones creadas por KSPNAI, de uso libre.
Sobre esta herramienta
Esta carta de colores en línea gratuita te ayuda a encontrar un color por su nombre o su código. Reúne colores de referencia con nombres habituales (terracota, verde salvia, azul petróleo, burdeos…) y los colores con nombre de CSS, como tomato o navy. Cada color tiene su ficha con los códigos HEX, RGB, HSL y OKLCH, listos para copiar en una web, un documento o un programa de diseño.
La ficha muestra además una gama de tonos más claros y más oscuros, el color complementario, los análogos y una tríada, junto con una indicación de si conviene poner encima texto claro u oscuro. Filtra por familia (rojos, azules, marrones…) o escribe cualquier código HEX para ver su ficha. Los enlaces abren el color en el generador de paletas, los tonos Tailwind o la comprobación de contraste.
- Búsqueda por nombre o código HEX
- Códigos HEX, RGB, HSL y OKLCH para copiar
- Tonos más claros y oscuros de cada color
- Complementario, análogos y tríada
- Filtro por familia de colores
Cómo usarla
- Escribe un nombre o un código en el buscador, o elige una familia.
- Haz clic en un color para ver su ficha.
- Pulsa Copiar junto al código HEX, RGB, HSL u OKLCH que necesites.
- Haz clic en un tono o en un color afín para abrir su propia ficha.
Preguntas frecuentes
¿Cuál es el código HEX de un color como el verde salvia o el azul petróleo?
Escribe su nombre en el buscador y haz clic en él: la ficha muestra su código HEX y sus equivalentes RGB, HSL y OKLCH. Los valores corresponden al tono elegido por KSPNAI; otras cartas de colores pueden usar uno algo distinto.
¿Puedo ver la ficha de un color que no está en la lista?
Sí. Escribe un código HEX, por ejemplo #1245B4: si ningún color de la lista coincide, se muestra igualmente su ficha completa.
¿Qué significan HSL y OKLCH?
Son otras formas de escribir un color en CSS. HSL lo describe por tono, saturación y luminosidad; OKLCH usa una luminosidad percibida más uniforme, útil para crear tonos coherentes.
¿Es gratis y mis búsquedas son privadas?
Sí, es gratuita y sin cuenta. Los colores vienen con la página y la búsqueda se hace en tu navegador, sin enviar nada.